forked from e-mission/e-mission-phone
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initial version of the react integration
- We check in the JSX file of the tutorial directly into e-mission - We include ngReact in the dependencies - We include `<script` tags for the react libraries and ngReact itself - We include babel in the npm dependencies - We add a command `compile-react` to run babel to compile the JSX - We add a README instruction on how to run it and generate the js file - We change the app to depend on react and to create a directive with the `TutorialComponent` - We add a new file `survey.html` which basically includes only the `<tutorial` tag in the main body - We read the file into the scope taking i18n into account, similar to the other files in the intro - We add a new slide for the new `survey.html`, using the scope variable, of course With this change, we can see tutorial during the onboarding e-mission/e-mission-docs#643 (comment) This is consistent with my action item in e-mission/e-mission-docs#643 (comment) Note that since `package.cordovabuild.json` currently does not include any commands, this is only supported in the devapp (serve) option. using a full native build will not allow react components to be added. This is fine since this is a temporary measure, which will be addressed when we break this dependency.
- Loading branch information
Showing
9 changed files
with
133 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| /* | ||
| * src/app/help-panel/Tutorial.jsx | ||
| */ | ||
|
|
||
| class TutorialComponent extends React.Component { | ||
| render() { | ||
| return( | ||
| <div className="content-wrapper"> | ||
| <div className="row"> | ||
| {/* bootstrap grid as margin */} | ||
| <div className="col-xs-2" /> | ||
|
|
||
| <div className="col-xs-12 col-md-10 col-lg-8"> | ||
| {/* create new grids for laying out tutorial */} | ||
| <div className="row"> | ||
| <div className="col-xs-12 text-center tutorial-title"> | ||
| <h2><b>Itinerum Dashboard Guide</b></h2> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Permissions guide */} | ||
| <div className="row tutorial-row"> | ||
| <div className="col-xs-12 col-sm-6"> | ||
| <b>Permissions</b> | ||
| <p>Allows administrators to control access to web dashboard. A sign-up code can be provided to additional researchers to view survey data.</p> | ||
| </div> | ||
| <div className="col-xs-12 col-sm-6 help-icon"> | ||
| <i className="mdi mdi-key-variant" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Survey wizard guide */} | ||
| <div className="row tutorial-row"> | ||
| <div className="col-xs-12 col-sm-6 help-icon"> | ||
| <i className="mdi mdi-star-circle" /> | ||
| </div> | ||
| <div className="col-xs-12 col-sm-6"> | ||
| <b>Survey Wizard</b> | ||
| <p>A drag-and-drop survey building interface. Drag field types from the right to central survey stack to add questions to the survey. Question can be repositioned after initial drop. Click “edit” to change the prompt question and the field’s column name in answers database table.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Survey Stats guide */} | ||
| <div className="row tutorial-row"> | ||
| <div className="col-xs-12 col-sm-6"> | ||
| <b>Metrics</b> | ||
| <p>Provides dashboard overview charts and metrics for the ongoing survey.</p> | ||
| </div> | ||
| <div className="col-xs-12 col-sm-6 help-icon"> | ||
| <i className="mdi mdi-chart-areaspline" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Participants guide */} | ||
| <div className="row tutorial-row"> | ||
| <div className="col-xs-12 col-sm-6 help-icon"> | ||
| <i className="mdi mdi-face" /> | ||
| </div> | ||
| <div className="col-xs-12 col-sm-6"> | ||
| <b>Participants</b> | ||
| <p>A searchable table view of mobile users and their survey responses. Clicking on a user within the table will select their UUID within the GPS Points view.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* GPS Points guide */} | ||
| <div className="row tutorial-row"> | ||
| <div className="col-xs-12 col-sm-6"> | ||
| <b>GPS Points</b> | ||
| <p>Allows admins and researchers to view any participating users points. Participants are limited to this view to display their own collected points.</p> | ||
| </div> | ||
| <div className="col-xs-12 col-sm-6 help-icon"> | ||
| <i className="mdi mdi-crosshairs-gps" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Data Management guide */} | ||
| <div className="row tutorial-row"> | ||
| <div className="col-xs-12 col-sm-6 help-icon"> | ||
| <i className="mdi mdi-cloud-download" /> | ||
| </div> | ||
| <div className="col-xs-12 col-sm-6"> | ||
| <b>Data Management</b> | ||
| <p>Provides downloads for survey data, uploading of subway stations and resetting of an active survey.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| {/* bootstrap grid as margin */} | ||
| <div className="col-xs-2" /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <ion-content class="has-footer"> | ||
| <tutorial/> | ||
| </ion-content> | ||
| <ion-footer-bar class="no-bgColor" id="intro-footer"> | ||
| <button class="button button-block button-outline button-positive" ng-click="next()"> | ||
| SUBMIT | ||
| </button> | ||
| </ion-footer-bar> |