add skeleton for the tab bar.
This commit is contained in:
1
src/prog/dashboard2/icons/alarm.svg
Normal file
1
src/prog/dashboard2/icons/alarm.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 574 B |
1
src/prog/dashboard2/icons/home.svg
Normal file
1
src/prog/dashboard2/icons/home.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 338 B |
1
src/prog/dashboard2/icons/lightbulb-on-outline.svg
Normal file
1
src/prog/dashboard2/icons/lightbulb-on-outline.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 728 B |
1
src/prog/dashboard2/icons/settings.svg
Normal file
1
src/prog/dashboard2/icons/settings.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
45
src/prog/dashboard2/icons/shutters.svg
Normal file
45
src/prog/dashboard2/icons/shutters.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
73
src/prog/dashboard2/icons/sprinklers.svg
Normal file
73
src/prog/dashboard2/icons/sprinklers.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 3.7 KiB |
@@ -1,19 +1,160 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app" style="height:100%;">
|
||||||
<router-view></router-view>
|
<!-- 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>
|
</div>
|
||||||
</template>
|
</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>
|
<script>
|
||||||
|
import { Loading, Tabbar, TabbarItem, ViewBox, XHeader } from 'vux'
|
||||||
|
import { mapState, mapActions } from 'vuex'
|
||||||
|
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import '~vux/src/styles/reset.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 {
|
body {
|
||||||
background-color: #fbf9fe;
|
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>
|
</style>
|
||||||
|
|||||||
62
src/prog/dashboard2/src/assets/css/domo.css
Normal file
62
src/prog/dashboard2/src/assets/css/domo.css
Normal file
@@ -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'; } /* '' */
|
||||||
Binary file not shown.
BIN
src/prog/dashboard2/src/assets/font/domo.woff
Normal file
BIN
src/prog/dashboard2/src/assets/font/domo.woff
Normal file
Binary file not shown.
BIN
src/prog/dashboard2/src/assets/font/domo.woff2
Normal file
BIN
src/prog/dashboard2/src/assets/font/domo.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
7
src/prog/dashboard2/src/components/Home.vue
Normal file
7
src/prog/dashboard2/src/components/Home.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<h1> Home </h1>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
7
src/prog/dashboard2/src/components/Lights.vue
Normal file
7
src/prog/dashboard2/src/components/Lights.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<h1> Lights </h1>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
7
src/prog/dashboard2/src/components/Settings.vue
Normal file
7
src/prog/dashboard2/src/components/Settings.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<h1> Settings </h1>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
7
src/prog/dashboard2/src/components/Shutters.vue
Normal file
7
src/prog/dashboard2/src/components/Shutters.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<h1> Shutters </h1>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
7
src/prog/dashboard2/src/components/Sprinklers.vue
Normal file
7
src/prog/dashboard2/src/components/Sprinklers.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<h1> Sprinklers </h1>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
7
src/prog/dashboard2/src/components/Timers.vue
Normal file
7
src/prog/dashboard2/src/components/Timers.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<h1> Timers </h1>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@@ -1,17 +1,78 @@
|
|||||||
// The Vue build version to load with the `import` command
|
// The Vue build version to load with the `import` command
|
||||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import FastClick from 'fastclick'
|
import Vuex from 'vuex'
|
||||||
import VueRouter from 'vue-router'
|
import VueRouter from 'vue-router'
|
||||||
|
import FastClick from 'fastclick'
|
||||||
import App from './App'
|
import App from './App'
|
||||||
import Home from './components/HelloFromVux'
|
|
||||||
|
import { sync } from 'vuex-router-sync'
|
||||||
|
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
const routes = [{
|
import vuexI18n from 'vuex-i18n'
|
||||||
path: '/',
|
|
||||||
component: Home
|
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({
|
const router = new VueRouter({
|
||||||
routes
|
routes
|
||||||
@@ -19,10 +80,56 @@ const router = new VueRouter({
|
|||||||
|
|
||||||
FastClick.attach(document.body)
|
FastClick.attach(document.body)
|
||||||
|
|
||||||
|
// enable the vue devtools
|
||||||
|
Vue.config.devtools = true
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
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 */
|
/* eslint-disable no-new */
|
||||||
new Vue({
|
new Vue({
|
||||||
|
store,
|
||||||
router,
|
router,
|
||||||
render: h => h(App)
|
render: h => h(App)
|
||||||
}).$mount('#app-box')
|
}).$mount('#app-box')
|
||||||
|
|||||||
@@ -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
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
BIN
src/prog/dashboard2/static/android-desktop.png
Normal file
BIN
src/prog/dashboard2/static/android-desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
src/prog/dashboard2/static/favicon.png
Normal file
BIN
src/prog/dashboard2/static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1017 B |
BIN
src/prog/dashboard2/static/ios-desktop.png
Normal file
BIN
src/prog/dashboard2/static/ios-desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Reference in New Issue
Block a user