#31 finalize setup wizard process

app/src/assets/app.css

@@ -5,4 +5,9 @@
 .v-btn__content .v-icon--left, .v-btn__content .v-icon--right {
 	width: 24px !important;
 	height: 24px !important;
+}
+
+/* FIX https://github.com/vuetifyjs/vuetify/issues/9130 */
+.v-card__text, .v-card__title {
+	word-break: normal !important;
 }

app/src/assets/case_editor.svg

@@ -1,18 +1,24 @@
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" _width="561px" _height="527px" viewBox="0 0 5610 5270" preserveAspectRatio="xMidYMid meet">
 
 <defs>
-  <pattern id="pattern_b" width="100%" height="100%">
+  <pattern id="pattern_b_weather" width="100%" height="100%">
     <image x="0" y="0" height="84%" href="/face-weather-b.png"/>
   </pattern>
-  <pattern id="pattern_w" width="100%" height="100%">
+  <pattern id="pattern_w_weather" width="100%" height="100%">
     <image x="0" y="0" height="84%" href="/face-weather-w.png"/>
   </pattern>
+  <pattern id="pattern_b_calendar" width="100%" height="100%">
+    <image x="0" y="0" height="84%" href="/face-calendar-b.png"/>
+  </pattern>
+  <pattern id="pattern_w_calendar" width="100%" height="100%">
+    <image x="0" y="0" height="84%" href="/face-calendar-w.png"/>
+  </pattern>
 </defs>
 
 <g id="border" fill="#262626" stroke="none">
  <path d="M442 5110 c-227 -86 -417 -161 -422 -166 -4 -5 -12 -1063 -16 -2350 -7 -2292 -6 -2342 12 -2352 31 -16 817 -242 844 -242 14 0 1086 158 2383 352 l2358 353 6 25 c9 35 -66 3683 -76 3693 -4 4 -1049 194 -2322 422 -1273 228 -2323 416 -2334 419 -11 2 -206 -67 -433 -154z"/>
 </g>
-<g fill="#f3f3f3" stroke="none">
+<g id="draft" fill="#f3f3f3" stroke="none">
  <path id="front" d="M860 2630 l0 -2611 33 6 c17 3 1080 163 2360 355 1281 191 2330 350 2332 352 6 6 -70 3666 -76 3672 -4 4 -4627 836 -4645 836 -2 0 -4 -1175 -4 -2610z m2378 1721 c1217 -175 2214 -320 2216 -322 7 -6 69 -3179 63 -3185 -8 -9 -4489 -624 -4499 -618 -10 6 -11 4444 0 4444 4 0 1003 -144 2220 -319z m2249 2 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z m60 -2890 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z"/>
  <path id="image" d="M1022 4642 c-7 -19 5 -4393 13 -4400 5 -5 4465 605 4472 611 4 4 -59 3161 -63 3166 -3 3 -3200 465 -4387 634 -19 2 -31 -1 -35 -11z"/>
  <path id="case" d="M438 5081 c-214 -81 -390 -150 -393 -153 -7 -6 -28 -4658 -22 -4664 2 -2 182 -56 400 -119 218 -64 403 -118 412 -121 13 -6 15 259 15 2600 0 2078 -3 2606 -12 2605 -7 0 -187 -67 -400 -148z"/>

app/src/components/DeviceSimulator.vue

@@ -0,0 +1,100 @@
+<template>
+  <svg-case
+    id="device"
+    :class="cssClass"
+  />
+</template>
+
+<script>
+  const SvgCase = () => import('@/assets/case_editor.svg?inline')
+
+  export default {
+    name: 'DeviceSimulator',
+    components: { SvgCase },
+    props: {
+      theme: {
+        type: String,
+        default: 'black',
+        validator (value) {
+          return ['black', 'white'].includes(value)
+        },
+      },
+      face: {
+        type: String,
+        default: 'calendar',
+        validator (value) {
+          return ['weather', 'calendar'].includes(value)
+        },
+      },
+      front: {
+        type: String,
+        default: 'black',
+        validator (value) {
+          return ['black', 'white', 'orange'].includes(value)
+        },
+      },
+      frame: {
+        type: String,
+        default: 'black',
+        validator (value) {
+          return ['black', 'white', 'orange'].includes(value)
+        },
+      },
+    },
+    // data: () => ({}),
+    computed: {
+      cssClass () {
+        return [
+          'theme_' + this.theme,
+          'face_' + this.face,
+          'front_' + this.front,
+          'frame_' + this.frame,
+        ]
+      },
+    },
+  }
+</script>
+
+<style scoped>
+#device * {
+  transition: all 0.2s ease-out;
+}
+#device #border {
+  fill: #343434;
+}
+
+#device.theme_white.face_weather #image {
+  fill: url(#pattern_w_weather);
+}
+#device.theme_black.face_weather #image {
+  fill: url(#pattern_b_weather);
+}
+#device.theme_white.face_calendar #image {
+  fill: url(#pattern_w_calendar);
+}
+#device.theme_black.face_calendar #image {
+  fill: url(#pattern_b_calendar);
+}
+
+/* front color */
+#device.front_black #front {
+  fill: #000;
+}
+#device.front_white #front {
+  fill: #f3f3f3;
+}
+#device.front_orange #front {
+  fill: #ee8816;
+}
+
+/* case color */
+#device.frame_black #case {
+  fill: #000;
+}
+#device.frame_white #case {
+  fill: #f3f3f3;
+}
+#device.frame_orange #case {
+  fill: #ee8816;
+}
+</style>

app/src/components/SetupPanel.vue

@@ -31,6 +31,7 @@
           >
             <v-icon
               class="my-icon ma-10"
+              color="primary"
             >
               <slot name="icon" />
             </v-icon>

app/src/store/index.js

@@ -22,7 +22,15 @@ const store = new Vuex.Store({
       state.notifications = payload
     },
     updateSettings (state, payload) {
-      state.settings = { ...state.settings, ...payload }
+      const commit = { ...state.settings }
+
+      Object.keys(payload).forEach(group => {
+        if (commit[group]) {
+          commit[group] = { ...commit[group], ...payload[group] }
+        }
+      })
+
+      state.settings = commit
     },
   },
   actions: {

app/src/views/Setup/Appearance.vue

@@ -3,24 +3,40 @@
     back
     @back="stepBack"
   >
-    <template #icon />
+    <template #icon>
+      $monochrome_photos
+    </template>
     <template #headline>
       Appearance
     </template>
 
-    <v-radio-group
-      v-model="form.theme"
-      row
+    <v-sheet
+      width="60%"
+      class="mx-auto"
     >
-      <v-radio
-        label="Light"
-        value="white"
-      />
-      <v-radio
-        label="Dark"
-        value="black"
+      <device-simulator
+        :theme="form.theme"
+        face="weather"
       />
-    </v-radio-group>
+    </v-sheet>
+
+    <v-divider class="mt-5" />
+
+    <div class="d-flex justify-center">
+      <v-radio-group
+        v-model="form.theme"
+        row
+      >
+        <v-radio
+          label="Light"
+          value="white"
+        />
+        <v-radio
+          label="Dark"
+          value="black"
+        />
+      </v-radio-group>
+    </div>
 
     <template #actions>
       <v-btn
@@ -38,9 +54,10 @@
 <script>
   import { mapState, mapMutations, mapActions } from 'vuex'
   import SetupPanel from '@/components/SetupPanel'
+  import DeviceSimulator from '@/components/DeviceSimulator'
 
   export default {
-    components: { SetupPanel },
+    components: { DeviceSimulator, SetupPanel },
     data: () => ({
       isProcessing: false,
       form: {
@@ -68,16 +85,12 @@
           },
         })
 
-        /*
         this.saveSettings().then(() => {
           this.nextStep()
         })
-        */
-
-        this.nextStep()
       },
       resetChanges () {
-        this.form.theme = this.settings.device.theme
+        this.form.theme = this.settings.device.theme || 'black'
       },
       nextStep () {
         this.$router.push('/setup/done')

app/src/views/Setup/Country.vue

@@ -89,7 +89,8 @@
 </template>
 
 <script>
-  import apiDevice from '@/api/device'
+  import { mapState, mapActions, mapMutations } from 'vuex'
+  //  import apiDevice from '@/api/device'
   import { countries } from 'countries-list'
   import timezones from 'countries-and-timezones'
 
@@ -97,24 +98,27 @@
     data: () => ({
       currentStep: 0,
 
-      isLoading: true,
-      isSaving: true,
-      settings: null,
-
       availableCountries: countries,
       availableTimeZones: [],
     }),
-    created () {
-      apiDevice.getSettings(settings => {
-        this.settings = settings
-
-        this.isLoading = false
-      })
+    computed: {
+      ...mapState([
+        'stats',
+        'settings',
+      ]),
     },
+
     methods: {
+      ...mapMutations(['updateSettings']),
+      ...mapActions(['saveSettings']),
+
       commitCountry (code, country) {
-        this.settings.system.country = code
-        this.settings.system.language = country.languages[0]
+        this.updateSettings({
+          system: {
+            country: code,
+            language: country.languages[0],
+          },
+        })
 
         // get also timezone
         const zone = timezones.getCountry(code)
@@ -127,21 +131,21 @@
       },
 
       commitTimezone (zone) {
-        this.settings.system.timezone = zone
-
         const timezone = timezones.getTimezone(zone)
-        this.settings.system.utc = timezone.utcOffset * 60
-        this.settings.system.dst = timezone.dstOffset * 60
+
+        this.updateSettings({
+          system: {
+            timezone: zone,
+            utc: timezone.utcOffset * 60,
+            dst: timezone.dstOffset * 60,
+          },
+        })
 
         this.commitStep()
       },
 
       commitStep () {
-        this.isSaving = true
-
-        apiDevice.putSettings({ system: this.settings.system }, () => {
-          this.isSaving = false
-
+        this.saveSettings().then(() => {
           this.$router.push('/setup/wifi')
         })
       },

app/src/views/Setup/Done.vue

@@ -1,11 +1,20 @@
 <template>
-  <setup-panel
-    back
-    @back="stepBack"
-  >
-    <template #headline>
-      Hello {{ settings.device.name }}
-    </template>
+  <setup-panel>
+    <v-card-title
+      class="display-2 font-weight-bold mb-12 px-0 justify-center text-center"
+    >
+      <span class="mr-5">Hello</span> <span class="text-decoration-underline">{{ settings.device.name }}</span>
+    </v-card-title>
+
+    <v-sheet
+      width="60%"
+      class="mx-auto"
+    >
+      <device-simulator
+        :theme="settings.device.theme"
+        face="weather"
+      />
+    </v-sheet>
 
     <template #actions>
       <v-btn
@@ -23,26 +32,19 @@
 <script>
   import { mapState } from 'vuex'
   import SetupPanel from '@/components/SetupPanel'
+  import DeviceSimulator from '@/components/DeviceSimulator'
 
   export default {
-    components: { SetupPanel },
-    data: () => ({
-    }),
+    components: { DeviceSimulator, SetupPanel },
     computed: {
       ...mapState([
         'settings',
       ]),
-    },
-    created () {
-
     },
     methods: {
       onStart () {
         this.$router.push('/')
       },
-      stepBack () {
-        this.$router.push('/setup/appearance')
-      },
     },
   }
 </script>

app/src/views/Setup/Name.vue

@@ -90,13 +90,11 @@
           },
         })
 
-        /*
         this.saveSettings().then(() => {
           this.nextStep()
         })
-        */
 
-        this.nextStep()
+        // this.nextStep()
       },
       resetChanges () {
         this.form.name = this.settings.device.name

app/src/views/Setup/Start.vue

@@ -1,98 +1,39 @@
 <template>
-  <v-container
-    class="_fill-height fluid_"
-  >
-    <v-row
-      no-gutters
-      justify="center"
+  <setup-panel>
+    <v-card-title
+      class="display-2 font-weight-bold mb-12 px-0 justify-center text-center"
     >
-      <v-col
-        lg="5"
-        md="6"
-        sm="8"
-      >
-        <v-card flat>
-          <v-card-title class="display-1 font-weight-bold mb-12 px-0 justify-center text-center">
-            Hello paperdash
-          </v-card-title>
-
-          <Case
-            v-if="0"
-            id="device_"
-            :class="[device.theme, device.case, device.front, 'case_orange', 'my-12']"
-          />
-
-          <v-responsive>
-            <svg
-              v-if="1"
-              id="device"
-              :class="[device.theme, device.case, device.front, 'case_orange front_orange', 'my-12 mx-auto']"
-              version="1.0"
-              xmlns="http://www.w3.org/2000/svg"
-              _width="561px"
-              _height="527px"
-              viewBox="0 0 5610 5270"
-              preserveAspectRatio="xMidYMid meet"
-              width="400"
-            >
+      Hello paperdash
+    </v-card-title>
 
-              <g
-                id="border"
-                fill="#262626"
-                stroke="none"
-              >
-                <path
-                  d="M442 5110 c-227 -86 -417 -161 -422 -166 -4 -5 -12 -1063 -16 -2350 -7 -2292 -6 -2342 12 -2352 31 -16 817 -242 844 -242 14 0 1086 158 2383 352 l2358 353 6 25 c9 35 -66 3683 -76 3693 -4 4 -1049 194 -2322 422 -1273 228 -2323 416 -2334 419 -11 2 -206 -67 -433 -154z"
-                />
-              </g>
-              <g
-                fill="#f3f3f3"
-                stroke="none"
-              >
-                <path
-                  id="front"
-                  d="M860 2630 l0 -2611 33 6 c17 3 1080 163 2360 355 1281 191 2330 350 2332 352 6 6 -70 3666 -76 3672 -4 4 -4627 836 -4645 836 -2 0 -4 -1175 -4 -2610z m2378 1721 c1217 -175 2214 -320 2216 -322 7 -6 69 -3179 63 -3185 -8 -9 -4489 -624 -4499 -618 -10 6 -11 4444 0 4444 4 0 1003 -144 2220 -319z m2249 2 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z m60 -2890 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z"
-                />
-                <path
-                  id="image"
-                  d="M1022 4642 c-7 -19 5 -4393 13 -4400 5 -5 4465 605 4472 611 4 4 -59 3161 -63 3166 -3 3 -3200 465 -4387 634 -19 2 -31 -1 -35 -11z"
-                />
-                <path
-                  id="case"
-                  d="M438 5081 c-214 -81 -390 -150 -393 -153 -7 -6 -28 -4658 -22 -4664 2 -2 182 -56 400 -119 218 -64 403 -118 412 -121 13 -6 15 259 15 2600 0 2078 -3 2606 -12 2605 -7 0 -187 -67 -400 -148z"
-                />
-              </g>
-            </svg>
-          </v-responsive>
-
-          <v-card-actions>
-            <v-btn
-              depressed
-              block
-              color="primary"
-              @click="commitStep()"
-            >
-              Continue
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+    <v-sheet
+      width="60%"
+      class="mx-auto"
+    >
+      <svg-case id="device" />
+    </v-sheet>
+
+    <template #actions>
+      <v-btn
+        depressed
+        block
+        color="primary"
+        @click="commitStep()"
+      >
+        Continue
+      </v-btn>
+    </template>
+  </setup-panel>
 </template>
 
 <script>
+  import SetupPanel from '@/components/SetupPanel'
+  const SvgCase = () => import('@/assets/case_editor.svg?inline')
+
   export default {
-    data: () => ({
-      device: {
-        theme: 'theme_w',
-        case: 'case_whitey',
-        front: 'front_whitey',
-      },
-    }),
+    components: { SetupPanel, SvgCase },
     methods: {
       commitStep () {
-        // TODO sav
         this.$router.push('/setup/country')
       },
     },
@@ -100,38 +41,7 @@
 </script>
 
 <style scoped>
-#device #border,
-#device > path {
-  fill: #343434;
-}
-
-/* TODO device theme */
-#device.theme_w #image {
-  fill: url(#pattern_w);
-}
-#device.theme_b #image {
-  fill: url(#pattern_b);
-}
-
-/* front color */
-#device.front_blacky #front {
-  fill: #000;
-}
-#device.front_whitey #front {
-  fill: #f3f3f3;
-}
-#device.front_orange #front {
-  fill: #ee8816;
-}
-
-/* case color */
-#device.case_blacky #case {
-  fill: #000;
-}
-#device.case_whitey #case {
-  fill: #f3f3f3;
-}
-#device.case_orange #case {
-  fill: #ee8816;
+#device #draft {
+  fill: #fff;
 }
 </style>

app/src/views/Setup/Wifi.vue

@@ -1,121 +1,101 @@
 <template>
-  <v-container
-    class="_fill-height"
-    fluid
+  <setup-panel
+    back
+    @back="stepBack"
   >
-    <div>
+    <template #icon>
+      $wifi
+    </template>
+    <template #headline>
+      Choose a
+      <br>Wi-Fi Network
+    </template>
+
+    <v-skeleton-loader
+      v-if="isLoading"
+      type="list-item-two-line,list-item-two-line,list-item-two-line"
+      class="mx-auto"
+    />
+
+    <v-list v-else>
+      <template v-for="(wifi, i) in wifiAvailable">
+        <div :key="i">
+          <v-divider v-if="i > 0" />
+
+          <v-list-item
+            class="px-1"
+            @click="onWifiSelect(wifi)"
+          >
+            <v-list-item-icon class="mr-2 ml-2">
+              <v-icon v-if="wifi.ssid === settings.system.wifi">
+                $check
+              </v-icon>
+
+              <v-progress-circular
+                v-if="wifi.ssid === connectingSSID"
+                :size="24"
+                :width="2"
+                color="grey "
+                indeterminate
+              />
+            </v-list-item-icon>
+
+            <v-list-item-content dark>
+              <v-list-item-title v-text="wifi.ssid" />
+              <v-list-item-subtitle v-text="wifi.bssid" />
+            </v-list-item-content>
+
+            <v-list-item-icon>
+              <v-icon
+                v-if="wifi.secure"
+                class="mx-2"
+              >
+                $lock
+              </v-icon>
+              <v-icon class="mx-2">
+                {{ wifi.rssi | wifiIcon(0) }}
+              </v-icon>
+              <v-icon class="ml-3">
+                $next
+              </v-icon>
+            </v-list-item-icon>
+          </v-list-item>
+        </div>
+      </template>
+
+      <v-divider />
+
       <v-btn
         text
         color="primary"
-        class="px-0"
-        @click="stepBack"
+        class="_px-0 my-2"
+        disabled
       >
-        <v-icon>$prev</v-icon>
-        Back
+        Choose Another Network
       </v-btn>
-    </div>
+    </v-list>
 
-    <v-row
-      no-gutters
-      justify="center"
+    <v-dialog
+      v-model="wifiPasswordModal"
+      max-width="450"
     >
-      <v-col
-        lg="5"
-        md="6"
-        sm="8"
-      >
-        <v-card flat>
-          <v-card-title class="display-1 font-weight-bold mb-12 px-0 justify-center text-center">
-            Choose a
-            <br>Wi-Fi Network
-          </v-card-title>
-
-          <v-skeleton-loader
-            v-if="isLoading"
-            type="list-item-two-line,list-item-two-line,list-item-two-line"
-            class="mx-auto"
-          />
-
-          <v-list v-else>
-            <template v-for="(wifi, i) in wifiAvailable">
-              <div :key="i">
-                <v-divider v-if="i > 0" />
-
-                <v-list-item
-                  class="px-1"
-                  @click="onWifiSelect(wifi)"
-                >
-                  <v-list-item-icon class="mr-2 ml-2">
-                    <v-icon v-if="wifi.ssid === settings.system.wifi">
-                      $check
-                    </v-icon>
-
-                    <v-progress-circular
-                      v-if="wifi.ssid === connectingSSID"
-                      :size="24"
-                      :width="2"
-                      color="grey "
-                      indeterminate
-                    />
-                  </v-list-item-icon>
-
-                  <v-list-item-content dark>
-                    <v-list-item-title v-text="wifi.ssid" />
-                    <v-list-item-subtitle v-text="wifi.bssid" />
-                  </v-list-item-content>
-
-                  <v-list-item-icon>
-                    <v-icon
-                      v-if="wifi.secure"
-                      class="mx-2"
-                    >
-                      $lock
-                    </v-icon>
-                    <v-icon class="mx-2">
-                      {{ wifi.rssi | wifiIcon(0) }}
-                    </v-icon>
-                    <v-icon class="ml-3">
-                      $next
-                    </v-icon>
-                  </v-list-item-icon>
-                </v-list-item>
-              </div>
-            </template>
-
-            <v-divider />
-
-            <v-btn
-              text
-              color="primary"
-              class="_px-0 my-2"
-              disabled
-            >
-              Choose Another Network
-            </v-btn>
-          </v-list>
-
-          <v-dialog
-            v-model="wifiPasswordModal"
-            max-width="450"
-          >
-            <setup-wifi-connect
-              :ssid="connectSSID"
-              :on-connect="onWifiConnect"
-              @cancel="wifiPasswordModal = false"
-            />
-          </v-dialog>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+      <setup-wifi-connect
+        :ssid="connectSSID"
+        :on-connect="onWifiConnect"
+        @cancel="wifiPasswordModal = false"
+      />
+    </v-dialog>
+  </setup-panel>
 </template>
 
 <script>
   import apiDevice from '@/api/device'
   import setupWifiConnect from '@/components/SetupWifiConnect'
+  import SetupPanel from '@/components/SetupPanel'
 
   export default {
     components: {
+      SetupPanel,
       setupWifiConnect,
     },
     data: () => ({
@@ -152,7 +132,13 @@
         this.connectingSSID = ssid
         this.wifiPasswordModal = false
 
-        apiDevice.wifiConnect(ssid, password, () => {})
+        apiDevice.wifiConnect(ssid, password, () => {
+          setTimeout(() => {
+            // phone should be back in regular wifi
+            // search for device via mDNS
+            window.location = 'http://paperdash-display.local'
+          }, 3000)
+        })
       },
       stepBack () {
         this.$router.push('/setup/country')

app/vue.config.js

@@ -44,6 +44,27 @@ module.exports = {
       },
     },
   },
+  chainWebpack: (config) => {
+    const svgRule = config.module.rule('svg')
+
+    svgRule.uses.clear()
+
+    svgRule
+      .use('babel-loader')
+      .loader('babel-loader')
+      .end()
+      .use('vue-svg-loader')
+      .loader('vue-svg-loader')
+      .options({
+        svgo: {
+          plugins: [
+            { cleanupIDs: false },
+            { collapseGroups: false },
+            { removeEmptyContainers: false },
+          ],
+        },
+      })
+  },
   configureWebpack: config => {
     if (process.env.NODE_ENV === 'production') {
       // optimize build for esp32