Skip to content
Snippets Groups Projects
Commit 265fe003 authored by Nils Brinckmann's avatar Nils Brinckmann
Browse files

Removed old property page

parent ec86c22e
No related branches found
No related tags found
3 merge requests!90Draft: restructure frontend properties 2,!85Form for measured quantities,!82Restructure frontend
Hide whitespace changes
Inline Side-by-side
pages/devices/_deviceId/properties.vue deleted 100644 → 0
+ 0
− 222
View file @ ec86c22e
<!--
Web client of the Sensor Management System software developed within the
Helmholtz DataHub Initiative by GFZ and UFZ.
Copyright (C) 2020, 2021
- 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>
<ProgressIndicator
v-model="isInProgress"
:dark="isSaving"
/>
<v-card-actions>
<v-spacer />
<v-btn
v-if="isLoggedIn"
:disabled="isEditPropertiesPage"
color="primary"
small
@click="addProperty"
>
Add Property
</v-btn>
</v-card-actions>
<v-expansion-panels
v-model="openedPanels"
multiple
>
<template
v-for="(property, index) in deviceProperties"
>
<NuxtChild
:key="'property-' + property.id"
v-model="deviceProperties[index]"
:compartments="compartments"
:sampling-medias="samplingMedias"
:properties="properties"
:units="units"
:measured-quantity-units="measuredQuantityUnits"
@delete="deleteProperty"
@open="openPanel(index, $event)"
/>
</template>
</v-expansion-panels>
<v-card-actions
v-if="deviceProperties.length > 3"
>
<v-spacer />
<v-btn
v-if="isLoggedIn"
:disabled="isEditPropertiesPage"
color="primary"
small
@click="addProperty"
>
Add Property
</v-btn>
</v-card-actions>
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'nuxt-property-decorator'
import { DeviceProperty } from '@/models/DeviceProperty'
import { Compartment } from '@/models/Compartment'
import { Property } from '@/models/Property'
import { SamplingMedia } from '@/models/SamplingMedia'
import { Unit } from '@/models/Unit'
import { MeasuredQuantityUnit } from '@/models/MeasuredQuantityUnit'
import ProgressIndicator from '@/components/ProgressIndicator.vue'
@Component({
components: {
ProgressIndicator
}
})
export default class DevicePropertiesPage extends Vue {
private openedPanels: number[] = [] as number[]
private deviceProperties: DeviceProperty[] = []
private isLoading = false
private isSaving = false
private compartments: Compartment[] = []
private samplingMedias: SamplingMedia[] = []
private properties: Property[] = []
private units: Unit[] = []
private measuredQuantityUnits: MeasuredQuantityUnit[] = []
async fetch () {
try {
this.isLoading = true
this.deviceProperties = await this.$api.devices.findRelatedDeviceProperties(this.deviceId)
this.isLoading = false
//this.openSelectedPanel()
} catch (e) {
this.$store.commit('snackbar/setError', 'Failed to fetch properties')
this.isLoading = false
}
try {
this.compartments = await this.$api.compartments.findAllPaginated()
this.samplingMedias = await this.$api.samplingMedia.findAllPaginated()
this.properties = await this.$api.properties.findAllPaginated()
this.units = await this.$api.units.findAllPaginated()
this.measuredQuantityUnits = await this.$api.measuredQuantityUnits.findAllPaginated()
} catch (e) {
this.$store.commit('snackbar/setError', 'Loading of system values failed')
}
}
get isInProgress (): boolean {
return this.isLoading || this.isSaving
}
get deviceId (): string {
return this.$route.params.deviceId
}
get isLoggedIn (): boolean {
return this.$store.getters['oidc/isAuthenticated']
}
get isEditPropertiesPage (): boolean {
// eslint-disable-next-line no-useless-escape
const editUrl = '^\/devices\/' + this.deviceId + '\/properties\/([0-9]+)\/edit$'
return !!this.$route.path.match(editUrl)
}
getPropertyIdFromUrl (): string | undefined {
// eslint-disable-next-line no-useless-escape
const editUrl = '^\/devices\/' + this.deviceId + '\/properties\/([0-9]+)\/?.*$'
const matches = this.$route.path.match(editUrl)
if (!matches) {
return
}
return matches[1]
}
openSelectedPanel (): void {
const propertyId = this.getPropertyIdFromUrl()
if (!propertyId) {
return
}
const propertyIndex: number = this.deviceProperties.findIndex((prop: DeviceProperty) => prop.id === propertyId)
if (propertyIndex === -1) {
return
}
this.openedPanels = []
this.openedPanels.push(propertyIndex)
}
addProperty (): void {
const property = new DeviceProperty()
this.isSaving = true
this.$api.deviceProperties.add(this.deviceId, property).then((newProperty: DeviceProperty) => {
this.isSaving = false
this.deviceProperties.push(newProperty)
this.$router.push('/devices/' + this.deviceId + '/properties/' + newProperty.id + '/edit')
}).catch(() => {
this.isSaving = false
this.$store.commit('snackbar/setError', 'Failed to save property')
})
}
deleteProperty (property: DeviceProperty) {
if (!property.id) {
return
}
this.$api.deviceProperties.deleteById(property.id).then(() => {
const index: number = this.deviceProperties.findIndex((p: DeviceProperty) => p.id === property.id)
if (index > -1) {
this.deviceProperties.splice(index, 1)
}
}).catch(() => {
this.$store.commit('snackbar/setError', 'Failed to delete property')
})
}
@Watch('openedPanels', { immediate: true, deep: true })
// @ts-ignore
onPanelsChanged (newPanels, oldPanels) {
console.log(newPanels, oldPanels)
}
@Watch('$route', { immediate: true, deep: true })
// @ts-ignore
onRouteChanged () {
//this.openSelectedPanel()
}
openPanel (panelIndex: number, opened: boolean) {
this.openedPanels = []
if (opened) {
this.openedPanels.push(panelIndex)
}
}
}
</script>
pages/devices/_deviceId/properties/_propertyId.vue deleted 100644 → 0
+ 0
− 158
View file @ ec86c22e
<!--
Web client of the Sensor Management System software developed within the
Helmholtz DataHub Initiative by GFZ and UFZ.
Copyright (C) 2020, 2021
- 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 class="mb-1" style="flex: 0 0 100%; align-self: flex-start;">
<NuxtChild
v-if="isEditModeForProperty"
v-model="property"
:compartments="compartments"
:sampling-medias="samplingMedias"
:properties="properties"
:units="units"
:measured-quantity-units="measuredQuantityUnits"
@open="$emit('open', $event)"
/>
<DevicePropertyExpansionPanel
v-else
v-model="property"
>
<DevicePropertyInfo
v-model="property"
:compartments="compartments"
:sampling-medias="samplingMedias"
:properties="properties"
:units="units"
:measured-quantity-units="measuredQuantityUnits"
/>
</DevicePropertyExpansionPanel>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
import { DeviceProperty } from '@/models/DeviceProperty'
import { Compartment } from '@/models/Compartment'
import { Property } from '@/models/Property'
import { SamplingMedia } from '@/models/SamplingMedia'
import { Unit } from '@/models/Unit'
import { MeasuredQuantityUnit } from '@/models/MeasuredQuantityUnit'
import ProgressIndicator from '@/components/ProgressIndicator.vue'
import DevicePropertyExpansionPanel from '@/components/DevicePropertyExpansionPanel.vue'
import DevicePropertyInfo from '@/components/DevicePropertyInfo.vue'
@Component({
components: {
DevicePropertyExpansionPanel,
DevicePropertyInfo,
ProgressIndicator
}
})
export default class DevicePropertyIdPage extends Vue {
@Prop({
required: true,
type: Object
})
readonly value!: DeviceProperty
/**
* a list of compartments
*/
@Prop({
default: () => [] as Compartment[],
required: false,
type: Array
})
// @ts-ignore
readonly compartments!: Compartment[]
/**
* a list of samplingMedias
*/
@Prop({
default: () => [] as SamplingMedia[],
required: false,
type: Array
})
// @ts-ignore
readonly samplingMedias!: SamplingMedia[]
/**
* a list of properties
*/
@Prop({
default: () => [] as Property[],
required: false,
type: Array
})
// @ts-ignore
readonly properties!: Property[]
/**
* a list of units
*/
@Prop({
default: () => [] as Unit[],
required: false,
type: Array
})
// @ts-ignore
readonly units!: Unit[]
/**
* a list of measuredQuantityUnits
*/
@Prop({
default: () => [] as MeasuredQuantityUnit[],
required: false,
type: Array
})
// @ts-ignore
readonly measuredQuantityUnits!: MeasuredQuantityUnit[]
get property (): DeviceProperty {
return this.value
}
set property (value: DeviceProperty) {
this.$emit('input', value)
}
get deviceId (): string {
return this.$route.params.deviceId
}
get isEditModeForProperty () {
return this.$route.path === '/devices/' + this.deviceId + '/properties/' + this.value.id + '/edit'
}
}
</script>
pages/devices/_deviceId/properties/_propertyId/edit.vue deleted 100644 → 0
+ 0
− 187
View file @ ec86c22e
<!--
Web client of the Sensor Management System software developed within the
Helmholtz DataHub Initiative by GFZ and UFZ.
Copyright (C) 2020, 2021
- 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>
<DevicePropertyExpansionPanel
v-model="valueCopy"
>
<template #actions>
<v-btn
v-if="isLoggedIn"
text
small
nuxt
:to="'/devices/' + deviceId + '/properties'"
>
Cancel
</v-btn>
<v-btn
v-if="isLoggedIn"
color="green"
small
@click.prevent.stop="save()"
>
Apply
</v-btn>
</template>
<DevicePropertyForm
ref="propertyForm"
v-model="valueCopy"
:compartments="compartments"
:sampling-medias="samplingMedias"
:properties="properties"
:units="units"
:measured-quantity-units="measuredQuantityUnits"
/>
</DevicePropertyExpansionPanel>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'nuxt-property-decorator'
import { DeviceProperty } from '@/models/DeviceProperty'
import { Compartment } from '@/models/Compartment'
import { Property } from '@/models/Property'
import { SamplingMedia } from '@/models/SamplingMedia'
import { Unit } from '@/models/Unit'
import { MeasuredQuantityUnit } from '@/models/MeasuredQuantityUnit'
import DevicePropertyExpansionPanel from '@/components/DevicePropertyExpansionPanel.vue'
import DevicePropertyForm from '@/components/DevicePropertyForm.vue'
import ProgressIndicator from '@/components/ProgressIndicator.vue'
@Component({
components: {
DevicePropertyExpansionPanel,
DevicePropertyForm,
ProgressIndicator
}
})
export default class DeviceCustomFieldsShowPage extends Vue {
private isSaving: boolean = false
private valueCopy: DeviceProperty = new DeviceProperty()
@Prop({
required: true,
type: Object
})
readonly value!: DeviceProperty
/**
* a list of compartments
*/
@Prop({
default: () => [] as Compartment[],
required: false,
type: Array
})
// @ts-ignore
readonly compartments!: Compartment[]
/**
* a list of samplingMedias
*/
@Prop({
default: () => [] as SamplingMedia[],
required: false,
type: Array
})
// @ts-ignore
readonly samplingMedias!: SamplingMedia[]
/**
* a list of properties
*/
@Prop({
default: () => [] as Property[],
required: false,
type: Array
})
// @ts-ignore
readonly properties!: Property[]
/**
* a list of units
*/
@Prop({
default: () => [] as Unit[],
required: false,
type: Array
})
// @ts-ignore
readonly units!: Unit[]
/**
* a list of measuredQuantityUnits
*/
@Prop({
default: () => [] as MeasuredQuantityUnit[],
required: false,
type: Array
})
// @ts-ignore
readonly measuredQuantityUnits!: MeasuredQuantityUnit[]
created () {
this.valueCopy = DeviceProperty.createFromObject(this.value)
}
mounted () {
this.$emit('open', true);
(this.$refs.propertyForm as Vue & { focus: () => void}).focus()
}
get deviceId (): string {
return this.$route.params.deviceId
}
get isLoggedIn (): boolean {
return this.$store.getters['oidc/isAuthenticated']
}
save (): void {
this.isSaving = true
this.$api.deviceProperties.update(this.deviceId, this.valueCopy).then((newProperty: DeviceProperty) => {
this.isSaving = false
this.$emit('input', newProperty)
this.$router.push('/devices/' + this.deviceId + '/properties')
}).catch(() => {
this.isSaving = false
this.$store.commit('snackbar/setError', 'Failed to save property')
})
}
@Watch('value', { immediate: true, deep: true })
// @ts-ignore
onValueChanged (val: DeviceProperty) {
this.valueCopy = DeviceProperty.createFromObject(val)
}
}
</script>
pages/devices/_deviceId/properties/index.vue deleted 100644 → 0
+ 0
− 211
View file @ ec86c22e
<!--
Web client of the Sensor Management System software developed within the
Helmholtz DataHub Initiative by GFZ and UFZ.
Copyright (C) 2020, 2021
- 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>
<DevicePropertyExpansionPanel
v-model="value"
>
<template #actions>
<v-btn
v-if="isLoggedIn"
color="primary"
text
small
nuxt
:to="'/devices/' + deviceId + '/properties/' + value.id + '/edit'"
>
Edit
</v-btn>
<v-menu
v-if="isLoggedIn"
close-on-click
close-on-content-click
offset-x
left
z-index="999"
>
<template v-slot:activator="{ on }">
<v-btn
data-role="property-menu"
icon
small
v-on="on"
>
<v-icon
dense
small
>
mdi-dots-vertical
</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
dense
@click="deleteProperty"
>
<v-list-item-content>
<v-list-item-title
class="red--text"
>
<v-icon
left
small
color="red"
>
mdi-delete
</v-icon>
Remove Property
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</template>
<DevicePropertyInfo
v-model="value"
:compartments="compartments"
:sampling-medias="samplingMedias"
:properties="properties"
:units="units"
:measured-quantity-units="measuredQuantityUnits"
/>
</DevicePropertyExpansionPanel>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
import { DeviceProperty } from '@/models/DeviceProperty'
import { Compartment } from '@/models/Compartment'
import { Property } from '@/models/Property'
import { SamplingMedia } from '@/models/SamplingMedia'
import { Unit } from '@/models/Unit'
import { MeasuredQuantityUnit } from '@/models/MeasuredQuantityUnit'
import ProgressIndicator from '@/components/ProgressIndicator.vue'
import DevicePropertyExpansionPanel from '@/components/DevicePropertyExpansionPanel.vue'
import DevicePropertyInfo from '@/components/DevicePropertyInfo.vue'
@Component({
components: {
DevicePropertyExpansionPanel,
DevicePropertyInfo,
ProgressIndicator
}
})
export default class DevicePropertiesShowPage extends Vue {
private isLoading = false
private isSaving = false
/**
* a DeviceProperty
*/
@Prop({
required: true,
type: Object
})
// @ts-ignore
readonly value!: DeviceProperty
/**
* a list of compartments
*/
@Prop({
default: () => [] as Compartment[],
required: false,
type: Array
})
// @ts-ignore
readonly compartments!: Compartment[]
/**
* a list of samplingMedias
*/
@Prop({
default: () => [] as SamplingMedia[],
required: false,
type: Array
})
// @ts-ignore
readonly samplingMedias!: SamplingMedia[]
/**
* a list of properties
*/
@Prop({
default: () => [] as Property[],
required: false,
type: Array
})
// @ts-ignore
readonly properties!: Property[]
/**
* a list of units
*/
@Prop({
default: () => [] as Unit[],
required: false,
type: Array
})
// @ts-ignore
readonly units!: Unit[]
/**
* a list of measuredQuantityUnits
*/
@Prop({
default: () => [] as MeasuredQuantityUnit[],
required: false,
type: Array
})
// @ts-ignore
readonly measuredQuantityUnits!: MeasuredQuantityUnit[]
mounted () {
}
get isInProgress (): boolean {
return this.isLoading || this.isSaving
}
get deviceId (): string {
return this.$route.params.deviceId
}
get isLoggedIn (): boolean {
return this.$store.getters['oidc/isAuthenticated']
}
deleteProperty () {
this.$emit('delete', this.value)
}
}
</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