Skip to content
Snippets Groups Projects
Verified Commit 3cc83d49 authored by Kotyba Alhaj Taha's avatar Kotyba Alhaj Taha
Browse files

remove old device

parent 70ef0f0f
No related branches found
No related tags found
2 merge requests!92Feature restructure frontend platforms,!82Restructure frontend
Hide whitespace changes
Inline Side-by-side
pages/olddevices/_id.vue deleted 100644 → 0
+ 0
− 649
View file @ 70ef0f0f
<!--
Web client of the Sensor Management System software developed within the
Helmholtz DataHub Initiative by GFZ and UFZ.
Copyright (C) 2020
- Nils Brinckmann (GFZ, nils.brinckmann@gfz-potsdam.de)
- Marc Hanisch (GFZ, marc.hanisch@gfz-potsdam.de)
- Helmholtz Centre Potsdam - GFZ German Research Centre for
Geosciences (GFZ, https://www.gfz-potsdam.de)
Parts of this program were developed within the context of the
following publicly funded projects or measures:
- Helmholtz Earth and Environment DataHub
(https://www.helmholtz.de/en/research/earth_and_environment/initiatives/#h51095)
Licensed under the HEESIL, Version 1.0 or - as soon they will be
approved by the "Community" - subsequent versions of the HEESIL
(the "Licence").
You may not use this work except in compliance with the Licence.
You may obtain a copy of the Licence at:
https://gitext.gfz-potsdam.de/software/heesil
Unless required by applicable law or agreed to in writing, software
distributed under the Licence is distributed on an "AS IS" basis,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied. See the Licence for the specific language governing
permissions and limitations under the Licence.
-->
<template>
<div>
<v-card
outlined
>
<v-tabs-items
v-model="activeTab"
>
<v-tab-item :eager="true">
<v-form ref="basicForm">
<v-card
flat
>
<v-card-title>Device URN: {{ deviceURN }}</v-card-title>
<v-card-text>
<v-row>
<v-col cols="12" md="3">
<v-text-field
v-model="device.persistentIdentifier"
label="Persistent identifier (PID)"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="6">
<v-text-field
v-model="device.shortName"
label="Short name"
required
class="required"
:rules="[rules.required]"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
<v-col cols="12" md="6">
<v-text-field
v-model="device.longName"
label="Long name"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="3">
<v-combobox
v-model="deviceStatusName"
:items="statusNames"
label="Status"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
<v-col cols="12" md="3">
<v-combobox
v-model="deviceTypeName"
:items="deviceTypeNames"
label="Device type"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
<v-col cols="12" md="3">
<v-combobox
v-model="deviceManufacturerName"
:items="manufacturerNames"
label="Manufacturer"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
<v-col cols="12" md="3">
<v-text-field
v-model="device.model"
label="Model"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
</v-row>
<v-divider />
<v-row>
<v-col cols="12" md="9">
<v-textarea
v-model="device.description"
label="Description"
rows="3"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="9">
<v-text-field
v-if="readonly"
v-model="device.website"
label="Website"
placeholder="https://"
type="url"
:readonly="true"
:disabled="true"
>
<template slot="append">
<a v-if="device.website.length > 0" :href="device.website" target="_blank">
<v-icon>
mdi-open-in-new
</v-icon>
</a>
</template>
</v-text-field>
<v-text-field
v-else
v-model="device.website"
label="Website"
placeholder="https://"
type="url"
/>
</v-col>
</v-row>
<v-divider />
<v-row>
<v-col cols="12" md="3">
<v-text-field
v-model="device.serialNumber"
label="Serial number"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
<v-col cols="12" md="3">
<v-text-field
v-model="device.inventoryNumber"
label="Inventory number"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="3">
<v-checkbox
v-model="device.dualUse"
label="Dual use"
hint="can be used for military aims"
:persistent-hint="true"
color="red darken-3"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-form>
</v-tab-item>
<v-tab-item :eager="true">
<v-form ref="contactsForm" @submit.prevent>
<v-card
flat
>
<v-card-title>Device URN: {{ deviceURN }}</v-card-title>
<v-card-text>
<v-row>
<v-col cols="3">
<ContactSelect v-model="device.contacts" :readonly="readonly" label="Add a contact" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-form>
</v-tab-item>
<v-tab-item :eager="true">
<v-card
flat
>
<v-card-title>Device URN: {{ deviceURN }}</v-card-title>
<v-card-text>
<DevicePropertyExpansionPanels
v-model="device.properties"
:readonly="readonly"
:compartments="compartments"
:sampling-medias="samplingMedias"
:properties="properties"
:units="units"
:measured-quantity-units="measuredQuantityUnits"
/>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item :eager="true">
<v-card
flat
>
<v-card-title>Device URN: {{ deviceURN }}</v-card-title>
<v-card-text>
<CustomFieldCards v-model="device.customFields" :readonly="readonly" :rules="rules" />
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item :eager="true">
<v-card
flat
>
<v-card-title>Device URN: {{ deviceURN }}</v-card-title>
<v-card-text>
<AttachmentList v-model="device.attachments" :readonly="readonly" />
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card
flat
>
<v-card-title>Device URN: {{ deviceURN }}</v-card-title>
<v-card-text>
<v-timeline dense clipped>
<v-timeline-item
class="mb-4"
small
>
<v-row justify="space-between">
<v-col cols="2">
2020-04-28 10:15
</v-col>
<v-col cols="10">
<strong>attached to platform XY</strong>
<div>Max M.</div>
</v-col>
</v-row>
</v-timeline-item>
<v-timeline-item
class="mb-4"
color="grey"
icon-color="grey lighten-2"
small
>
<v-row justify="space-between">
<v-col cols="2">
2020-04-28 09:15
</v-col>
<v-col cols="10">
<strong>edited description</strong>
<div>Max M.</div>
</v-col>
</v-row>
</v-timeline-item>
<v-timeline-item
class="mb-4"
color="grey"
icon-color="grey lighten-2"
small
>
<v-row justify="space-between">
<v-col cols="2">
2020-04-20 08:05
</v-col>
<v-col cols="10">
<strong>device created</strong>
<div>Hans H.</div>
</v-col>
</v-row>
</v-timeline-item>
</v-timeline>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
<v-btn
v-if="!editMode && isLoggedIn"
fab
fixed
bottom
right
color="secondary"
@click="onEditButtonClick"
>
<v-icon>
mdi-pencil
</v-icon>
</v-btn>
</v-card>
</div>
</template>
<style lang="scss">
@import "@/assets/styles/_forms.scss";
</style>
<script lang="ts">
import { Component, Watch, mixins } from 'nuxt-property-decorator'
import { Rules } from '@/mixins/Rules'
import { Compartment } from '@/models/Compartment'
import { Device } from '@/models/Device'
import { DeviceType } from '@/models/DeviceType'
import { Manufacturer } from '@/models/Manufacturer'
import { Property } from '@/models/Property'
import { SamplingMedia } from '@/models/SamplingMedia'
import { Status } from '@/models/Status'
import { Unit } from '@/models/Unit'
import { MeasuredQuantityUnit } from '@/models/MeasuredQuantityUnit'
import AttachmentList from '@/components/AttachmentList.vue'
import ContactSelect from '@/components/ContactSelect.vue'
import CustomFieldCards from '@/components/CustomFieldCards.vue'
import DevicePropertyExpansionPanels from '@/components/DevicePropertyExpansionPanels.vue'
@Component({
components: {
ContactSelect,
DevicePropertyExpansionPanels,
CustomFieldCards,
AttachmentList
}
})
// @ts-ignore
export default class DeviceIdPage extends mixins(Rules) {
private numberOfTabs: number = 5
private device: Device = new Device()
private deviceBackup: Device | null = null
private states: Status[] = []
private manufacturers: Manufacturer[] = []
private deviceTypes: DeviceType[] = []
private compartments: Compartment[] = []
private samplingMedias: SamplingMedia[] = []
private properties: Property[] = []
private units: Unit[] = []
private measuredQuantityUnits: MeasuredQuantityUnit[] = []
private editMode: boolean = false
created () {
this.initializeAppBar()
this.registerButtonActions()
}
mounted () {
this.$api.states.findAllPaginated().then((foundStates) => {
this.states = foundStates
}).catch(() => {
this.$store.commit('snackbar/setError', 'Loading of states failed')
})
this.$api.manufacturer.findAllPaginated().then((foundManufacturers) => {
this.manufacturers = foundManufacturers
}).catch(() => {
this.$store.commit('snackbar/setError', 'Loading of manufactures failed')
})
this.$api.deviceTypes.findAllPaginated().then((foundDeviceTypes) => {
this.deviceTypes = foundDeviceTypes
}).catch(() => {
this.$store.commit('snackbar/setError', 'Loading of device types failed')
})
this.$api.compartments.findAllPaginated().then((foundCompartments) => {
this.compartments = foundCompartments
}).catch(() => {
this.$store.commit('snackbar/setError', 'Loading of compartments failed')
})
this.$api.samplingMedia.findAllPaginated().then((foundSamplingMedias) => {
this.samplingMedias = foundSamplingMedias
}).catch(() => {
this.$store.commit('snackbar/setError', 'Loading of sampling medias failed')
})
this.$api.properties.findAllPaginated().then((foundProperties) => {
this.properties = foundProperties
}).catch(() => {
this.$store.commit('snackbar/setError', 'Loading of properties failed')
})
this.$api.units.findAllPaginated().then((foundUnits) => {
this.units = foundUnits
}).catch(() => {
this.$store.commit('snackbar/setError', 'Loading of units failed')
})
this.$api.measuredQuantityUnits.findAllPaginated().then((foundUnits) => {
this.measuredQuantityUnits = foundUnits
}).catch(() => {
this.$store.commit('snackbar/setError', 'Loading of measuredquantityunits failed')
})
this.loadDevice().then((device) => {
if (device === null) {
this.$store.commit('appbar/setTitle', 'Add Device')
}
}).catch(() => {
this.$store.commit('snackbar/setError', 'Loading device failed')
})
}
beforeDestroy () {
this.unregisterButtonActions()
this.$store.dispatch('appbar/setDefaults')
}
registerButtonActions () {
this.$nuxt.$on('AppBarEditModeContent:save-btn-click', () => {
this.save().then(() => {
this.$store.commit('snackbar/setSuccess', 'Save successful')
}).catch(() => {
this.$store.commit('snackbar/setError', 'Save failed')
})
})
this.$nuxt.$on('AppBarEditModeContent:cancel-btn-click', () => {
this.cancel()
})
}
unregisterButtonActions () {
this.$nuxt.$off('AppBarEditModeContent:save-btn-click')
this.$nuxt.$off('AppBarEditModeContent:cancel-btn-click')
}
initializeAppBar () {
this.$store.dispatch('appbar/init', {
tabs: [
'Basic Data',
'Contacts',
'Properties',
'Custom Fields',
'Attachments',
'Events'
],
title: 'Devices',
saveBtnHidden: true,
cancelBtnHidden: true
})
}
get activeTab (): number | null {
return this.$store.state.appbar.activeTab
}
set activeTab (tab: number | null) {
this.$store.commit('appbar/setActiveTab', tab)
}
loadDevice (): Promise<Device|null> {
return new Promise((resolve, reject) => {
const deviceId = this.$route.params.id
if (!deviceId) {
this.createBackup()
this.editMode = true && this.isLoggedIn
resolve(null)
return
}
this.editMode = false
this.$api.devices.findById(deviceId).then((foundDevice) => {
this.device = foundDevice
resolve(foundDevice)
}).catch((_error) => {
reject(_error)
})
})
}
save (): Promise<Device|null> {
return new Promise((resolve, reject) => {
this.$api.devices.save(this.device).then((savedDevice) => {
this.device = savedDevice
this.deviceBackup = null
this.editMode = false
resolve(savedDevice)
}).catch((_error) => {
reject(_error)
})
})
}
cancel () {
this.restoreBackup()
if (this.device.id) {
this.editMode = false
} else {
this.$router.push('/search/devices')
}
}
onEditButtonClick () {
this.createBackup()
this.editMode = true && this.isLoggedIn
}
get deviceURN () {
let partManufacturer = '[manufacturer]'
let partModel = '[model]'
let partSerialNumber = '[serial_number]'
if (this.device.manufacturerUri !== '') {
const manIndex = this.manufacturers.findIndex(m => m.uri === this.device.manufacturerUri)
if (manIndex > -1) {
partManufacturer = this.manufacturers[manIndex].name
} else if (this.device.manufacturerName !== '') {
partManufacturer = this.device.manufacturerName
}
} else if (this.device.manufacturerName !== '') {
partManufacturer = this.device.manufacturerName
}
if (this.device.model !== '') {
partModel = this.device.model
}
if (this.device.serialNumber !== '') {
partSerialNumber = this.device.serialNumber
}
return [partManufacturer, partModel, partSerialNumber].join('_').replace(
' ', '_'
)
}
createBackup () {
this.deviceBackup = Device.createFromObject(this.device)
}
restoreBackup () {
if (!this.deviceBackup) {
return
}
this.device = this.deviceBackup
this.deviceBackup = null
}
get readonly () {
return !this.editMode
}
get manufacturerNames (): string[] {
return this.manufacturers.map(m => m.name)
}
get deviceManufacturerName (): string {
const manufacturerIndex = this.manufacturers.findIndex(m => m.uri === this.device.manufacturerUri)
if (manufacturerIndex > -1) {
return this.manufacturers[manufacturerIndex].name
}
return this.device.manufacturerName
}
set deviceManufacturerName (newName: string) {
this.device.manufacturerName = newName
const manufacturerIndex = this.manufacturers.findIndex(m => m.name === newName)
if (manufacturerIndex > -1) {
this.device.manufacturerUri = this.manufacturers[manufacturerIndex].uri
} else {
this.device.manufacturerUri = newName
}
}
get statusNames (): string[] {
return this.states.map(s => s.name)
}
get deviceTypeNames (): string[] {
return this.deviceTypes.map(t => t.name)
}
get deviceStatusName () {
const statusIndex = this.states.findIndex(s => s.uri === this.device.statusUri)
if (statusIndex > -1) {
return this.states[statusIndex].name
}
return this.device.statusName
}
set deviceStatusName (newName: string) {
this.device.statusName = newName
const statusIndex = this.states.findIndex(s => s.name === newName)
if (statusIndex > -1) {
this.device.statusUri = this.states[statusIndex].uri
} else {
this.device.statusUri = ''
}
}
get deviceTypeName () {
const deviceTypeIndex = this.deviceTypes.findIndex(t => t.uri === this.device.deviceTypeUri)
if (deviceTypeIndex > -1) {
return this.deviceTypes[deviceTypeIndex].name
}
return this.device.deviceTypeName
}
set deviceTypeName (newName: string) {
this.device.deviceTypeName = newName
const deviceTypeIndex = this.deviceTypes.findIndex(t => t.name === newName)
if (deviceTypeIndex > -1) {
this.device.deviceTypeUri = this.deviceTypes[deviceTypeIndex].uri
} else {
this.device.deviceTypeUri = ''
}
}
@Watch('device', { immediate: true, deep: true })
// @ts-ignore
onDeviceChanged (val: Device) {
if (val.id) {
this.$store.commit('appbar/setTitle', val?.shortName || 'Add Device')
}
}
@Watch('editMode', { immediate: true, deep: true })
// @ts-ignore
onEditModeChanged (editMode: boolean) {
this.$store.commit('appbar/setSaveBtnHidden', !editMode)
this.$store.commit('appbar/setCancelBtnHidden', !editMode)
}
get isLoggedIn () {
return this.$store.getters['oidc/isAuthenticated']
}
}
</script>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

A HIFIS Service | Privacy | Imprint | Support | Documentation | Changelog