summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--documentation/.vuepress/public/img/groups_group.pngbin0 -> 411103 bytes
-rw-r--r--documentation/.vuepress/public/img/groups_group_de.pngbin0 -> 427998 bytes
-rw-r--r--documentation/.vuepress/public/img/groups_home.pngbin0 -> 351801 bytes
-rw-r--r--documentation/.vuepress/public/img/groups_home_de.pngbin0 -> 361222 bytes
-rw-r--r--documentation/de/webapp/modules.md47
-rw-r--r--documentation/webapp/modules.md49
-rw-r--r--webapp/src/components/GroupModule.vue4
-rw-r--r--webapp/src/components/GroupModuleGroupInfo.vue7
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue8
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue11
10 files changed, 112 insertions, 14 deletions
diff --git a/documentation/.vuepress/public/img/groups_group.png b/documentation/.vuepress/public/img/groups_group.png
new file mode 100644
index 0000000..db97316
--- /dev/null
+++ b/documentation/.vuepress/public/img/groups_group.png
Binary files differ
diff --git a/documentation/.vuepress/public/img/groups_group_de.png b/documentation/.vuepress/public/img/groups_group_de.png
new file mode 100644
index 0000000..05fa6cd
--- /dev/null
+++ b/documentation/.vuepress/public/img/groups_group_de.png
Binary files differ
diff --git a/documentation/.vuepress/public/img/groups_home.png b/documentation/.vuepress/public/img/groups_home.png
new file mode 100644
index 0000000..f5bb8e9
--- /dev/null
+++ b/documentation/.vuepress/public/img/groups_home.png
Binary files differ
diff --git a/documentation/.vuepress/public/img/groups_home_de.png b/documentation/.vuepress/public/img/groups_home_de.png
new file mode 100644
index 0000000..5b1a9d2
--- /dev/null
+++ b/documentation/.vuepress/public/img/groups_home_de.png
Binary files differ
diff --git a/documentation/de/webapp/modules.md b/documentation/de/webapp/modules.md
index dabb56e..fa520c7 100644
--- a/documentation/de/webapp/modules.md
+++ b/documentation/de/webapp/modules.md
@@ -1,6 +1,53 @@
# Module
## Gruppen / Clients
+
+<a :href="$withBase('/img/groups_home_de.png')" target="_blank"><img :src="$withBase('/img/groups_home_de.png')" alt="BAS Groups and Clients"></a>
+
+In der Home Ansicht des "Gruppen / Clients" Moduls, erreichbar über das Home Symbol oben links <span class="tutorial-label">1</span>,
+werden alle Gruppen und Clients angezeigt, die keine Übergruppen haben.
+Die Daten können über den Neu-Laden-Button <span class="tutorial-label">2</span> oben rechts aktualisiert werden, ohne dass die ganze Seite neugeladen werden muss.
+
+Durch das Aktivieren des "Alle" Schalters werden alle Gruppen und Clients statt nur die Gruppen und Clients der höchsten Ebenen angezeigt.
+Dieser Schalter funktioniert auch in einer Gruppe um alle Untergruppen statt nur die direkten Kinder anzuzeigen.
+
+::: tip
+Über einen Klick auf den Einklapp-Button <span class="tutorial-label">5</span> kann die Ansicht zwischen "Untereinander" und "In Tabs" gewechselt werden.
+:::
+
+Durch einen Klick auf den Pfeil nach rechts oder einen Doppelklick auf die Zeile kann zu einer Gruppe oder einem Client gelangt werden.
+
+### Untergruppe / Client
+
+<a :href="$withBase('/img/groups_group_de.png')" target="_blank"><img :src="$withBase('/img/groups_group_de.png')" alt="BAS Groups and Clients"></a>
+
+Bei einer Gruppe oder einem Client werden allgemeine Informationen über diese Gruppe oder diesen Client oben angezeigt.
+Die Informationen können durch einen Klick auf den Bearbeiten-Button <span class="tutorial-label">1</span> bearbeitet werden.
+Im Bearbeitungsmodus wird dieser Button durch einene Speichern-Button ersetzt, um die Änderungen zu bestätigen.
+
+Die Gruppe oder der Client kann über den Löschen-Button <span class="tutorial-label">2</span> gelöscht werden.
+
+### Tabellen mit Gruppen und Clients
+
+In der Home Ansicht und in einer Gruppe werden die Gruppen und Clients in zwei Tabllen angezeigt.
+Durch einen Klick auf die Checkbox links (oder irgendwo in der Zeile) können die Gruppen/Clients ausgewählt werden.
+Unter diesen Tabellen gibt es Buttons für weitere Aktionen.
+
+Home Ansicht:
+* GRUPPE ERSTELLEN - Eine neue Gruppe erstellen
+* CLIENT ERSTELLEN - Einen neuen Client erstellen
+* X GRUPPEN LÖSCHEN - Die ausgewählten Gruppen dauerhaft löschen
+* X CLIENTS LÖSCHEN - Die ausgewählten Clients dauerhaft löschen
+
+Gruppen Ansicht:
+* UNTERGRUPPEN HINZUFÜGEN - Bereits existierende Gruppen zu dieser Gruppe hinzufügen
+* CLIENTS HINZUFÜGEN - Bereits existierende Clients zu dieser Gruppe hinzufügen
+* X UNTERGRUPPEN ENTFERNEN - Die ausgewählten Gruppen von dieser Gruppe entfernen (Löscht die Gruppen nicht dauerhaft)
+* X CLIENTS ENTFERNEN - Die ausgewählten Clients von dieser Gruppe entfernen (Löscht die Clients nicht dauerhaft)
+
+Beide:
+* X CLIENTS AUFWECKEN - Starte die ausgewählten Clients via Wake On Lan (Experimentelle Funktion: Funktioniert nicht bei allen Clients)
+
## IP Bereiche
## iPXE Konfigurator
## Client Registrierung
diff --git a/documentation/webapp/modules.md b/documentation/webapp/modules.md
index 459e972..883b781 100644
--- a/documentation/webapp/modules.md
+++ b/documentation/webapp/modules.md
@@ -1,6 +1,53 @@
# Modules
-## Group / Clients
+## Groups / Clients
+
+<a :href="$withBase('/img/groups_home.png')" target="_blank"><img :src="$withBase('/img/groups_home.png')" alt="BAS Groups and Clients"></a>
+
+Listed in the home view of the "Groups / Clients" module, accessible by the home icon in the top left <span class="tutorial-label">1</span>,
+are all groups and clients that have no parent group.
+The data can be refreshed without reloading the page by clicking on the refresh button in the top right corner <span class="tutorial-label">2</span>.
+
+Enabling the "All" switch <span class="tutorial-label">3</span> shows all groups and clients instead of top-level groups and clients only.
+This switch also works in a group to show all subgroups and clients within this group instead of direct children only.
+
+::: tip
+By clicking on the collapse button <span class="tutorial-label">5</span> the view can be switched from column to tabbed.
+:::
+
+To naviate to a group or client click on the arrow on the right <span class="tutorial-label">4</span> or double click the row.
+
+### Subgroup / Client
+
+<a :href="$withBase('/img/groups_group.png')" target="_blank"><img :src="$withBase('/img/groups_group.png')" alt="BAS Groups and Clients"></a>
+
+After naviating to a group or client general information about this group/client is displayed at the top.
+The information can be edited by clicking on edit button <span class="tutorial-label">1</span>.
+In edit mode this button is replaced with a save button to confirm the changes.
+
+The group or client can be deleted by pressing the delete button <span class="tutorial-label">2</span>.
+
+### Tables with Groups and Clients
+
+In the home view and in a group the groups and clients are displayed in two tables.
+By clicking the checkbox on the left (or anywhere on the row) a group/client can be selected.
+Below these tables are buttons for additional actions.
+
+Home view:
+* CREATE GROUP - Create a new group
+* CREATE CLIENT - Create a new client
+* DELETE X GROUPS - Permanently delete the selected groups
+* DELETE X CLIENTS - Permanently delete the selected clients
+
+Group view:
+* ADD SUBGROUPS - Add already existing groups to this group
+* ADD CLIENTS - Add already existing clients to this group
+* REMOVE X SUBGROUPS - Remove the selected groups from this group (Does not permanently delete the groups)
+* REMOVE X CLIENTS - Remove the selected clients from this group (Does not permanently delete the clients)
+
+Both:
+* WAKE X CLIENTS UP - Start the selected clients via Wake On Lan (Experimental feature: Does not work on all clients)
+
## IP Ranges
## iPXE Configurator
## Event Manager
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index 1e85364..279b7f9 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -16,13 +16,13 @@
<template v-for="(item, index) in tabChain">
<v-icon v-if="item.id > 0 || item.id === 'create'" :key="'arrow' + index">keyboard_arrow_right</v-icon>
<v-tab ripple :key="'tab' + index">
- <v-icon v-if="item.tabType === 'group' && item.id === 0">home</v-icon>
+ <div v-if="item.tabType === 'group' && item.id === 0" class="tutorial-element label-top-left element-icon" style="--label-number: '1'"><v-icon>home</v-icon></div>
<v-icon v-if="item.tabType === 'client'" class="tabbar-tabicon">computer</v-icon>
<div v-if="item.id > 0 || item.id === 'create'" class="tab-text">{{ item.name ? item.name : item.id !== 'create' ? item.id : ' . . . . . . . . . . ' }}</div>
</v-tab>
</template>
</v-tabs>
- <v-btn icon :loading="reloading" @click="reload"><v-icon>refresh</v-icon></v-btn>
+ <v-btn icon :loading="reloading" @click="reload" class="tutorial-element label-top-left element-icon" style="--label-number: '2'"><v-icon>refresh</v-icon></v-btn>
</v-card>
<v-tabs-items :value="activeTab" @input="setActiveTab" touchless style="padding-bottom: 12px">
<v-tab-item v-for="(item, index) in tabChain" :key="index" lazy :transition="false" :reverse-transition="false">
diff --git a/webapp/src/components/GroupModuleGroupInfo.vue b/webapp/src/components/GroupModuleGroupInfo.vue
index 373de61..141fd13 100644
--- a/webapp/src/components/GroupModuleGroupInfo.vue
+++ b/webapp/src/components/GroupModuleGroupInfo.vue
@@ -130,10 +130,10 @@
<v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
<div class="info-box">
<div v-if="!editMode">
- <v-btn color="error" flat @click="deleteGroup" class="info-buttons">
+ <v-btn color="error" flat @click="deleteGroup" class="info-buttons tutorial-element label-left" style="--label-number: '2'">
<v-icon left>delete</v-icon>{{ $t('delete') }}
</v-btn>
- <v-btn color="primary" flat @click="editInfo" class="info-buttons">
+ <v-btn color="primary" flat @click="editInfo" class="info-buttons tutorial-element label-right" style="--label-number: '1'">
<v-icon left>create</v-icon>{{ $t('edit') }}
</v-btn>
</div>
@@ -250,9 +250,6 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-.info-buttons {
- margin: 0;
-}
.iprange {
display: flex;
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index b556509..ede61b9 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -14,7 +14,7 @@
"name": "Name",
"description": "Beschreibung",
"removeSubgroups": "Eine Untergruppe entfernen | {0} Untergruppen entfernen",
- "addSubgroups": "Füge Untergruppen hinzu",
+ "addSubgroups": "Untergruppen hinzufügen",
"deleteGroups": "Eine Gruppe löschen | {0} Gruppen löschen",
"createGroup": "Gruppe erstellen"
}
@@ -26,7 +26,11 @@
<v-divider></v-divider>
<data-table ref="table" v-model="selected" :headers="headers" :items="groups" :loading="loading" @dblclick="loadGroup($event)" copy-button>
<div slot="actions" slot-scope="row" style="text-align: right">
- <v-btn icon @click.stop @mousedown="loadGroup(row.item)" style="margin: 0"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ <v-btn icon @click.stop @mousedown="loadGroup(row.item)"
+ :class="row.index === 0 ? 'tutorial-element' : ''"
+ class="label-top-left element-icon"
+ style="--label-number: '4'"
+ ><v-icon>keyboard_arrow_right</v-icon></v-btn>
</div>
</data-table>
<v-divider></v-divider>
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index 159f249..b969691 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -10,7 +10,7 @@
"de": {
"info": "Info",
"showall": "Alle",
- "groups": "Groups",
+ "groups": "Gruppen",
"subgroups": "Untergruppen",
"clients": "Clients"
}
@@ -34,7 +34,7 @@
v-if="group.id !== 'create'"
:input-value="group.tabShowAll"
@change="setShowAll"
- class="show-toggle"
+ class="show-toggle tutorial-element label-right" style="--label-number: '3'"
:label="$t('showall')"
hide-details
color="primary"
@@ -50,14 +50,16 @@
{{ group.subgroups ? group.subgroups.length : 0 }}
<span class="ml-1">{{ group.id > 0 ? $t('subgroups') : $t('groups') }}</span>
</div>
- <v-btn v-if="group.id === 0" icon @click="toggleCollapsedView" :class="{ 'upside-down': settings.collapsedView }">
+ <v-btn v-if="group.id === 0" icon @click="toggleCollapsedView" :class="{ 'upside-down': settings.collapsedView }"
+ class="tutorial-element label-top-left element-icon" style="--label-number: '5'"
+ >
<v-icon>expand_less</v-icon>
</v-btn>
<v-switch
v-if="group.id === 0"
:input-value="group.tabShowAll"
@change="setShowAll"
- class="show-toggle"
+ class="show-toggle tutorial-element label-right" style="--label-number: '3'"
:label="$t('showall')"
hide-details
color="primary"
@@ -189,6 +191,7 @@ export default {
}
.show-toggle {
+ height: 48px;
padding: 0 16px;
margin: 0;
flex: initial;