summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorChristian Hofmaier2019-05-20 03:42:57 +0200
committerChristian Hofmaier2019-05-20 03:42:57 +0200
commite985f2e81aabc6aafc7a68c65ba9430df83ab1f8 (patch)
tree510728a5cfdacfd1fbe76f2eee6a516179c1880e /webapp
parent[documentation] pictures event manager (diff)
downloadbas-e985f2e81aabc6aafc7a68c65ba9430df83ab1f8.tar.gz
bas-e985f2e81aabc6aafc7a68c65ba9430df83ab1f8.tar.xz
bas-e985f2e81aabc6aafc7a68c65ba9430df83ab1f8.zip
[eventmanager] add tutorial classes + fix 'name not empty' bug
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/EventModule.vue2
-rw-r--r--webapp/src/components/EventModuleEdit.vue24
-rw-r--r--webapp/src/components/EventModuleEventList.vue6
3 files changed, 18 insertions, 14 deletions
diff --git a/webapp/src/components/EventModule.vue b/webapp/src/components/EventModule.vue
index 5d2431e..88a79b7 100644
--- a/webapp/src/components/EventModule.vue
+++ b/webapp/src/components/EventModule.vue
@@ -14,7 +14,7 @@
</i18n>
<template>
- <v-container fill-height>
+ <v-container fill-height class="">
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
diff --git a/webapp/src/components/EventModuleEdit.vue b/webapp/src/components/EventModuleEdit.vue
index 225614a..4bda15f 100644
--- a/webapp/src/components/EventModuleEdit.vue
+++ b/webapp/src/components/EventModuleEdit.vue
@@ -108,7 +108,7 @@
</i18n>
<template>
- <v-card>
+ <v-card class="">
<v-card-title style="padding: 0px; z-index: 1">
<v-stepper v-model="step" horizontal style="width: 100%; background: transparent;" class="elevation-3">
<v-stepper-header>
@@ -154,7 +154,7 @@
:label="$t('eventName')"
prepend-icon="label"
color="primary"
- :rules="[() => !!name || $t('eventNameEmptyError')]"
+ :rules="[v => !!v || $t('eventNameEmptyError')]"
ref="name"
></v-text-field>
</v-flex>
@@ -166,6 +166,7 @@
:items="configList"
single-select
:max-columns="1"
+ class="tutorial-element tutorial-no-border label-far-left label-far-bottom" style="--label-number: '1'"
></select-box>
</v-flex>
<v-flex xs12 md5>
@@ -184,6 +185,7 @@
v-model="important"
color="primary"
:label="$t('importantEvent')"
+ class="tutorial-element tutorial-no-border label-far-left label-far-bottom" style="--label-number: '2'"
></v-checkbox>
</v-flex>
<v-flex xs12 md2 offset-md1>
@@ -191,10 +193,11 @@
v-model="wakeonlan"
color="primary"
:label="$t('wakeonlan')"
+ class="tutorial-element tutorial-no-border label-far-left label-far-bottom" style="--label-number: '3'"
></v-checkbox>
</v-flex>
</v-layout>
- <v-layout row wrap>
+ <v-layout row wrap class="tutorial-element label-right tutorial-border" style="--label-number: '4'">
<v-flex xs12 md5>
<v-menu
v-model="startDateMenu"
@@ -305,12 +308,12 @@
</v-layout>
<v-layout row wrap>
<v-flex>
- <v-switch color="primary" v-model="repetitiveEvent" :label="$t('repetitiveModeSwitch')"/>
+ <v-switch color="primary" v-model="repetitiveEvent" :label="$t('repetitiveModeSwitch')" class="tutorial-element tutorial-no-border label-left tutorial-switch" style="--label-number: '5';"/>
</v-flex>
</v-layout>
- <v-layout row wrap v-show="repetitiveEvent">
+ <v-layout row wrap v-show="repetitiveEvent" class="">
<v-flex xs12 md12>
- <p style="margin-bottom: 0px">{{ $t('days') }}</p>
+ <p class="tutorial-element tutorial-no-border tutorial-label label-right" style="margin-bottom: 0px; --label-number: '1'">{{ $t('days') }}</p>
<v-btn small class="no-margin" :color="dayMap[0] ? 'primary' : ''" @click="setDayMap(0)">{{ $t('monday') }}</v-btn>
<v-btn small class="no-margin" :color="dayMap[1] ? 'primary' : ''" @click="setDayMap(1)">{{ $t('tuesday') }}</v-btn>
<v-btn small class="no-margin" :color="dayMap[2] ? 'primary' : ''" @click="setDayMap(2)">{{ $t('wednesday') }}</v-btn>
@@ -320,7 +323,7 @@
<v-btn small class="no-margin" :color="dayMap[6] ? 'primary' : ''" @click="setDayMap(6)">{{ $t('sunday') }}</v-btn>
</v-flex>
<v-flex xs12 md12 style="margin-top: 20px; margin-bottom: 20px">
- <p style="margin-bottom: 0px">{{ $t('months') }}</p>
+ <p class="tutorial-element tutorial-no-border tutorial-label label-right" style="margin-bottom: 0px; --label-number: '2'">{{ $t('months') }}</p>
<v-btn small class="no-margin" :color="monthMap[0] ? 'primary' : ''" @click="setMonthMap(0)">{{ $t('january') }}</v-btn>
<v-btn small class="no-margin" :color="monthMap[1] ? 'primary' : ''" @click="setMonthMap(1)">{{ $t('february') }}</v-btn>
<v-btn small class="no-margin" :color="monthMap[2] ? 'primary' : ''" @click="setMonthMap(2)">{{ $t('march') }}</v-btn>
@@ -343,18 +346,19 @@
type="number"
min="1"
:rules="[() => !!interval || $t('intervalMustBeNumberError')]"
+ class="tutorial-element tutorial-no-border label-top" style="--label-number: '3'"
></v-text-field>
</v-flex>
<v-flex xs12 md5 offset-md1>
- <v-select :items="intervalTypes" :label="$t('intervalTypes')" item-text="name" v-model="intervalType" prepend-icon="repeat" color="primary" offset-y></v-select>
+ <v-select :items="intervalTypes" :label="$t('intervalTypes')" item-text="name" v-model="intervalType" prepend-icon="repeat" color="primary" offset-y class="tutorial-element tutorial-no-border label-top" style="--label-number: '4'"></v-select>
</v-flex>
</v-layout>
</v-stepper-content>
<v-stepper-content step="2" class="stepper-padding-0">
<v-tabs v-if="step == 2" v-model="tabs" grow slider-color="primary">
- <v-tab><v-icon class="tabbar-tabicon">category</v-icon>{{ groups.length + ' ' + $t('groups') }}</v-tab>
- <v-tab><v-icon class="tabbar-tabicon">computer</v-icon>{{ clients.length + ' ' + $t('clients') }}</v-tab>
+ <v-tab><div class="tutorial-element tutorial-no-border label-far-left" style="--label-number: '1'"><v-icon class="tabbar-tabicon">category</v-icon></div>{{ groups.length + ' ' + $t('groups') }}</v-tab>
+ <v-tab><div class="tutorial-element tutorial-no-border label-far-left" style="--label-number: '2'"><v-icon class="tabbar-tabicon">computer</v-icon></div>{{ clients.length + ' ' + $t('clients') }}</v-tab>
<v-tab-item>
<data-table v-model="groups" :headers="groupHeaders" :items="groupList"/>
</v-tab-item>
diff --git a/webapp/src/components/EventModuleEventList.vue b/webapp/src/components/EventModuleEventList.vue
index f07b6e9..038c296 100644
--- a/webapp/src/components/EventModuleEventList.vue
+++ b/webapp/src/components/EventModuleEventList.vue
@@ -24,15 +24,15 @@
<v-card>
<data-table v-model="selectedEvents" :headers="headers" :items="events" @dblclick="editEvent($event)">
<div slot="action" slot-scope="row" style="text-align: right">
- <v-btn flat icon color="primary" @click.stop="editEvent(row.item)"><v-icon>edit</v-icon></v-btn>
+ <v-btn flat icon color="primary" @click.stop="editEvent(row.item)" :class="row.index === 0 ? 'tutorial-element label-top-left element-icon' : ''" style="--label-number: '3'"><v-icon>edit</v-icon></v-btn>
</div>
</data-table>
</v-card>
<div class="text-xs-right">
- <v-btn color="error" flat @click="deleteEvent" :disabled="selectedEvents.length === 0">
+ <v-btn color="error" flat @click="deleteEvent" :disabled="selectedEvents.length === 0" class="tutorial-element label-left" style="--label-number: '2'">
<v-icon left>remove_circle_outline</v-icon>{{ $tc('delete-event', selectedEvents.length, [selectedEvents.length]) }}
</v-btn>
- <v-btn color="success" flat @click="createEvent">
+ <v-btn color="success" flat @click="createEvent" class="tutorial-element label-right" style="--label-number: '1'">
<v-icon left>add_circle_outline</v-icon>{{ $t('create-event') }}
</v-btn>
</div>