Merge pull request #21 from fablabbcn/accesspoint

Accesspoint
fablabbcn · Nov 25, 2017 · 9fd1d5b · 9fd1d5b
2 parents 08b26b4 + a2ca24c
commit 9fd1d5b
Show file tree

Hide file tree

Showing 39 changed files with 2,311 additions and 765 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,15 @@
 # Making Sense Onboarding
 
-The Marking Sense onboarding. Currenty supproting the [SmartCitizen API](https://github.com/fablabbcn/smartcitizen) and the new [SmartCitizen Kit 1.5](https://github.com/fablabbcn/Smart-Citizen-Kit-1.5).
+
+
+The Marking Sense onboarding. This project is a means to alleviate the issue of abandonment in [IOT devices](https://en.wikipedia.org/wiki/Internet_of_things) related to [citizen science and civil sensing](https://en.wikipedia.org/wiki/Citizen_science). This onboaridng is being used by [Making Sense](http://making-sense.eu/) as a means to test the effectiveness of building communities around these grassroots initiatives. Currently supporting the [SmartCitizen API](https://github.com/fablabbcn/smartcitizen) and the new [SmartCitizen Kit 1.5](https://github.com/fablabbcn/Smart-Citizen-Kit-1.5).
+
+This is a web app that aims to solve key issues in the setup of open data sensors within grassroots smart-city communities through developing cognitive goals, such as fostering ownership, creating context, showing playful animations and simplifying language. This multi-lingual experience helps reduce the bottleneck of non-technical citizens installing IOT devices. This tool is currently being used in an EU Research Project.
+
+Here is the current [link to live-deployment](https://onboarding.making-sense.eu/wizard/landing?lang=cat)
+
+Updates are handled [through this fork](https://github.com/fablabbcn/onboarding-app) and then moved down to the master
+
 
 ### Prerequisites
 
@@ -11,7 +20,6 @@ We also use a number of node.js tools to initialize and test the Web App. You mu
 its package manager (npm) installed. You can get them from [http://nodejs.org/](http://nodejs.org/).
 
 Also gulp: `npm install -g gulp` (with `sudo` if you are using Mac).
-
 ### Clone the project
 
 Clone the repository using:
@@ -41,45 +49,3 @@ Note: in case you see something like:
 
 Run:
 `rm -Rf $(node -e "console.log(require('path').join(require('os').tmpdir(), 'tmpRepo'))")`
-
-### Directory structure
-
-[Best Practice Recommendations for Angular App Structure](https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub)
-
-
-### Naming conventions for files
-Same for all types of components:
-<Name of component camelcased>.<Type of module>.js
-Ex: kit.controller.js, sensor.service.js, profileTools.constant.js
-
-
-### Naming conventions for components
-Controller: <Name of controller capitalized>Controller. Ex: MapController
-Service: <Name of service camelcased>. Ex: device, kit, user 
-Constructor: <Name of constructor capitalized>. Ex: User, Kit. Note: Constructors are actually made using services.
-Constants: <Name of constant uppercase joined by an underscore>. Ex: PROFILE_TOOLS
-
-For data that has been resolved from the router, I've normally appended 'Data' to the name.
-
-### Development
-
-When developing you might like to set `var refreshed = true;` in `router.js` to keep router states persistent on reload.
-
-### Deployment
-
-* **Staging on gh-pages for onboarding.making-sense.eu:** Do `gulp deploy`. 
-
-* **Staging on gh-pages without a custom domain:** Change base tag on index.html to `base` url for staging: https://fablabbcn.github.io/smartcitizen-onboarding/ and do `gulp deploy`. Currently you also will need to change the `font-face` paths as following:
-
-```
-@font-face {
-  font-family: "SSStandard";
-  src: url('/onboarding-app/app/styles/fonts/ss-standard.eot');
-  src: url('/onboarding-app/app/styles/fonts/ss-standard.eot?#iefix') format("embedded-opentype"),
-  url('/onboarding-app/app/styles/fonts/ss-standard.woff') format("woff"),
-  url('/onboarding-app/app/styles/fonts/ss-standard.ttf') format("truetype"),
-  url('/onboarding-app/app/styles/fonts/ss-standard.svg#SSStandard') format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-```
diff --git a/src/app/images/accesspoint_mobile.png b/src/app/images/accesspoint_mobile.png
diff --git a/src/app/images/connect2.png b/src/app/images/connect2.png
diff --git a/src/app/images/connect3.png b/src/app/images/connect3.png
diff --git a/src/app/styles/_handshake.scss b/src/app/styles/_handshake.scss
@@ -0,0 +1,30 @@
+$handshakeBarHeight: 200px;
+$handshakeBarBackgroundColor: rgba(79,164,220, .2);
+$handshakeBarColor: $msGreen;
+
+.backgroundProgressLoader {
+  position: absolute;
+  top: 50%;
+  z-index: -1;
+  left: 0;
+  width: 100%;
+
+  &.idle {
+    visibility: hidden;
+  }
+  &.start {
+    visibility: visible;
+  }
+
+  md-progress-linear {
+    height: $handshakeBarHeight;
+    .md-container.md-mode-determinate {
+      height: $handshakeBarHeight;
+      background-color: $handshakeBarBackgroundColor;
+      .md-bar {
+        height: $handshakeBarHeight;
+        background-color: $handshakeBarColor;
+      }
+    }
+  }
+}
diff --git a/src/app/styles/_navigation.scss b/src/app/styles/_navigation.scss
@@ -122,7 +122,7 @@ $button-height: $segueWrapperHeight / 2.75;
         position: relative;
         top: -14px;
         padding-left: 5px;
-
+        text-transform: uppercase;
       }
       #nextSVG {
         position: relative;

diff --git a/src/app/styles/main.scss b/src/app/styles/main.scss
@@ -61,10 +61,29 @@ body {
       font-size: 32px;
     }
   }
+  h3{
+    font-weight: 400;
+    font-size: 30px;
+    color: $msWhite;
+    @media screen and (max-width: 450px) {
+      font-size: 22px;
+    }
+    em{
+      font-style: normal !important;
+      &.green{
+        color: $msGreen;
+
+      }
+      &.orange{
+        color: $msOrange;
+      }
+    }
+  }
+
   h4, p{
     font-weight: 400;
     font-size: 28px;
-    color: $msWhite;
+    color: $msGrey;
     @media screen and (max-width: 450px) {
       font-size: 20px;
     }
@@ -284,7 +303,7 @@ body {
         height: 60px;
         width: auto;
         margin: 15px auto;
-        padding: 5px 5px 5px 15px;
+        padding: 5px 15px 5px 15px;
 
         text-transform: uppercase;
         background: $msNavy2;
@@ -324,6 +343,30 @@ body {
           }
         }
       }
+
+      .promptedText{
+        background-color: $msBlue;
+        border-radius: $divRadius * 2;
+        padding: 15px 45px;
+        //max-width: 400px;
+        h2{
+          color: $msNavy;
+        }
+      }
+
+      .languageSelector{
+        .contextButton{
+          margin: 15px 75px !important;
+          #nextSVG {
+            position: relative;
+            top: 0;
+            left: 5px;
+            display: inline;
+            padding-right: 10px;
+          }
+        }
+      }
+
     }
   }
-}
+}
diff --git a/src/app/wizard/account1.html b/src/app/wizard/account1.html
@@ -17,10 +17,10 @@ <h4>{{payload.h4}}</h4>
             </div>
             <div flex="grow" class="md-box">
                 <md-input-container class="md-block">
-                    <label>Type email here</label>
+                    <label>{{payload.input1}}</label>
                     <input autofocus ng-model="given_email" ng-change="accountListener()" ng-model-options="{ debounce: 500 }" required type="text" name="given_email">
                     <div ng-messages="email_form.given_email.$error">
-                        <div ng-message="required">You must enter an email.</div>
+                        <div ng-message="required">{{payload.input1_error}}</div>
                     </div>
                 </md-input-container>
             </div>

diff --git a/src/app/wizard/ap_final.html b/src/app/wizard/ap_final.html
@@ -0,0 +1,6 @@
+<div class="animate" ng-class="animationRows[2][0]">
+    <h2>{{payload.h2}}</h2>
+</div>
+<div class="animate" ng-class="animationRows[2][1]">
+    <h4>{{payload.h4}}</h4>
+</div>
diff --git a/src/app/wizard/handshake.html b/src/app/wizard/handshake.html
@@ -8,20 +8,11 @@ <h4>{{payload.h4}}</h4>
 
 <div class="animate" ng-class="animationRows[3][2]" layout="column" layout-align="center center" flex="grow">
     <div layout-align="center center" layout="row" id="handShakeSpace" flex style="height: 35vw; width: 35vw; min-width: 480px; min-height: 480px; background-color:#4AA3DF; border-radius: 10vw;">
-        <div style="display: block; width: 350px;"><h2 style="font-size: 35px; text-align: left;">{{handshakeLabel}}</h2></div>
-        <!--<svg width="373px" height="373px" viewBox="534 336 373 373" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">-->
-        <!--&lt;!&ndash; Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch &ndash;&gt;-->
-        <!--<desc>Created with Sketch.</desc>-->
-        <!--<defs></defs>-->
-        <!--<g id="SVG_case" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(535.000000, 337.000000)">-->
-        <!--<path d="M3.35382648,81.7368988 C7.19298895,42.7242108 41.8668351,7.3280505 80.9043493,3.61531715 L115.333267,1.14829673 C154.513861,-0.108910326 218.051464,-0.634604211 257.233634,1.149191 L291.66087,3.61641116 C330.644386,7.74847713 365.21557,42.7374188 368.135614,81.8425787 L370.063129,116.09643 C371.051711,155.293466 371.465385,218.844397 370.063129,258.041452 L368.135614,292.295303 C364.883296,331.366357 330.60753,366.008504 291.50237,368.928548 L257.248518,370.856062 C218.051483,371.844644 154.500552,372.258319 115.303497,370.856062 L81.0496453,368.928548 C41.9785919,365.676229 6.80053811,331.439298 3.35281077,292.387776 L1.06689957,258.026567 C-0.100965597,218.837752 -0.589481695,155.293485 1.06689957,116.111315 L3.35382648,81.7368988 Z" id="Rectangle-7" fill="#4AA3DF"></path>-->
-        <!--<text id="Place-kit-here" font-family="Rubik-Regular, Rubik" font-size="30" font-weight="normal" line-spacing="40" fill="#FFFFFF">-->
-        <!--<tspan x="89.495" y="199">Place kit here</tspan>-->
-        <!--</text>-->
-        <!--</g>-->
-        <!--</svg>-->
-        <!--remove the following dependency from the JS-->
-
+        <div style="display: block; width: 350px;"><h2 style="font-size: 35px; text-align: center;">{{payload.handshakeLabel}}</h2></div>
     </div>
 </div>
 
+<div class="backgroundProgressLoader" ng-class="backgroundLoader">
+    <md-progress-linear md-mode="determinate" value="{{ loadingPercentage }}"></md-progress-linear>
+</div>
+
diff --git a/src/app/wizard/kitbuild1.html b/src/app/wizard/kitbuild1.html
@@ -5,5 +5,5 @@
     <h2>{{payload.h2}}</h2>
 </div>
 <div class="buildInstructions animate" ng-class="animationRows[3][2]">
-    <p> Coloca un separador dentro de cada agujero de la placa de sensores</p>
+    <p>{{payload.text}}</p>
 </div>
diff --git a/src/app/wizard/kitbuild2.html b/src/app/wizard/kitbuild2.html
@@ -5,5 +5,5 @@
     <h2>{{payload.h2}}</h2>
 </div>
 <div class="buildInstructions animate" ng-class="animationRows[3][2]">
-    <p> Conecta los pines en de la placa de sensores con la placa de placa de datos</p>
+    <p>{{payload.text}}</p>
 </div>
diff --git a/src/app/wizard/kitbuild3.html b/src/app/wizard/kitbuild3.html
@@ -5,5 +5,5 @@
     <h2>{{payload.h2}}</h2>
 </div>
 <div class="buildInstructions animate" ng-class="animationRows[3][2]">
-    <p>Conecta la batería con la placa de datos</p>
+    <p>{{payload.text}}</p>
 </div>
diff --git a/src/app/wizard/landing.html b/src/app/wizard/landing.html
@@ -1,9 +1,31 @@
-<div layout="row" layout-align="center center" class="animate" ng-class="animationRows[3][0]">
+<div layout="row" layout-align="center center" class="animate" ng-class="animationRows[4][0]">
     <img ng-src="app/images/MS LOGO.png" class="companyLogo" layout="center">
 </div>
-<div class="animate" ng-class="animationRows[3][1]">
+<div class="animate" ng-class="animationRows[4][1]">
     <h1>{{payload.h1}}</h1>
 </div>
-<div class="animate" ng-class="animationRows[3][2]">
+<div class="animate" ng-class="animationRows[4][2]">
     <h4>{{payload.h4}}</h4>
+</div>
+<div class="animate" ng-class="animationRows[4][3]">
+    <div class="languageSelector" layout="row" layout-align="center center">
+        <button class="contextButton" ng-click="languageChangeSegue(0)">
+            {{ payload.contextButton1 }}
+            <svg id="nextSVG" width="10px" height="16px" viewBox="187 22 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <!-- Generator: Sketch 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
+                <desc>Created with Sketch.</desc>
+                <defs></defs>
+                <path d="M187.539062,22.0676084 L196.867188,29.7394834 C196.95573,29.8071921 197,29.8931287 197,29.9972959 C197,30.1170882 196.95573,30.2030248 196.867188,30.2551084 L187.539062,37.9269834 C187.434895,38.0051088 187.317709,38.0155254 187.1875,37.9582334 C187.062499,37.9009415 187,37.8019841 187,37.6613584 L187,22.3332334 C187,22.1926077 187.062499,22.0936504 187.1875,22.0363584 C187.317709,21.9790665 187.434895,21.989483 187.539062,22.0676084 L187.539062,22.0676084 Z" id="directright" stroke="none" fill="#FFFFFF" fill-rule="evenodd"></path>
+            </svg>
+        </button>
+        <button class="contextButton" ng-click="languageChangeSegue(1)">
+            {{ payload.contextButton2 }}
+            <svg id="nextSVG" width="10px" height="16px" viewBox="187 22 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <!-- Generator: Sketch 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
+                <desc>Created with Sketch.</desc>
+                <defs></defs>
+                <path d="M187.539062,22.0676084 L196.867188,29.7394834 C196.95573,29.8071921 197,29.8931287 197,29.9972959 C197,30.1170882 196.95573,30.2030248 196.867188,30.2551084 L187.539062,37.9269834 C187.434895,38.0051088 187.317709,38.0155254 187.1875,37.9582334 C187.062499,37.9009415 187,37.8019841 187,37.6613584 L187,22.3332334 C187,22.1926077 187.062499,22.0936504 187.1875,22.0363584 C187.317709,21.9790665 187.434895,21.989483 187.539062,22.0676084 L187.539062,22.0676084 Z" id="directright" stroke="none" fill="#FFFFFF" fill-rule="evenodd"></path>
+            </svg>
+        </button>
+    </div>
 </div>
diff --git a/src/app/wizard/location_map.html b/src/app/wizard/location_map.html
@@ -21,7 +21,7 @@ <h4>{{payload.h4}}</h4>
                 </div>
                 <div flex="grow" class="md-box">
                     <md-input-container class="md-block">
-                        <label>Introduce una Ubicación</label>
+                        <label>{{payload.input1}}</label>
                         <input type="text" class="autoCompleteInput" g-places-autocomplete
                                ng-change="autoCompleteListener()"
                                ng-model="autocomplete">

diff --git a/src/app/wizard/login.html b/src/app/wizard/login.html
@@ -1,11 +1,11 @@
-<div class="animate" ng-class="animationRows[3][0]">
+<div class="animate" ng-class="animationRows[4][0]">
     <h2>{{payload.h2a}} {{submittedData.user.username}} {{payload.h2b}}</h2>
 </div>
-<div class="animate" ng-class="animationRows[3][1]">
+<div class="animate" ng-class="animationRows[4][1]">
     <h4>{{payload.h4}}</h4>
 </div>
 
-<form name="password_form" class="animate" ng-class="animationRows[3][2]">
+<form name="password_form" class="animate" ng-class="animationRows[4][2]">
     <div class="inputDiv" layout="column" layout-align="center">
         <div  class='inputContainer' layout="row" layout-align="start center">
             <div class="ss_input">
@@ -17,7 +17,7 @@ <h4>{{payload.h4}}</h4>
             </div>
             <div flex="grow" class="md-box">
                 <md-input-container ng-model-options="{ debounce: 1000 }" class="md-block">
-                    <label>Contraseña</label>
+                    <label>{{payload.input1}}</label>
                     <input  ng-model="pass" ng-change="loginListener()" type="{{showPasswordToggle}}" name="pass" >
                     <div ng-messages="password_form.pass.$error">
                     </div>
@@ -34,4 +34,18 @@ <h4>{{payload.h4}}</h4>
     </div>
 </form>
 
+<!--<div class="animate" layout="center center" ng-class="animationRows[4][3]">-->
+    <!--<button class="contextButton" ng-click="forgotPassword()">-->
+        <!--<svg width="23px" height="25px" viewBox="15 13 23 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">-->
+            <!--&lt;!&ndash; Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch &ndash;&gt;-->
+            <!--<desc>Created with Sketch.</desc>-->
+            <!--<defs></defs>-->
+            <!--<text id="question" stroke="none" fill="none" font-family="SSStandard, SS Standard" font-size="18" font-weight="normal">-->
+                <!--<tspan x="17.5" y="32" fill="#FFFFFF">question</tspan>-->
+            <!--</text>-->
+        <!--</svg> {{ payload.contextButton }}-->
+    <!--</button>-->
+<!--</div>-->
+
+
 <!-- #TODO - Maybe have a loader here! when login happens-->
diff --git a/src/app/wizard/make_account1.html b/src/app/wizard/make_account1.html
@@ -17,10 +17,10 @@ <h4>{{payload.h4}}</h4>
             </div>
             <div flex="grow" class="md-box">
                 <md-input-container class="md-block">
-                    <label>Escribe el nombre aquí</label>
+                    <label>{{payload.input1}}</label>
                     <input ng-model-options="{ debounce: 500 }"  autofocus ng-model="given_username" ng-change="usernameListener()" required type="text" name="given_username">
                     <div ng-messages="email_form.given_username.$error">
-                        <div ng-message="required">Tienes que escribir un nombre</div>
+                        <div ng-message="required">{{payload.input1_error}}</div>
                     </div>
                 </md-input-container>
             </div>

diff --git a/src/app/wizard/make_account2.html b/src/app/wizard/make_account2.html
@@ -18,11 +18,11 @@ <h4>{{payload.h4a}}</h4>
             </div>
             <div flex="grow" class="md-box">
                 <md-input-container class="md-block">
-                    <label>Contraseña</label>
+                    <label>{{payload.input1}}</label>
                     <input  ng-model-options="{ debounce: 1000 }"  ng-model="pass1" ng-change="passwordListener()" type="{{showPasswordToggle}}" name="pass1" minlength="5" required>
                     <div ng-messages="password_create.pass1.$error">
-                        <div ng-message="required">You must enter a password</div>
-                        <div ng-message="minlength">The password must be at least 5 characters long</div>
+                        <div ng-message="required">{{payload.input1_error2}}</div>
+                        <div ng-message="minlength">{{payload.input1_error}}</div>
                     </div>
                 </md-input-container>
             </div>
@@ -47,11 +47,11 @@ <h4>{{payload.h4a}}</h4>
             </div>
             <div flex="grow" class="md-box">
                 <md-input-container class="md-block">
-                    <label>Contraseña</label>
+                    <label>{{payload.input1}}</label>
                     <input  ng-model-options="{ debounce: 1000 }" ng-model="pass2" ng-change="passwordListener()" type="{{showPasswordToggle}}" name="pass2" minlength="5" required>
                     <div ng-messages="password_create.pass2.$error">
-                        <div ng-message="required">You must enter a password</div>
-                        <div ng-message="minlength">The password must be at least 5 characters long</div>
+                        <div ng-message="required">{{payload.input1_error2}}</div>
+                        <div ng-message="minlength">{{payload.input1_error}}</div>
                     </div>
                 </md-input-container>
             </div>