add skeleton for the tab bar.

2017-08-03 16:39:18 +02:00
parent e0bf264fbf
commit c60a401280
28 changed files with 485 additions and 120 deletions
--- a/src/prog/dashboard2/icons/alarm.svg
+++ b/src/prog/dashboard2/icons/alarm.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M12.5,8H11V14L15.75,16.85L16.5,15.62L12.5,13.25V8M7.88,3.39L6.6,1.86L2,5.71L3.29,7.24L7.88,3.39M22,5.72L17.4,1.86L16.11,3.39L20.71,7.25L22,5.72Z" /></svg>
--- a/src/prog/dashboard2/icons/home.svg
+++ b/src/prog/dashboard2/icons/home.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>
--- a/src/prog/dashboard2/icons/lightbulb-on-outline.svg
+++ b/src/prog/dashboard2/icons/lightbulb-on-outline.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z" /></svg>
--- a/src/prog/dashboard2/icons/settings.svg
+++ b/src/prog/dashboard2/icons/settings.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>
--- a/src/prog/dashboard2/icons/shutters.svg
+++ b/src/prog/dashboard2/icons/shutters.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="150.000000pt" height="161.000000pt" viewBox="0 0 150.000000 161.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,161.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M210 1592 c0 -6 746 -256 925 -309 73 -22 105 -61 105 -130 0 -99
+-73 -167 -152 -144 -96 29 -103 176 -10 212 26 10 69 -4 88 -29 40 -52 -13
+-141 -70 -119 -39 15 -36 87 4 87 23 0 27 -25 5 -34 -26 -9 -16 -27 13 -24 22
+2 28 9 30 34 7 70 -71 85 -102 19 -49 -102 89 -173 147 -76 9 16 17 49 17 74
+0 39 -5 49 -35 76 -60 52 -137 35 -175 -39 -35 -69 -23 -136 34 -189 19 -18
+41 -26 81 -29 54 -4 56 -4 99 39 84 85 84 217 -1 277 -16 10 -226 85 -468 166
+-319 106 -453 146 -488 146 -26 0 -47 -3 -47 -8z"/>
+<path d="M133 1568 c-13 -6 -23 -14 -23 -18 0 -4 199 -75 441 -159 420 -144
+443 -151 465 -136 28 18 30 30 8 39 -109 42 -836 286 -850 285 -10 0 -29 -5
+-41 -11z"/>
+<path d="M51 1504 c-12 -15 -21 -30 -21 -33 0 -7 910 -345 914 -339 19 32 33
+78 26 83 -15 9 -879 315 -889 315 -5 0 -19 -12 -30 -26z"/>
+<path d="M1013 1469 c-18 -5 -33 -14 -33 -18 0 -5 28 -19 63 -30 60 -20 66
+-21 102 -5 93 39 181 -10 212 -116 34 -118 15 -240 -52 -331 -30 -42 -39 -48
+-82 -52 -59 -7 -183 -40 -183 -49 0 -4 30 -22 67 -40 64 -31 73 -33 173 -32
+58 0 118 6 135 13 l30 13 -24 19 c-21 17 -23 23 -13 37 29 40 64 126 78 194
+32 150 -13 254 -146 340 -90 58 -236 83 -327 57z"/>
+<path d="M29 1393 c-8 -85 -59 -62 809 -372 l112 -40 0 59 0 59 -57 21 c-131
+49 -851 310 -856 310 -3 0 -6 -17 -8 -37z"/>
+<path d="M30 1221 c0 -38 4 -61 13 -64 6 -2 208 -80 447 -172 239 -92 441
+-170 448 -172 10 -4 12 11 10 67 l-3 73 -200 74 c-374 136 -700 253 -707 253
+-5 0 -8 -27 -8 -59z"/>
+<path d="M30 1072 l0 -61 455 -180 c250 -100 457 -181 460 -181 3 0 5 30 3 66
+l-3 67 -435 168 c-239 93 -445 172 -457 175 -22 6 -23 4 -23 -54z"/>
+<path d="M32 929 l3 -61 455 -188 455 -189 3 56 c2 31 -1 59 -5 64 -6 6 -769
+322 -891 370 -23 9 -23 8 -20 -52z"/>
+<path d="M29 836 c-2 -2 -2 -27 -1 -54 l4 -51 446 -191 c246 -106 453 -194
+460 -197 10 -4 12 9 10 58 l-3 64 -450 187 c-468 194 -459 191 -466 184z"/>
+<path d="M32 639 l3 -50 452 -200 c249 -109 455 -199 458 -199 3 0 5 26 3 57
+l-3 57 -454 193 c-250 106 -456 193 -458 193 -2 0 -3 -23 -1 -51z"/>
+<path d="M32 495 l3 -57 453 -209 c250 -115 456 -209 458 -209 2 0 4 31 4 68
+l0 68 -443 192 c-243 105 -450 194 -460 198 -16 6 -18 1 -15 -51z"/>
+</g>
+</svg>
--- a/src/prog/dashboard2/icons/sprinklers.svg
+++ b/src/prog/dashboard2/icons/sprinklers.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M301 1636 c-7 -8 -11 -27 -9 -43 2 -22 9 -29 31 -31 50 -6 75 38 41
+72 -19 20 -48 20 -63 2z"/>
+<path d="M916 1640 c-118 -21 -176 -78 -176 -172 l0 -48 80 0 81 0 -3 -77 c-3
+-77 -3 -78 -30 -81 l-28 -3 0 -380 0 -379 -35 0 -35 0 0 -105 0 -105 250 0
+250 0 0 105 0 105 -35 0 -35 0 0 380 0 380 -25 0 c-25 0 -25 1 -25 80 l0 80
+76 0 76 0 -4 65 c-5 78 -26 105 -105 135 -63 23 -203 34 -277 20z"/>
+<path d="M1676 1634 c-33 -32 -13 -74 36 -74 38 0 55 33 33 66 -18 28 -46 31
+-69 8z"/>
+<path d="M442 1538 c-15 -15 -15 -51 0 -66 28 -28 78 -7 78 33 0 27 -18 45
+-45 45 -12 0 -26 -5 -33 -12z"/>
+<path d="M1536 1534 c-23 -23 -20 -51 8 -69 34 -23 66 -5 66 35 0 44 -44 64
+-74 34z"/>
+<path d="M308 1459 c-22 -12 -24 -62 -3 -79 23 -19 64 -4 71 27 5 20 2 31 -16
+45 -25 21 -29 21 -52 7z"/>
+<path d="M570 1452 c-45 -36 -1 -99 50 -72 27 14 27 65 1 80 -25 13 -25 13
+-51 -8z"/>
+<path d="M1412 1438 c-7 -7 -12 -21 -12 -33 0 -12 5 -26 12 -33 7 -7 21 -12
+33 -12 12 0 26 5 33 12 7 7 12 21 12 33 0 12 -5 26 -12 33 -7 7 -21 12 -33 12
+-12 0 -26 -5 -33 -12z"/>
+<path d="M1670 1431 c-14 -27 -13 -37 6 -55 23 -23 51 -20 69 8 13 19 14 29 5
+45 -14 28 -65 29 -80 2z"/>
+<path d="M452 1354 c-49 -34 -6 -103 47 -74 28 14 25 57 -4 76 -18 12 -24 11
+-43 -2z"/>
+<path d="M688 1358 c-25 -21 -28 -45 -9 -69 24 -30 68 -20 77 18 5 20 2 31
+-16 45 -26 21 -31 22 -52 6z"/>
+<path d="M1541 1344 c-30 -21 -27 -61 5 -76 36 -17 59 0 59 42 0 40 -31 57
+-64 34z"/>
+<path d="M1288 1325 c-9 -21 -8 -28 7 -45 10 -11 26 -20 35 -20 9 0 25 9 35
+20 27 30 7 70 -35 70 -23 0 -33 -6 -42 -25z"/>
+<path d="M308 1259 c-28 -16 -23 -67 7 -81 21 -9 28 -8 45 7 25 23 26 47 2 68
+-21 19 -30 20 -54 6z"/>
+<path d="M565 1250 c-36 -40 7 -96 55 -70 27 14 27 65 1 80 -27 14 -35 13 -56
+-10z"/>
+<path d="M1412 1238 c-7 -7 -12 -21 -12 -33 0 -12 5 -26 12 -33 7 -7 21 -12
+33 -12 12 0 26 5 33 12 7 7 12 21 12 33 0 12 -5 26 -12 33 -7 7 -21 12 -33 12
+-12 0 -26 -5 -33 -12z"/>
+<path d="M1672 1238 c-27 -27 -1 -78 38 -78 29 0 54 43 40 69 -12 24 -58 29
+-78 9z"/>
+<path d="M442 1158 c-28 -28 -7 -78 33 -78 40 0 61 50 33 78 -7 7 -21 12 -33
+12 -12 0 -26 -5 -33 -12z"/>
+<path d="M1539 1151 c-29 -23 -20 -68 16 -77 34 -9 57 12 53 49 -4 39 -38 53
+-69 28z"/>
+<path d="M302 1058 c-30 -30 -3 -83 39 -76 32 5 45 31 31 62 -13 28 -49 35
+-70 14z"/>
+<path d="M1676 1054 c-30 -30 -10 -74 34 -74 40 0 58 32 35 66 -18 28 -46 31
+-69 8z"/>
+<path d="M1310 863 c25 -83 48 -256 56 -425 l7 -148 119 0 118 0 0 30 c0 88
+69 340 122 443 19 38 19 38 -1 28 -42 -23 -124 -129 -164 -213 -23 -48 -44
+-87 -47 -88 -3 0 -13 33 -22 73 -23 95 -75 198 -144 286 -30 39 -57 71 -59 71
+-1 0 5 -26 15 -57z"/>
+<path d="M514 773 c-52 -78 -101 -202 -115 -291 l-12 -74 -40 76 c-22 42 -57
+95 -78 119 l-38 42 25 -73 c14 -40 33 -120 42 -178 l16 -104 128 0 127 0 6 38
+c15 90 39 192 61 256 17 50 20 65 9 56 -25 -21 -84 -106 -116 -167 l-31 -58 6
+85 c2 47 16 139 31 204 14 65 24 121 21 123 -2 2 -21 -22 -42 -54z"/>
+<path d="M1831 563 c-50 -56 -124 -189 -137 -245 l-6 -28 69 0 70 0 6 83 c3
+45 17 118 31 162 14 43 24 81 22 83 -2 1 -27 -23 -55 -55z"/>
+<path d="M136 433 c13 -37 24 -85 24 -105 l0 -38 46 0 c42 0 45 1 39 23 -11
+37 -68 126 -101 158 l-31 30 23 -68z"/>
+<path d="M683 473 c-28 -31 -58 -86 -79 -145 l-13 -38 44 0 45 0 0 44 c0 24 9
+72 19 105 10 34 17 61 14 61 -2 0 -15 -12 -30 -27z"/>
+</g>
+</svg>
--- a/src/prog/dashboard2/src/App.vue
+++ b/src/prog/dashboard2/src/App.vue
@@ -1,19 +1,160 @@
 <template>
-  <div id="app">
-    <router-view></router-view>
+  <div id="app" style="height:100%;">
+    <!-- main content -->
+    <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px">
+      <x-header slot="header"
+                style="width:100%;position:absolute;left:0;top:0;z-index:100;"
+                :left-options="leftOptions"
+                :title="title">
+      </x-header>
+      <router-view transition transition-mode="out-in">
+      </router-view>
+      <tabbar class="vux-demo-tabbar" icon-class="vux-center" slot="bottom">
+        <tabbar-item is-link :link="{path:'/'}" >
+          <i slot="icon" class="icon-home" aria-hidden="true"></i>
+          <span slot="label">Home</span>
+        </tabbar-item>
+        <tabbar-item is-link :link="{path:'/lights'}" >
+          <i slot="icon" class="icon-lightbulb" aria-hidden="true"></i>
+          <span slot="label">Lights</span>
+        </tabbar-item>
+        <tabbar-item is-link :link="{path:'/sprinklers'}" >
+      	  <i slot="icon" class="icon-sprinklers" aria-hidden="true"></i>
+          <span slot="label">Sprinklers</span>
+        </tabbar-item>
+        <tabbar-item is-link :link="{path:'/shutters'}" >
+      	  <i slot="icon" class="icon-shutters" aria-hidden="true"></i>
+          <span slot="label">Rolling Shutter</span>
+        </tabbar-item>
+        <tabbar-item is-link :link="{path:'/timers'}" >
+      	  <i slot="icon" class="icon-alarm" aria-hidden="true"></i>
+          <span slot="label">Timers</span>
+        </tabbar-item>
+        <tabbar-item is-link :link="{path:'/settings'}" >
+          <i slot="icon" class="icon-settings" aria-hidden="true"></i>
+          <span slot="label">Settings</span>
+        </tabbar-item>
+      </tabbar>
+    </view-box>
   </div>
 </template>

+ 
+.icon-alarm:before { content: '\e800'; } /* '' */
+.icon-home:before { content: '\e801'; } /* '' */
+.icon-lightbulb-on-outline:before { content: '\e802'; } /* '' */
+.icon-settings:before { content: '\e803'; } /* '' */
+.icon-shutters:before { content: '\e804'; } /* '' */
+.icon-sprinklers:before { content: '\e805'; } /* '' */
+.icon-lightbulb:before { content: '\f0eb'; } /* '' */
+
+
 <script>
+import { Loading, Tabbar, TabbarItem, ViewBox, XHeader } from 'vux'
+import { mapState, mapActions } from 'vuex'
+
 export default {
-  name: 'app'
+  name: 'app',
+  components: {
+    Loading,
+    Tabbar,
+    TabbarItem,
+    ViewBox,
+    XHeader
+  },
+  methods: {
+    ...mapActions([
+      'updateDemoPosition'
+    ])
+  },
+  computed: {
+    ...mapState({
+      route: state => state.route,
+      path: state => state.route.path,
+      deviceready: state => state.app.deviceready,
+      demoTop: state => state.vux.demoScrollTop,
+      isLoading: state => state.vux.isLoading,
+      direction: state => state.vux.direction
+    }),
+    leftOptions () {
+      if ((this.route.path === '/') || (this.route.path === '/speaker') || (this.route.path === '/playback') ||
+          (this.route.path === '/settings')) {
+        return { showBack: false }
+      } else {
+        return { showBack: true, backText: 'Back' }
+      }
+    },
+    headerTransition () {
+      return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left'
+    },
+    componentName () {
+      if (this.route.path) {
+        const parts = this.route.path.split('/')
+        const theSize = parts.length
+        if (/settings/.test(this.route.path) && parts[theSize - 1]) {
+          return parts[theSize - 1].charAt(0).toUpperCase() + parts[theSize - 1].slice(1)
+        }
+      }
+    },
+    title () {
+      console.log(this.componentName)
+      if (this.route.path === '/') return 'Home'
+      if (this.route.path === '/speaker') return 'Speaker'
+      if (this.route.path === '/playback') return 'Playback'
+      if (this.route.path === '/settings') return 'Settings'
+      return this.componentName ? `${this.componentName}` : 'Stream'
+    }
+  }
 }
 </script>

 <style lang="less">
@import '~vux/src/styles/reset.less';
-
+@import '~vux/src/styles/1px.less';
+@import '~vux/src/styles/tap.less';
+@import 'assets/css/domo.css';
 body {
  background-color: #fbf9fe;
 }
+html, body {
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.router-view {
+  width: 100%;
+  top: 46px;
+}
+.vux-pop-out-enter-active,
+.vux-pop-out-leave-active,
+.vux-pop-in-enter-active,
+.vux-pop-in-leave-active {
+  will-change: transform;
+  transition: all 500ms;
+  height: 100%;
+  top: 46px;
+  position: absolute;
+  backface-visibility: hidden;
+  perspective: 1000;
+}
+.vux-pop-out-enter {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+.vux-pop-out-leave-active {
+  opacity: 0;
+  transform: translate3d(100%, 0, 0);
+}
+.vux-pop-in-enter {
+  opacity: 0;
+  transform: translate3d(100%, 0, 0);
+}
+.vux-pop-in-leave-active {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+.menu-title {
+  color: #888;
+}
 </style>
--- a/src/prog/dashboard2/src/assets/css/domo.css
+++ b/src/prog/dashboard2/src/assets/css/domo.css
@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'domo';
+  src: url('../font/domo.woff2') format('woff2'),
+       url('../font/domo.woff') format('woff'),
+       url('../font/domo.ttf') format('truetype');
+
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'domo';
+    src: url('../font/domo.svg?150644#domo') format('svg');
+  }
+}
+*/
+ 
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "domo";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+ 
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+ 
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+ 
+.icon-alarm:before { content: '\e800'; } /* '' */
+.icon-home:before { content: '\e801'; } /* '' */
+.icon-lightbulb-on-outline:before { content: '\e802'; } /* '' */
+.icon-settings:before { content: '\e803'; } /* '' */
+.icon-shutters:before { content: '\e804'; } /* '' */
+.icon-sprinklers:before { content: '\e805'; } /* '' */
+.icon-lightbulb:before { content: '\f0eb'; } /* '' */
--- a/src/prog/dashboard2/src/assets/fonts/domo.ttf
+++ b/src/prog/dashboard2/src/assets/fonts/domo.ttf
--- a/src/prog/dashboard2/src/assets/font/domo.woff
+++ b/src/prog/dashboard2/src/assets/font/domo.woff
--- a/src/prog/dashboard2/src/assets/font/domo.woff2
+++ b/src/prog/dashboard2/src/assets/font/domo.woff2
--- a/src/prog/dashboard2/src/assets/fonts/domo.woff
+++ b/src/prog/dashboard2/src/assets/fonts/domo.woff
--- a/src/prog/dashboard2/src/assets/fonts/domo.woff2
+++ b/src/prog/dashboard2/src/assets/fonts/domo.woff2
--- a/src/prog/dashboard2/src/assets/logo.png
+++ b/src/prog/dashboard2/src/assets/logo.png
--- a/src/prog/dashboard2/src/assets/vux_logo.png
+++ b/src/prog/dashboard2/src/assets/vux_logo.png
--- a/src/prog/dashboard2/src/components/Hello.vue
+++ b/src/prog/dashboard2/src/components/Hello.vue
@@ -1,53 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-      <br>
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'hello',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-a {
-  color: #42b983;
-}
-</style>
--- a/src/prog/dashboard2/src/components/HelloFromVux.vue
+++ b/src/prog/dashboard2/src/components/HelloFromVux.vue
@@ -1,41 +0,0 @@
-<template>
-  <div>
-    <div class="vux-demo">
-      <img class="logo" src="../assets/vux_logo.png">
-      <h1> </h1>
-    </div>
-    <group title="cell demo">
-      <cell title="VUX" value="cool" is-link></cell>
-    </group>
-  </div>
-</template>
-
-<script>
-import { Group, Cell } from 'vux'
-
-export default {
-  components: {
-    Group,
-    Cell
-  },
-  data () {
-    return {
-      // note: changing this line won't causes changes
-      // with hot-reload because the reloaded component
-      // preserves its current state and we are modifying
-      // its initial state.
-      msg: 'Hello World!'
-    }
-  }
-}
-</script>
-
-<style>
-.vux-demo {
-  text-align: center;
-}
-.logo {
-  width: 100px;
-  height: 100px
-}
-</style>
--- a/src/prog/dashboard2/src/components/Home.vue
+++ b/src/prog/dashboard2/src/components/Home.vue
@@ -0,0 +1,7 @@
+<template>
+	<h1> Home </h1>
+</template>
+<script>
+</script>
+<style>
+</style>
--- a/src/prog/dashboard2/src/components/Lights.vue
+++ b/src/prog/dashboard2/src/components/Lights.vue
@@ -0,0 +1,7 @@
+<template>
+	<h1> Lights </h1>
+</template>
+<script>
+</script>
+<style>
+</style>
--- a/src/prog/dashboard2/src/components/Settings.vue
+++ b/src/prog/dashboard2/src/components/Settings.vue
@@ -0,0 +1,7 @@
+<template>
+	<h1> Settings </h1>
+</template>
+<script>
+</script>
+<style>
+</style>
--- a/src/prog/dashboard2/src/components/Shutters.vue
+++ b/src/prog/dashboard2/src/components/Shutters.vue
@@ -0,0 +1,7 @@
+<template>
+	<h1> Shutters </h1>
+</template>
+<script>
+</script>
+<style>
+</style>
--- a/src/prog/dashboard2/src/components/Sprinklers.vue
+++ b/src/prog/dashboard2/src/components/Sprinklers.vue
@@ -0,0 +1,7 @@
+<template>
+	<h1> Sprinklers </h1>
+</template>
+<script>
+</script>
+<style>
+</style>
--- a/src/prog/dashboard2/src/components/Timers.vue
+++ b/src/prog/dashboard2/src/components/Timers.vue
@@ -0,0 +1,7 @@
+<template>
+	<h1> Timers </h1>
+</template>
+<script>
+</script>
+<style>
+</style>
--- a/src/prog/dashboard2/src/main.js
+++ b/src/prog/dashboard2/src/main.js
@@ -1,17 +1,78 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import FastClick from 'fastclick'
+import Vuex from 'vuex'
 import VueRouter from 'vue-router'
+import FastClick from 'fastclick'
 import App from './App'
-import Home from './components/HelloFromVux'
+
+import { sync } from 'vuex-router-sync'

 Vue.use(VueRouter)
+Vue.use(Vuex)

-const routes = [{
-  path: '/',
-  component: Home
-}]
+import vuexI18n from 'vuex-i18n'
+
+const Home = () => import('./components/Home.vue')
+const Lights = () => import('./components/Lights.vue')
+const Sprinklers = () => import('./components/Sprinklers.vue')
+const Shutters = () => import('./components/Shutters.vue')
+const Timers = () => import('./components/Timers.vue')
+
+const Settings = () => import('./components/Settings.vue')
+
+const routes = [
+  // Root Level - Home Tab
+  { path: '/', component: Home },
+  // Root Level - Lights Tab
+  { path: '/lights', component: Lights },
+  // Root Level - Sprinkler Tab
+  { path: '/sprinklers', component: Sprinklers },
+  // Root Level - Shutter Tab
+  { path: '/shutters', component: Shutters },
+  // Root Level - Timers Tab
+  { path: '/timers', component: Timers },
+  // Root Level - Settings Tab
+  { path: '/settings/', component: Settings }
+]
+
+let store = new Vuex.Store({
+  modules: {
+    i18n: vuexI18n.store
+  }
+})
+
+store.registerModule('vux', {
+  state: {
+    demoScrollTop: 0,
+    isLoading: false,
+    direction: 'forward'
+  },
+  mutations: {
+    updateDemoPosition (state, payload) {
+      state.demoScrollTop = payload.top
+    },
+    updateLoadingStatus (state, payload) {
+      state.isLoading = payload.isLoading
+    },
+    updateDirection (state, payload) {
+      state.direction = payload.direction
+    }
+  },
+  actions: {
+    updateDemoPosition ({commit}, top) {
+      commit({type: 'updateDemoPosition', top: top})
+    }
+  }
+})
+
+Vue.use(vuexI18n.plugin, store)
+
+// plugins
+import { LocalePlugin, LoadingPlugin } from 'vux'
+
+Vue.use(LocalePlugin)
+Vue.use(LoadingPlugin)

 const router = new VueRouter({
  routes
@@ -19,10 +80,56 @@ const router = new VueRouter({

 FastClick.attach(document.body)

+// enable the vue devtools
+Vue.config.devtools = true
+
 Vue.config.productionTip = false

+Vue.i18n.set('en')
+Vue.i18n.fallback('en')
+sync(store, router)
+
+// simple history management
+const history = window.sessionStorage
+history.clear()
+let historyCount = history.getItem('count') * 1 || 0
+history.setItem('/', 0)
+
+router.beforeEach(function (to, from, next) {
+  store.commit('updateLoadingStatus', {isLoading: true})
+  // console.log(to)
+  // console.log(from)
+  const toIndex = history.getItem(to.path)
+  const fromIndex = history.getItem(from.path)
+
+  if (toIndex) {
+    if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
+      store.commit('updateDirection', {direction: 'forward'})
+    } else {
+      store.commit('updateDirection', {direction: 'reverse'})
+    }
+  } else {
+    ++historyCount
+    history.setItem('count', historyCount)
+    to.path !== '/' && history.setItem(to.path, historyCount)
+    store.commit('updateDirection', {direction: 'forward'})
+  }
+
+  if (/\/http/.test(to.path)) {
+    let url = to.path.split('http')[1]
+    window.location.href = `http${url}`
+  } else {
+    next()
+  }
+})
+
+router.afterEach(function (to) {
+  store.commit('updateLoadingStatus', {isLoading: false})
+})
+
 /* eslint-disable no-new */
 new Vue({
+  store,
  router,
  render: h => h(App)
 }).$mount('#app-box')
--- a/src/prog/dashboard2/src/router/index.js
+++ b/src/prog/dashboard2/src/router/index.js
@@ -1,15 +0,0 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Hello from '@/components/Hello'
-
-Vue.use(Router)
-
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'Hello',
-      component: Hello
-    }
-  ]
-})
--- a/src/prog/dashboard2/static/android-desktop.png
+++ b/src/prog/dashboard2/static/android-desktop.png
--- a/src/prog/dashboard2/static/favicon.png
+++ b/src/prog/dashboard2/static/favicon.png
--- a/src/prog/dashboard2/static/ios-desktop.png
+++ b/src/prog/dashboard2/static/ios-desktop.png
				`@@ -0,0 +1 @@`
				<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M12.5,8H11V14L15.75,16.85L16.5,15.62L12.5,13.25V8M7.88,3.39L6.6,1.86L2,5.71L3.29,7.24L7.88,3.39M22,5.72L17.4,1.86L16.11,3.39L20.71,7.25L22,5.72Z" /></svg>
				`@@ -0,0 +1 @@`
				`<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>`