summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--documentation/.vuepress/config.js2
-rw-r--r--documentation/.vuepress/public/img/bas_screenshot.PNGbin85869 -> 0 bytes
-rw-r--r--documentation/.vuepress/public/img/home.pngbin0 -> 232012 bytes
-rw-r--r--documentation/.vuepress/public/img/home_de.pngbin0 -> 236116 bytes
-rw-r--r--documentation/de/webapp/README.md2
-rw-r--r--documentation/de/webapp/faq.md1
-rw-r--r--documentation/webapp/README.md5
-rw-r--r--documentation/webapp/faq.md8
-rw-r--r--webapp/src/assets/styles.css13
-rw-r--r--webapp/src/components/DashboardPage.vue50
-rw-r--r--webapp/src/components/NotificationsAlerts.vue2
-rw-r--r--webapp/src/components/UserModule.vue2
12 files changed, 62 insertions, 23 deletions
diff --git a/documentation/.vuepress/config.js b/documentation/.vuepress/config.js
index 5ad0884..8830724 100644
--- a/documentation/.vuepress/config.js
+++ b/documentation/.vuepress/config.js
@@ -19,6 +19,7 @@ module.exports = {
sidebar: {
'/webapp/': [
'',
+ 'faq',
'modules'
],
'/api/': [
@@ -42,6 +43,7 @@ module.exports = {
sidebar: {
'/de/webapp/': [
'',
+ 'faq',
'modules'
],
'/de/api/': [
diff --git a/documentation/.vuepress/public/img/bas_screenshot.PNG b/documentation/.vuepress/public/img/bas_screenshot.PNG
deleted file mode 100644
index 2fb8504..0000000
--- a/documentation/.vuepress/public/img/bas_screenshot.PNG
+++ /dev/null
Binary files differ
diff --git a/documentation/.vuepress/public/img/home.png b/documentation/.vuepress/public/img/home.png
new file mode 100644
index 0000000..f22054a
--- /dev/null
+++ b/documentation/.vuepress/public/img/home.png
Binary files differ
diff --git a/documentation/.vuepress/public/img/home_de.png b/documentation/.vuepress/public/img/home_de.png
new file mode 100644
index 0000000..a0700c3
--- /dev/null
+++ b/documentation/.vuepress/public/img/home_de.png
Binary files differ
diff --git a/documentation/de/webapp/README.md b/documentation/de/webapp/README.md
index cb8e8ce..7bedeed 100644
--- a/documentation/de/webapp/README.md
+++ b/documentation/de/webapp/README.md
@@ -1,3 +1,3 @@
# Webapplikation
-<img :src="$withBase('/img/bas_screenshot.PNG')" alt="BAS Screenshot">
+<a :href="$withBase('/img/home_de.png')" target="_blank"><img :src="$withBase('/img/home_de.png')" alt="BAS Home"></a> \ No newline at end of file
diff --git a/documentation/de/webapp/faq.md b/documentation/de/webapp/faq.md
new file mode 100644
index 0000000..eb31b66
--- /dev/null
+++ b/documentation/de/webapp/faq.md
@@ -0,0 +1 @@
+# [FAQ] Häufig gestellte Fragen \ No newline at end of file
diff --git a/documentation/webapp/README.md b/documentation/webapp/README.md
index e558a66..473f161 100644
--- a/documentation/webapp/README.md
+++ b/documentation/webapp/README.md
@@ -1,3 +1,6 @@
# Webapplication
+The webapplikation is the frontend for the BAS. It uses the same API calls, so everything which can be done in the frontend can also be done with the API.
+<a :href="$withBase('/img/home.png')" target="_blank"><img :src="$withBase('/img/home.png')" alt="BAS Home"></a>
-<img :src="$withBase('/img/bas_screenshot.PNG')" alt="BAS Screenshot"> \ No newline at end of file
+## Notifications
+## Profile \ No newline at end of file
diff --git a/documentation/webapp/faq.md b/documentation/webapp/faq.md
new file mode 100644
index 0000000..ef38a38
--- /dev/null
+++ b/documentation/webapp/faq.md
@@ -0,0 +1,8 @@
+# [FAQ] How to ...
+## Register a pc-pool
+* Add Ip-Range for automatic sorting
+* Create registration hooks
+
+## Move a pc-pool from one location to another
+
+## Create an Event \ No newline at end of file
diff --git a/webapp/src/assets/styles.css b/webapp/src/assets/styles.css
index aa6f146..b1a9322 100644
--- a/webapp/src/assets/styles.css
+++ b/webapp/src/assets/styles.css
@@ -84,6 +84,19 @@ html {
bottom: -3px;
left: -3px;
right: -3px;
+ pointer-events: none;
+}
+
+.tutorial-enabled .tutorial-border::after {
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.tutorial-enabled .tutorial-border::before {
+ bottom: -11px !important;
+ left: 45% !important;
}
.tutorial-enabled .tutorial-element.element-icon::after {
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 68c3973..00d2620 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -16,7 +16,7 @@
</i18n>
<template>
- <v-app :dark="settings.dark" :class="{ 'no-animation': settings.noAnimations }">
+ <v-app :dark="settings.dark" :class="{ 'no-animation': settings.noAnimations }" class="tutorial-enabled">
<v-navigation-drawer
class="drawer non-selectable"
@@ -28,33 +28,45 @@
width="250"
app
>
- <div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
- <div v-for="category in categories" :key="category.name">
- <div class="dashboard-category text--secondary">{{ desktop && drawerMini ? '' : $t('$dashboardCategories.' + category.name) }}</div>
- <v-list>
- <v-list-tile ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
- <v-list-tile-action>
- <v-icon v-html="module.icon"></v-icon>
- </v-list-tile-action>
- <v-list-tile-content>
- <v-list-tile-title v-text="$t('$dashboardModules.' + module.name)"></v-list-tile-title>
- </v-list-tile-content>
- </v-list-tile>
- </v-list>
- <v-divider></v-divider>
+ <div class="tutorial-element label-bottom tutorial-border" style="--label-number: '1'">
+ <div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
+ <div v-for="category in categories" :key="category.name">
+ <div class="dashboard-category text--secondary">{{ desktop && drawerMini ? '' : $t('$dashboardCategories.' + category.name) }}</div>
+ <v-list>
+ <v-list-tile ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
+ <v-list-tile-action>
+ <v-icon v-html="module.icon"></v-icon>
+ </v-list-tile-action>
+ <v-list-tile-content>
+ <v-list-tile-title v-text="$t('$dashboardModules.' + module.name)"></v-list-tile-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </v-list>
+ <v-divider></v-divider>
+ </div>
</div>
</v-navigation-drawer>
<v-toolbar :height="$vuetify.breakpoint.smAndDown ? 56 : 64" dark app :clipped-left="settings.clipped" class="non-selectable" style="z-index: 10;" id="topbar">
- <v-toolbar-side-icon class="drawer-icon" @click.stop="toggleDrawer"></v-toolbar-side-icon>
+ <v-toolbar-side-icon
+ @click.stop="toggleDrawer"
+ class="drawer-icon tutorial-element label-bottom tutorial-border element-icon"
+ style="--label-number: '2'"
+ ></v-toolbar-side-icon>
<a class="logo" href="/dashboard/home"><img class="non-draggable hidden-md-and-down" src="@/assets/logo.svg" /></a>
<v-spacer></v-spacer>
<v-btn v-if="devMode" icon @click="$store.commit('saveSetting', { name: 'locale', value: settings.locale === 'en' ? 'de' : 'en' })"><v-icon>language</v-icon></v-btn>
- <v-btn icon @click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })"><v-icon>invert_colors</v-icon></v-btn>
- <notifications-alerts style="margin-right: 16px"></notifications-alerts>
+ <v-btn
+ class="tutorial-element label-top-left element-icon" style="--label-number: '3'"
+ icon
+ @click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })"
+ ><v-icon>invert_colors</v-icon></v-btn>
+ <notifications-alerts style="margin-right: 16px;"></notifications-alerts>
<v-toolbar-items>
<v-menu offset-y attach>
- <v-btn class="user-button" flat slot="activator" style="text-transform: none;">
+ <v-btn class="user-button tutorial-element label-bottom tutorial-border"
+ style="--label-number: '5'; text-transform: none;"
+ flat slot="activator" >
<v-icon left>account_circle</v-icon>
<v-flex>
{{ user.name }}
diff --git a/webapp/src/components/NotificationsAlerts.vue b/webapp/src/components/NotificationsAlerts.vue
index c2c389b..efedd2a 100644
--- a/webapp/src/components/NotificationsAlerts.vue
+++ b/webapp/src/components/NotificationsAlerts.vue
@@ -18,7 +18,7 @@
<template>
<div>
<v-menu v-model="menu" offset-y left :close-on-content-click="false" :nudge-bottom="10" content-class="notifications" attach>
- <v-btn icon slot="activator">
+ <v-btn icon slot="activator" class="tutorial-element label-top-left element-icon" style="--label-number: '4'">
<v-badge :value="!menu && newAlertCount" color="red darken-3" bottom>
<span slot="badge">{{newAlertCount}}</span>
<v-icon>notifications</v-icon>
diff --git a/webapp/src/components/UserModule.vue b/webapp/src/components/UserModule.vue
index e89afe3..4e509d5 100644
--- a/webapp/src/components/UserModule.vue
+++ b/webapp/src/components/UserModule.vue
@@ -22,7 +22,7 @@
</i18n>
<template>
- <v-container fill-height>
+ <v-container fill-height class="tutorial-enabled">
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">