Skip to content

Commit c08fbb4

Browse files
aekscoaeksco
committed
Device UI & state improvements
1 parent ba1ae49 commit c08fbb4

File tree

10 files changed

+12830
-86
lines changed

10 files changed

+12830
-86
lines changed

‎package-lock.json

+12,506
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue

+19-11
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
11

22
<template>
3-
<!-- <div id="app">
4-
<AppNavbar/>
5-
<Notification/>
6-
</div> -->
3+
<!-- <div id="app"> -->
4+
<!-- <AppNavbar/> -->
5+
<!-- <Notification/> -->
6+
<!-- </div> -->
77

88
<v-ons-splitter>
9+
10+
<!-- Side Menu -->
911
<v-ons-splitter-side swipeable width="150px" collapse="" side="left" :open.sync="openSide">
1012
<v-ons-page>
1113
<v-ons-list>
12-
<v-ons-list-item v-for="page in pages" tappable modifier="chevron" @click="currentPage = page; openSide = false">
13-
<div class="center">PAGE</div>
14+
<v-ons-list-item v-for="page in pages" tappable modifier="chevron" @click="currentPage = page.text; openSide = false">
15+
<a class="center" :href="page.href">
16+
{{ page.text }}
17+
</a>
1418
</v-ons-list-item>
1519
</v-ons-list>
1620
</v-ons-page>
1721
</v-ons-splitter-side>
1822

23+
<!-- Page Content -->
1924
<v-ons-splitter-content>
20-
<!-- <component :is="currentPage" :toggle-menu="() => openSide = !openSide"></component> -->
2125
<router-view/>
26+
<!-- <component :is="currentPage" :toggle-menu="() => openSide = !openSide"></component> -->
2227
</v-ons-splitter-content>
23-
</v-ons-splitter>
2428

25-
<!-- <router-view/> -->
29+
</v-ons-splitter>
2630
</template>
2731

2832
<script>
@@ -51,8 +55,12 @@ export default {
5155
5256
data () {
5357
return {
54-
currentPage: 'home',
55-
pages: ['home', 'news', 'settings'],
58+
currentPage: 'Home',
59+
pages: [
60+
{ href: '#/', text: 'Home' },
61+
{ href: '#/devices', text: 'Devices' },
62+
{ href: '#/settings', text: 'Settings' }
63+
],
5664
openSide: false
5765
}
5866
}

‎src/components/Toolbar.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
<template>
3+
<v-ons-toolbar>
4+
<div class="left">
5+
<v-ons-toolbar-button>
6+
<v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon>
7+
</v-ons-toolbar-button>
8+
</div>
9+
<div class="center">{{ title }}</div>
10+
</v-ons-toolbar>
11+
</template>
12+
13+
<!-- // // // // -->
14+
15+
<script>
16+
export default {
17+
name: 'device_list',
18+
props: ['title']
19+
}
20+
</script>
21+
22+

‎src/containers/device_interfaces/components/layout.vue

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div class="h-100">
3+
<div class="row d-flex w-100 h-100 justify-content-center">
4+
<p class="lead">Home</p>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: 'main_home'
12+
}
13+
</script>

‎src/containers/device_interfaces/index.vue

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
2+
<template>
3+
<!-- <v-ons-page>
4+
5+
<LayoutView/>
6+
<v-ons-toolbar>
7+
<div class="center">Title</div>
8+
</v-ons-toolbar>
9+
10+
<p style="text-align: center">
11+
<v-ons-button @click="$ons.notification.alert('Hello World!')">
12+
Click me!
13+
</v-ons-button>
14+
</p>
15+
16+
</v-ons-page> -->
17+
18+
<v-ons-page>
19+
20+
<!-- TOOLBAR COMPONENT -->
21+
<v-ons-toolbar>
22+
<div class="left">
23+
<ons-toolbar-button @click="carouselIndex > 0 && carouselIndex--">
24+
<v-ons-icon icon="fa-arrow-left"></v-ons-icon>
25+
</ons-toolbar-button>
26+
</div>
27+
<div class="center">
28+
<!-- Index: {{carouselIndex}} -->
29+
<v-ons-button @click="$ons.notification.alert('Onsen rules!')">
30+
<v-ons-icon icon="fa-question-circle-o"></v-ons-icon>
31+
</v-ons-button>
32+
</div>
33+
<div class="right">
34+
<ons-toolbar-button @click="carouselIndex < 2 && carouselIndex++">
35+
<v-ons-icon icon="fa-arrow-right"></v-ons-icon>
36+
</ons-toolbar-button>
37+
</div>
38+
</v-ons-toolbar>
39+
40+
<!-- CAROUSEL COMPONENT -->
41+
<v-ons-carousel fullscreen swipeable auto-scroll overscrollable :index.sync="carouselIndex">
42+
<v-ons-carousel-item v-for="(value, key) in items" :key="key" :style="{backgroundColor: value}">
43+
<div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">{{key}}</div>
44+
</v-ons-carousel-item>
45+
</v-ons-carousel>
46+
47+
<!-- DOTS COMPONENT -->
48+
<div :style="dots">
49+
<span :index="dotIndex - 1" v-for="dotIndex in Object.keys(items).length" :key="dotIndex" style="cursor: pointer" @click="carouselIndex = dotIndex - 1">
50+
{{ carouselIndex === dotIndex - 1 ? '\u25CF' : '\u25CB' }}
51+
</span>
52+
</div>
53+
</v-ons-page>
54+
55+
</template>
56+
57+
<!-- // // // // -->
58+
59+
<script>
60+
import LayoutView from './components/layout.vue'
61+
62+
export default {
63+
name: 'main_home',
64+
components: {
65+
LayoutView
66+
},
67+
metaInfo: {
68+
title: 'Main - Home'
69+
},
70+
data () {
71+
return {
72+
carouselIndex: 0,
73+
items: {
74+
KEYBOARD: '#085078',
75+
MOUSE: '#373B44',
76+
REMOTE: '#D38312'
77+
},
78+
dots: {
79+
textAlign: 'center',
80+
fontSize: '30px',
81+
color: '#fff',
82+
position: 'absolute',
83+
bottom: '40px',
84+
left: 0,
85+
right: 0
86+
}
87+
}
88+
}
89+
}
90+
</script>

‎src/containers/device_list/index.vue

+36-30
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
11

22
<template>
33
<!-- <LayoutView :collection="collection"/> -->
4-
54
<v-ons-page>
6-
7-
<v-ons-toolbar>
8-
<div class="left">
9-
<v-ons-toolbar-button @click="action">
10-
<v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon>
11-
</v-ons-toolbar-button>
12-
</div>
13-
<div class="center">Devices</div>
14-
</v-ons-toolbar>
5+
<Toolbar title="Devices" />
156

167
<v-ons-pull-hook
178
:action="loadItem"
@@ -25,8 +16,19 @@
2516
</v-ons-pull-hook>
2617

2718
<v-ons-list>
28-
<v-ons-list-item v-for="item in items">
29-
{{item}}
19+
<!-- <v-ons-list-header>AstroKey</v-ons-list-header> -->
20+
<v-ons-list-item v-for="item in collection">
21+
<div class="left">
22+
<v-ons-icon icon="fa-spinner" class="list-item__icon" v-if='item.fetching'></v-ons-icon>
23+
<v-ons-icon :icon="'fa-' + item.type" class="list-item__icon" v-else-if='item.connected'></v-ons-icon>
24+
<v-ons-icon icon="fa-circle-o" class="list-item__icon" v-else></v-ons-icon>
25+
</div>
26+
<div class="center">
27+
{{item.name}}
28+
</div>
29+
<div class="right">
30+
<v-ons-switch @click="connect(item)"></v-ons-switch>
31+
</div>
3032
</v-ons-list-item>
3133
</v-ons-list>
3234
</v-ons-page>
@@ -36,41 +38,45 @@
3638
<!-- // // // // -->
3739

3840
<script>
39-
40-
import LayoutView from './components/layout.vue'
41+
import Toolbar from '@/components/Toolbar'
42+
// import LayoutView from './components/layout.vue'
4143
import store from '@/store'
4244

4345
export default {
4446
name: 'device_list',
4547
components: {
46-
LayoutView
48+
Toolbar
4749
},
4850
metaInfo: {
49-
title: 'Device' // title is now "NAME - Device"
50-
},
51-
computed: {
52-
collection () {
53-
return store.getters['device/collection']
54-
}
51+
title: 'Device'
5552
},
56-
mounted () {
57-
return store.dispatch('device/fetchCollection')
53+
beforeCreate () {
54+
return store.dispatch('device/startScan')
5855
},
5956
data () {
6057
return {
61-
state: 'initial',
62-
items: [1, 2, 3]
58+
state: 'initial'
59+
}
60+
},
61+
computed: {
62+
collection () {
63+
return store.getters['device/collection']
6364
}
6465
},
6566
methods: {
66-
loadItem (done) {
67-
setTimeout(() => {
68-
this.items = [...this.items, this.items.length + 1]
69-
done()
70-
}, 400)
67+
connect (device) {
68+
return store.dispatch('device/connect', { device })
69+
},
70+
loadItem () {
71+
return store.dispatch('device/startScan')
7172
}
7273
}
7374
}
7475
</script>
7576

77+
<style type="text/css">
78+
p.name {
79+
font-size: 1.2rem;
80+
}
81+
</style>
7682

‎src/containers/main_home/index.vue

+29-41
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,56 @@
11

22
<template>
3-
<!-- <v-ons-page>
4-
5-
<LayoutView/>
6-
<v-ons-toolbar>
7-
<div class="center">Title</div>
8-
</v-ons-toolbar>
9-
10-
<p style="text-align: center">
11-
<v-ons-button @click="$ons.notification.alert('Hello World!')">
12-
Click me!
13-
</v-ons-button>
14-
</p>
15-
16-
</v-ons-page> -->
17-
18-
<v-ons-page>
193

204
<!-- TOOLBAR COMPONENT -->
21-
<v-ons-toolbar>
22-
<div class="left">
23-
<ons-toolbar-button @click="carouselIndex > 0 && carouselIndex--">
24-
<v-ons-icon icon="fa-arrow-left"></v-ons-icon>
25-
</ons-toolbar-button>
26-
</div>
27-
<div class="center">
5+
<!-- <v-ons-toolbar> -->
6+
<!-- <div class="left"> -->
7+
<!-- <ons-toolbar-button @click="carouselIndex > 0 && carouselIndex-_-"> -->
8+
<!-- <v-ons-icon icon="fa-arrow-left"></v-ons-icon> -->
9+
<!-- </ons-toolbar-button> -->
10+
<!-- </div> -->
11+
<!-- <div class="center"> -->
2812
<!-- Index: {{carouselIndex}} -->
29-
<v-ons-button @click="$ons.notification.alert('Onsen rules!')">
30-
<v-ons-icon icon="fa-question-circle-o"></v-ons-icon>
31-
</v-ons-button>
32-
</div>
33-
<div class="right">
34-
<ons-toolbar-button @click="carouselIndex < 2 && carouselIndex++">
35-
<v-ons-icon icon="fa-arrow-right"></v-ons-icon>
36-
</ons-toolbar-button>
37-
</div>
38-
</v-ons-toolbar>
13+
<!-- <v-ons-button @click="$ons.notification.alert('Onsen rules!')"> -->
14+
<!-- <v-ons-icon icon="fa-question-circle-o"></v-ons-icon> -->
15+
<!-- </v-ons-button> -->
16+
<!-- </div> -->
17+
<!-- <div class="right"> -->
18+
<!-- <ons-toolbar-button @click="carouselIndex < 2 && carouselIndex++"> -->
19+
<!-- <v-ons-icon icon="fa-arrow-right"></v-ons-icon> -->
20+
<!-- </ons-toolbar-button> -->
21+
<!-- </div> -->
22+
<!-- </v-ons-toolbar> -->
23+
<v-ons-page>
24+
25+
<Toolbar :title="'Interfaces'" />
3926

4027
<!-- CAROUSEL COMPONENT -->
4128
<v-ons-carousel fullscreen swipeable auto-scroll overscrollable :index.sync="carouselIndex">
4229
<v-ons-carousel-item v-for="(value, key) in items" :key="key" :style="{backgroundColor: value}">
4330
<div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">{{key}}</div>
4431
</v-ons-carousel-item>
4532
</v-ons-carousel>
46-
47-
<!-- DOTS COMPONENT -->
48-
<div :style="dots">
49-
<span :index="dotIndex - 1" v-for="dotIndex in Object.keys(items).length" :key="dotIndex" style="cursor: pointer" @click="carouselIndex = dotIndex - 1">
50-
{{ carouselIndex === dotIndex - 1 ? '\u25CF' : '\u25CB' }}
51-
</span>
52-
</div>
5333
</v-ons-page>
5434

35+
<!-- DOTS COMPONENT -->
36+
<!-- <div :style="dots"> -->
37+
<!-- <span :index="dotIndex - 1" v-for="dotIndex in Object.keys(items).length" :key="dotIndex" style="cursor: pointer" @click="carouselIndex = dotIndex - 1"> -->
38+
<!-- {{ carouselIndex === dotIndex - 1 ? '\u25CF' : '\u25CB' }} -->
39+
<!-- </span> -->
40+
<!-- </div> -->
5541
</template>
5642

5743
<!-- // // // // -->
5844

5945
<script>
6046
import LayoutView from './components/layout.vue'
47+
import Toolbar from '@/components/Toolbar'
6148

6249
export default {
6350
name: 'main_home',
6451
components: {
65-
LayoutView
52+
LayoutView,
53+
Toolbar
6654
},
6755
metaInfo: {
6856
title: 'Main - Home'

0 commit comments

Comments
 (0)