summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/ConfigChip.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/ConfigChip.vue')
-rw-r--r--webapp/src/components/ConfigChip.vue98
1 files changed, 98 insertions, 0 deletions
diff --git a/webapp/src/components/ConfigChip.vue b/webapp/src/components/ConfigChip.vue
new file mode 100644
index 0000000..f278fe3
--- /dev/null
+++ b/webapp/src/components/ConfigChip.vue
@@ -0,0 +1,98 @@
+<i18n>
+{
+ "en": {
+ "assigned": "Assigned",
+ "active": "Active",
+ "source": "Source",
+ "id": "ID",
+ "name": "Name"
+ },
+ "de": {
+ "assigned": "Zugewiesen",
+ "active": "Aktiv",
+ "source": "Quelle",
+ "id": "ID",
+ "name": "Name"
+ }
+}
+</i18n>
+
+<template>
+ <v-tooltip top open-delay="200">
+ <template #activator="{ on }">
+ <v-chip v-on="on" small :color="color" :text-color="color ? 'white' : ''" :label="isEvent">
+ <span class="chip-text">{{ config.name || config.id }}</span>
+ </v-chip>
+ </template>
+ <div>
+ <div v-if="active" class="success--text" style="text-align: center; font-weight: bold; font-size: 1.2em">{{ $t('active') }}</div>
+ <div v-if="assigned" class="primary--text" style="text-align: center; font-weight: bold; font-size: 1.2em">{{ $t('assigned') }}</div>
+ <div v-if="config.source">
+ <table>
+ <tr><td class="config-source-key">{{ $t('source') }}</td><td>{{ config.source.type }}</td></tr>
+ <tr v-if="config.source.id"><td class="config-source-key">{{ $t('id') }}</td><td>{{ config.source.id }}</td></tr>
+ <tr v-if="config.source.name"><td class="config-source-key">{{ $t('name') }}</td><td>{{ config.source.name }}</td></tr>
+ </table>
+ </div>
+ <div v-else-if="config.configs">
+ <div v-for="(subConfig, index) in config.configs" :key="subConfig.id">
+ <v-divider v-if="index > 0" style="margin-bottom: 4px"></v-divider>
+ <div style="text-align: center; font-weight: bold;">[{{ subConfig.id}}] {{ subConfig.name }}</div>
+ <table>
+ <tr><td class="config-source-key">{{ $t('source') }}</td><td>{{ subConfig.source.type }}</td></tr>
+ <tr v-if="subConfig.source.id"><td class="config-source-key">{{ $t('id') }}</td><td>{{ subConfig.source.id }}</td></tr>
+ <tr v-if="subConfig.source.name"><td class="config-source-key">{{ $t('name') }}</td><td>{{ subConfig.source.name }}</td></tr>
+ </table>
+ </div>
+ </div>
+ <span v-else>{{ config.name || config.id }}</span>
+ </div>
+ </v-tooltip>
+</template>
+
+<script>
+
+export default {
+ name: 'ConfigChip',
+ props: {
+ config: {
+ type: Object,
+ default: () => {}
+ },
+ active: {
+ type: Boolean,
+ default: false
+ },
+ assigned: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data () {
+ return {
+ }
+ },
+ computed: {
+ color () {
+ if (this.assigned) return 'primary'
+ if (this.active) return 'success'
+ return ''
+ },
+ isEvent () {
+ return this.config.source && (this.config.source.type === 'IMPORTANT_EVENT' || this.config.source.type === 'EVENT')
+ }
+ },
+ methods: {
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.config-source-key {
+ vertical-align: top;
+ font-weight: bold;
+ text-align: right;
+ padding-right: 16px;
+}
+</style>