Skeleton

src/prog/dashboard3/quasar.conf.js

@@ -59,7 +59,8 @@ module.exports = function (ctx) {
         'QListHeader',
         'QItem',
         'QItemMain',
-        'QItemSide'
+        'QItemSide',
+        'QToggle'
       ],
       directives: [
         'Ripple'

src/prog/dashboard3/src/pages/home.vue

@@ -1,7 +1,7 @@
 <template>
   <q-page padding>
     <!-- content -->
-    <h1>Home</h1>
+    <h2>Home</h2>
   </q-page>
 </template>
 

src/prog/dashboard3/src/pages/outlets.vue

@@ -1,13 +1,43 @@
 <template>
   <q-page padding>
     <!-- content -->
-    <h1>outlets</h1>
+    <q-list>
+      <q-list-header>Outlets</q-list-header>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="Bureau JB" />
+        <q-item-side right>
+          <q-toggle v-model="checked_one" />
+      </q-item-side>
+      </q-item>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="Salon" />
+        <q-item-side right>
+          <q-toggle v-model="checked_two" />
+        </q-item-side>
+      </q-item>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="Sapin" />
+        <q-item-side right>
+          <q-toggle v-model="checked_three" />
+        </q-item-side>
+      </q-item>
+    </q-list>
   </q-page>
 </template>
 
 <script>
 export default {
-  name: 'PageOutlets'
+  name: 'PageOutlets',
+  data () {
+    return {
+      checked_one: true,
+      checked_two: false,
+      checked_three: false
+    }
+  }
 }
 </script>
 

src/prog/dashboard3/src/pages/sequences.vue

@@ -1,7 +1,16 @@
 <template>
   <q-page padding>
     <!-- content -->
-    <h1>Sequences</h1>
+    <q-list>
+      <q-list-header>Sequences</q-list-header>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="09:30" />
+        <q-item-side right>
+          <q-toggle v-model="checked_one" />
+      </q-item-side>
+      </q-item>
+   </q-list>
   </q-page>
 </template>
 

src/prog/dashboard3/src/pages/settings.vue

@@ -1,7 +1,19 @@
 <template>
   <q-page padding>
     <!-- content -->
-    <h1>Settings</h1>
+    <q-list>
+      <q-list-header>General</q-list-header>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="pouet" />
+        <q-item-side right icon="keyboard_arrow_right" />
+      </q-item>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="reglage 2" />
+        <q-item-side right icon="keyboard_arrow_right" />
+      </q-item>
+    </q-list>
   </q-page>
 </template>
 

src/prog/dashboard3/src/pages/shutters.vue

@@ -1,7 +1,36 @@
 <template>
   <q-page padding>
     <!-- content -->
-    <h1>Shutters</h1>
+    <q-list>
+      <q-list-header>Shutters</q-list-header>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="Chambre" />
+        <q-item-side right>
+          <q-btn class="btn-fixed-width" icon="ion-arrow-up" />
+          <q-btn class="btn-fixed-width" icon="ion-pause" />
+          <q-btn class="btn-fixed-width" icon="ion-arrow-down" />
+        </q-item-side>
+      </q-item>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="Salon" />
+        <q-item-side right>
+          <q-btn class="btn-fixed-width" icon="ion-arrow-up" />
+          <q-btn class="btn-fixed-width" icon="ion-pause" />
+          <q-btn class="btn-fixed-width" icon="ion-arrow-down" />
+        </q-item-side>
+      </q-item>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="Salle à manger" />
+        <q-item-side right>
+          <q-btn class="btn-fixed-width" icon="ion-arrow-up" />
+          <q-btn class="btn-fixed-width" icon="ion-pause" />
+          <q-btn class="btn-fixed-width" icon="ion-arrow-down" />
+        </q-item-side>
+      </q-item>
+    </q-list>
   </q-page>
 </template>
 

src/prog/dashboard3/src/pages/sprinklers.vue

@@ -1,7 +1,30 @@
 <template>
   <q-page padding>
     <!-- content -->
-    <h1>Sprinklers</h1>
+    <q-list>
+      <q-list-header>Sprinklers</q-list-header>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="Zone A" />
+        <q-item-side right>
+          <q-toggle v-model="checked_one" />
+      </q-item-side>
+      </q-item>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="Zone B" />
+        <q-item-side right>
+          <q-toggle v-model="checked_two" />
+        </q-item-side>
+      </q-item>
+      <q-item link v-ripple.mat>
+        <q-item-side icon="settings" />
+        <q-item-main label="Zone C" />
+        <q-item-side right>
+          <q-toggle v-model="checked_three" />
+        </q-item-side>
+      </q-item>
+    </q-list>
   </q-page>
 </template>