summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-03-15 05:47:37 +0100
committerUdo Walter2019-03-15 05:47:37 +0100
commit204e6f1f57e6fc4ab80f607b4881df868bb1ebe7 (patch)
tree6ec32ad0852383453cffa2689290a8bf94a69ab7 /webapp
parent[server/log] add log lib (diff)
parent[external-backends] Small bugfix to save the switch again & add tooltips to t... (diff)
downloadbas-204e6f1f57e6fc4ab80f607b4881df868bb1ebe7.tar.gz
bas-204e6f1f57e6fc4ab80f607b4881df868bb1ebe7.tar.xz
bas-204e6f1f57e6fc4ab80f607b4881df868bb1ebe7.zip
merge
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/AccountModule.vue15
-rw-r--r--webapp/src/components/BackendModule.vue40
-rw-r--r--webapp/src/components/BackendModuleEdit.vue33
-rw-r--r--webapp/src/components/BackendModuleEditDynamicFields.vue56
-rw-r--r--webapp/src/components/IpxeBuilderModuleConfig.vue35
-rw-r--r--webapp/src/components/UserCreateForm.vue18
6 files changed, 123 insertions, 74 deletions
diff --git a/webapp/src/components/AccountModule.vue b/webapp/src/components/AccountModule.vue
index 9d22715..1e6511a 100644
--- a/webapp/src/components/AccountModule.vue
+++ b/webapp/src/components/AccountModule.vue
@@ -147,24 +147,27 @@
<v-text-field
type="password"
v-model="passwordCurrent"
- :label="$t('passwordCurrent')"
:rules="currentPasswordRules"
@input="clearCurrentPasswordErrors"
- ></v-text-field>
+ >
+ <template slot="label">{{ $t('passwordCurrent') }} <label class="error--text">*</label></template>
+ </v-text-field>
<v-text-field
validate-on-blur
type="password"
v-model="passwordNew"
- :label="$t('passwordNew')"
:rules="passwordRules"
- ></v-text-field>
+ >
+ <template slot="label">{{ $t('passwordNew') }} <label class="error--text">*</label></template>
+ </v-text-field>
<v-text-field
validate-on-blur
type="password"
v-model="passwordConfirm"
- :label="$t('passwordConfirm')"
:rules="confirmPasswordRules"
- ></v-text-field>
+ >
+ <template slot="label">{{ $t('passwordConfirm') }} <label class="error--text">*</label></template>
+ </v-text-field>
</v-form>
</div>
</div>
diff --git a/webapp/src/components/BackendModule.vue b/webapp/src/components/BackendModule.vue
index 39daedb..43f07a2 100644
--- a/webapp/src/components/BackendModule.vue
+++ b/webapp/src/components/BackendModule.vue
@@ -7,7 +7,10 @@
"backends": "Backends",
"backendType": "type",
"checkConnection": "Check one connection | Check {0} connections",
+ "checkConnectionTooltip": "Check connection",
"deleteAreYouSure": "Are you sure you want to delete this backend? | Are you sure you want to delete those backends?",
+ "editTooltip": "Edit",
+ "editSyncTooltip": "Edit synchronization settings",
"id": "ID",
"name": "Name",
"removeBackend": "Remove one backend | Remove {0} backends",
@@ -20,7 +23,10 @@
"backendName": "name",
"backendType": "typ",
"checkConnection": "Überprüfe eine Verbindung | Überprüfe {0} Verbindungen",
+ "checkConnectionTooltip": "Verbindung überprüfen",
"deleteAreYouSure": "Sind Sie sicher, dass sie dieses Backend Löschen wollen? | Sind sie sicher, dass sie diese Backends Löschen wollen?",
+ "editTooltip": "Bearbeiten",
+ "editSyncTooltip": "Synchronisationseinstellungen bearbeiten",
"id": "ID",
"name": "Name",
"removeBackend": "Entferne ein Backend | Entferne {0} Backends",
@@ -51,18 +57,37 @@
<v-card>
<data-table v-model="selectedBackends" :headers="headers" :items="backends" @dblclick="$store.commit('backends/editBackend', $event.id)">
<div slot="action" slot-scope="row" style="text-align: right">
- <v-btn flat icon :loading="row.item.loading"
- :disabled="row.item.loading"
- :color="row.item.connection"
- @click.stop="checkConnection(row.item)"
- ><v-icon>cached</v-icon></v-btn>
- <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editSync', row.item.id)"><v-icon>settings_ethernet</v-icon></v-btn>
- <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editBackend', row.item.id)"><v-icon>edit</v-icon></v-btn>
+ <v-tooltip top open-delay="800">
+ <template v-slot:activator="{ on }">
+ <v-btn flat icon :loading="row.item.loading"
+ :disabled="row.item.loading"
+ :color="row.item.connection"
+ @click.stop="checkConnection(row.item)"
+ v-on="on"
+ ><v-icon>cached</v-icon></v-btn>
+ </template>
+ <span>{{ $t('checkConnectionTooltip') }}</span>
+ </v-tooltip>
+
+ <v-tooltip top open-delay="800">
+ <template v-slot:activator="{ on }">
+ <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editSync', row.item.id)" v-on="on"><v-icon>settings_ethernet</v-icon></v-btn>
+ </template>
+ <span>{{ $t('editSyncTooltip') }}</span>
+ </v-tooltip>
+
+ <v-tooltip top open-delay="800">
+ <template v-slot:activator="{ on }">
+ <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editBackend', row.item.id)" v-on="on"><v-icon>edit</v-icon></v-btn>
+ </template>
+ <span>{{ $t('editTooltip') }}</span>
+ </v-tooltip>
</div>
</data-table>
</v-card>
<div class="text-xs-right">
+
<v-btn color="primary" flat @click="checkConnections(selectedBackends)" :disabled="selectedBackends.length === 0">
<v-icon left>cached</v-icon>{{ $tc('checkConnection', selectedBackends.length, [selectedBackends.length]) }}
</v-btn>
@@ -78,7 +103,6 @@
</v-tabs-items>
</v-flex>
</v-layout>
-
<v-dialog
:value="$store.state.backends.dialog"
@input="$store.commit('backends/setDialog', $event)"
diff --git a/webapp/src/components/BackendModuleEdit.vue b/webapp/src/components/BackendModuleEdit.vue
index 9d27fbc..95f4d37 100644
--- a/webapp/src/components/BackendModuleEdit.vue
+++ b/webapp/src/components/BackendModuleEdit.vue
@@ -3,7 +3,7 @@
"en": {
"inputCredentials": "Login credentials",
"backendCreated": "Backend was successfully created.",
- "backendName": "Backend name",
+ "backendName": "Backend Name",
"backendEmptyError": "This field can not be empty.",
"backendType": "Backend type",
"backendtypeEmptyError": "Please choose a backend type.",
@@ -178,21 +178,19 @@ export default {
})
}
},
- loadBackend (backendId) {
- this.$http('/api/backends/' + this.backendId).then(response => {
- this.backendName = response.data.name
- this.loadData = true
- this.backendType = response.data.type
- const credentialValues = JSON.parse(response.data.credentials)
- this.$http('/api/backendtypes/' + this.backendType).then(res => {
- var credentials = res.data
+ async loadBackend (backendId) {
+ const response = await this.$http('/api/backends/' + this.backendId)
+ this.backendName = response.data.name
+ this.loadData = true
+ this.backendType = response.data.type
+ const credentialValues = response.data.credentials
+ const res = await this.$http('/api/backendtypes/' + this.backendType)
+ var credentials = res.data
- // Make an array merge to combine the credentials with the values.
- // var mergedCredentials = credentials.map(x => Object.assign(x, credentialValues.find(y => y.id === x.id)))
- var mergedCredentials = mergeObjects(credentials, credentialValues)
- this.elements = mergedCredentials
- })
- })
+ // Make an array merge to combine the credentials with the values.
+ // var mergedCredentials = credentials.map(x => Object.assign(x, credentialValues.find(y => y.id === x.id)))
+ var mergedCredentials = mergeObjects(credentials, credentialValues)
+ this.elements = mergedCredentials
},
completeStepOne () {
// Error handling
@@ -236,7 +234,7 @@ export default {
this.statusLabel = this.$t('error')
this.$snackbar({ color: 'error', text: response.data.error })
}
- // Set item.loading = false to end the loading animation.
+ // End the loading animation.
this.loading = false
})
}
@@ -276,7 +274,8 @@ export default {
function filterData (obj) {
var result = []
- obj.forEach(function (element) {
+ obj.forEach(element => {
+ if (element.disabled) return
const e = { id: element.id, value: element.value }
if (element.elements) {
e.elements = filterData(element.elements)
diff --git a/webapp/src/components/BackendModuleEditDynamicFields.vue b/webapp/src/components/BackendModuleEditDynamicFields.vue
index 0d612f7..1f9fdcd 100644
--- a/webapp/src/components/BackendModuleEditDynamicFields.vue
+++ b/webapp/src/components/BackendModuleEditDynamicFields.vue
@@ -1,8 +1,10 @@
<i18n>
{
"en": {
+ "setPassword": "Set"
},
"de": {
+ "setPassword": "Setzen"
}
}
</i18n>
@@ -10,27 +12,35 @@
<div>
<template v-for="element in elements">
<v-text-field
- v-if="element.type == 'text'"
+ v-if="element.type === 'text'"
:label="element.name"
- :key="element.name"
+ :key="element.id"
v-model="element.value"
:prepend-icon="element.icon"
></v-text-field>
- <v-text-field
- v-else-if="element.type == 'password'"
- :label="element.name"
- :key="element.name"
- :append-icon="element.show ? 'visibility_off' : 'visibility'"
- :type="element.show ? 'text' : 'password'"
- @click:append="element.show = !element.show"
- v-model="element.value"
- :prepend-icon="element.icon"
- ></v-text-field>
- <div v-else-if="element.type == 'switch'" :key="element.name">
- <v-switch
+
+ <div v-else-if="element.type === 'password'" :key="element.id">
+ <v-layout>
+ <v-text-field
+ :disabled="element.disabled === undefined ? init(element) : element.disabled"
+ :ref="element.id"
+ :label="element.name"
+ :key="element.id"
+ :append-icon="element.show ? 'visibility_off' : 'visibility'"
+ :type="element.show ? 'text' : 'password'"
+ @click:append="element.show = !element.show"
+ v-model="element.value"
+ :prepend-icon="element.icon"
+ ></v-text-field>
+ <v-btn @click="setPassword(element)" flat icon><v-icon color="primary">edit</v-icon></v-btn>
+ </v-layout>
+ </div>
+
+ <div v-else-if="element.type === 'switch'" :key="element.id">
+ <v-switch
v-model="element.value"
:label="element.name"
- :key="element.name"
+ :key="element.id"
color="primary"
:prepend-icon="element.icon"
></v-switch>
@@ -38,10 +48,10 @@
</div>
<v-select
menu-props="offsetY"
- v-else-if="element.type == 'select'"
+ v-else-if="element.type === 'select'"
:items="element.items"
:label="element.name"
- :key="element.name"
+ :key="element.id"
v-model="element.value"
:prepend-icon="element.icon"
></v-select>
@@ -59,6 +69,18 @@ export default {
}
},
methods: {
+ init (element) {
+ element.disabled = true
+ element.value = '********'
+ return element.disabled
+ },
+ setPassword (element) {
+ element.disabled = !element.disabled
+ if (element.disabled) element.value = '********'
+ else element.value = ''
+ }
+ },
+ watch: {
},
computed: {
},
diff --git a/webapp/src/components/IpxeBuilderModuleConfig.vue b/webapp/src/components/IpxeBuilderModuleConfig.vue
index aaeb197..6454d41 100644
--- a/webapp/src/components/IpxeBuilderModuleConfig.vue
+++ b/webapp/src/components/IpxeBuilderModuleConfig.vue
@@ -45,25 +45,26 @@
<template>
<div>
-
<v-subheader>{{ $t('ipxe') }}</v-subheader>
- <v-card style="height: 588px;" ref="log" v-on:wheel="manualScroll">
- <RecycleScroller :items="log" :item-size="21" style="height: 100%;">
- <div slot-scope="{ item }" style="height: 21px;">
- <pre :class="item.status + '--text'" style="margin-bottom: 0px"><span>{{ item.date }} {{ item.msg }}</span></pre>
- </div>
- </RecycleScroller>
+ <!--
+ <v-card v-on:wheel="manualScroll">
+ <div>
+ <RecycleScroller :items="log" ref="log" :item-size="21" style="height: 588px;">
+ <div slot-scope="{ item }" style="height: 21px;">
+ <pre :class="item.status + '--text'" style="margin-bottom: 0px"><span>{{ item.date }} {{ item.msg }}</span></pre>
+ </div>
+ </RecycleScroller>
+ </div>
</v-card>
+ -->
<!-- Recycle Scroller or not?! One of them ^v has to go! -->
- <!--
- <v-card class="terminal" ref="log" v-on:wheel="manualScroll">
+ <v-card class="terminal" ref="log" v-on:wheel="manualScroll" style="padding-left: 0px">
<template v-for="(entry, index) in log">
- <pre :class="entry.status + '--text'" style="margin-bottom: 0px" :key="index"><span>{{ entry.date }} {{ entry.msg }}</span></pre>
+ <pre :class="entry.status + '--text'" style="margin-bottom: 0px;" :key="index"><span>{{ entry.date }} {{ entry.msg }}</span></pre>
</template>
</v-card>
- -->
<div class="scroll-overlay non-selectable" v-if="!autoscroll">
<div @click="toTheBottom" style="cursor: pointer; height: 100%; display: flex; align-items: center;">
@@ -221,9 +222,8 @@ export default {
})
},
manualScroll (event) {
- if (event.deltaY === -100) this.autoscroll = false
- // else if (this.$refs.log.$el.scrollTop + 800 >= this.$refs.log.$el.scrollHeight) this.autoscroll = true
- else if (this.$refs.log.$el.firstElementChild.scrollTop + 800 >= this.$refs.log.$el.firstElementChild.scrollHeight) this.autoscroll = true
+ if (event.deltaY < 0) this.autoscroll = false
+ else if (this.$refs.log.$el.scrollTop + 800 >= this.$refs.log.$el.scrollHeight) this.autoscroll = true
},
toTheBottom () {
this.autoscroll = true
@@ -244,10 +244,8 @@ export default {
this.console = result.data
})
- axios.get('/api/ipxe/' + this.ipxeVersion + '/log').then(result => {
+ axios.get('/api/ipxe/' + this.ipxeVersion + '/log?max=500').then(result => {
var lines = result.data.split('\n')
- // Limit the log to 500 lines, to prevent lagging
- lines = lines.slice(-500)
for (var line in lines) {
if (lines[line] === '') continue
var attr = lines[line].split('\t')
@@ -271,9 +269,8 @@ export default {
},
updated () {
if (this.autoscroll) {
- // this.$refs.log.$el.scrollTop = this.$refs.log.$el.scrollHeight
// Use this instead for the virtual scroller
- this.$refs.log.$el.firstElementChild.scrollTop = this.$refs.log.$el.firstElementChild.scrollHeight
+ this.$refs.log.$el.scrollTop = this.$refs.log.$el.scrollHeight
}
}
}
diff --git a/webapp/src/components/UserCreateForm.vue b/webapp/src/components/UserCreateForm.vue
index fc83227..8b31b95 100644
--- a/webapp/src/components/UserCreateForm.vue
+++ b/webapp/src/components/UserCreateForm.vue
@@ -33,29 +33,33 @@
<template>
<v-form class="signup-form" ref="form" v-model="valid">
- <v-text-field
+ <v-text-field class="required"
validate-on-blur
- :label="$t('username')"
v-model="user.username"
:rules="usernameRules"
autocomplete="off"
- ></v-text-field>
+ counter
+ >
+ <template slot="label">{{ $t('username') }} <label class="error--text">*</label></template>
+ </v-text-field>
<v-text-field
validate-on-blur
type="password"
- :label="$t('password')"
v-model="user.password"
:rules="passwordRules"
autocomplete="off"
- ></v-text-field>
+ >
+ <template slot="label">{{ $t('password') }} <label v-if="!id" class="error--text">*</label></template>
+ </v-text-field>
<v-text-field
validate-on-blur
type="password"
- :label="$t('confirmPassword')"
v-model="user.confirmPassword"
:rules="confirmPasswordRules"
autocomplete="off"
- ></v-text-field>
+ >
+ <template slot="label">{{ $t('confirmPassword') }} <label v-if="!id" class="error--text">*</label></template>
+ </v-text-field>
<v-text-field
:label="$t('name')"
autocomplete="off"