Skip to content
Snippets Groups Projects
Commit b5a86ef1 authored by Tobias Kuhnert's avatar Tobias Kuhnert
Browse files

removed unused components

parent a69ec115
No related branches found
No related tags found
2 merge requests!296Merge develop for staging release,!225Draft: Resolve "[Refactoring] Improve vuex store usage"
Showing
with 1 addition and 3302 deletions
<!--
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>
<v-form ref="attachmentsForm" @submit.prevent>
<v-row v-if="!readonly">
<v-col cols="12" md="3">
<v-radio-group
v-model="attachmentType"
label="Type"
row
>
<v-radio label="File" value="file" />
<v-radio label="Url" value="url" />
</v-radio-group>
</v-col>
</v-row>
<v-row v-if="!readonly">
<v-col cols="12" md="4">
<v-file-input
v-if="attachmentType === 'file'"
v-model="file"
:accept="mimeTypeList"
label="File"
required
class="required"
:rules="[rules.required]"
show-size
/>
<v-text-field
v-if="attachmentType === 'url'"
v-model="attachment.url"
label="URL"
type="url"
placeholder="http://"
required
class="required"
:rules="[rules.required, rules.validUrl]"
/>
</v-col>
</v-row>
<v-row v-if="!readonly">
<v-col cols="12" md="4">
<v-text-field
v-model="attachment.label"
label="Label"
/>
</v-col>
</v-row>
<v-row v-if="!readonly">
<v-col cols="12">
<v-spacer />
<v-btn
color="primary"
small
data-role="add-attachment"
@click="add()"
>
{{ attachmentType === 'url' ? 'Add' : 'Upload' }}
</v-btn>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-list
two-line
subheader
>
<v-subheader v-if="value.length" inset>
Attachments
</v-subheader>
<AttachmentListItem
v-for="(item, index) in value"
:key="getUrlIndex(item)"
v-model="value[index]"
:readonly="readonly"
>
<template
v-if="!readonly"
#action
>
<v-btn
icon
color="error"
data-role="delete-attachment"
@click="remove(index)"
>
<v-icon>
mdi-delete
</v-icon>
</v-btn>
</template>
</AttachmentListItem>
</v-list>
</v-col>
</v-row>
</v-form>
</template>
<script lang="ts">
/**
* @file provides a component for a listing of attachments
* @author <marc.hanisch@gfz-potsdam.de>
*/
import { Vue, Component, Prop, mixins } from 'nuxt-property-decorator'
import { Rules } from '@/mixins/Rules'
import AttachmentListItem from '@/components/AttachmentListItem.vue'
import { Attachment } from '@/models/Attachment'
/**
* A class component for a list of Attachments and an upload form
* @extends Vue
*/
@Component({
components: { AttachmentListItem }
})
// @ts-ignore
export default class AttachmentList extends mixins(Rules) {
/**
* an Array of Attachments
*/
@Prop({
default: () => [] as Attachment[],
required: true,
type: Array
})
// @ts-ignore
readonly value!: Attachment[]
/**
* whether the component is in readonly mode or not
*/
@Prop({
default: false,
type: Boolean
})
// @ts-ignore
readonly readonly: boolean
private attachment: Attachment = new Attachment()
private attachmentType: string = 'file'
private file: File | null = null
/**
* adds a new Attachment instance
*
* @fires AttachmentList#input
*/
add () {
// see https://stackoverflow.com/a/52109899/86224
if (!(this.$refs.attachmentsForm as Vue & { validate: () => boolean }).validate()) {
return
}
(this.$refs.attachmentsForm as Vue & { resetValidation: () => boolean }).resetValidation()
/**
* fires an input event
* @event AttachmentList#input
* @type {Attachment[]}
*/
this.$emit('input', [
...this.value,
this.attachment
] as Attachment[])
this.attachment = new Attachment()
this.file = null
}
/**
* removes an Attachment instance
*
* @param {number} index - the index of the attachment to remove
* @fires AttachmentList#input
*/
remove (index: number) {
if (this.value[index]) {
const properties = [...this.value] as Attachment[]
properties.splice(index, 1)
/**
* fires an input event
* @event AttachmentList#input
* @type {Attachment[]}
*/
this.$emit('input', properties)
}
}
/**
* returns a list of MimeTypes, seperated by ,
*
* @return {string} a list of MimeTypes
*/
get mimeTypeList (): string {
return Object.keys(Attachment.mimeTypes).join(',')
}
/**
* returns a unique index for the attachment in the list
*
* @param {Attachment} item - the attachment for that the index shall be created
* @return {string} the index in the form url + '#' + <count of url in the list if gt 0>
*/
getUrlIndex (item: Attachment) {
const cnt: number = this.value.filter((attachment: Attachment): boolean => item.url === attachment.url).indexOf(item)
return cnt > 0 ? item.url + '#' + cnt : item.url
}
}
</script>
<!--
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>
<v-list-item>
<v-list-item-avatar>
<v-icon large>
{{ filetypeIcon }}
</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-subtitle>
{{ filename }}, uploaded at {{ uploadedDateTime }}
</v-list-item-subtitle>
<v-list-item-title v-if="readonly">
<a :href="value.url" target="_blank">{{ value.label }}</a>
</v-list-item-title>
<v-list-item-title v-else>
<v-text-field
:value="value.label"
@input="update('label', $event)"
/>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action
v-if="!readonly"
>
<v-btn
icon
color="primary"
:href="value.url"
target="_blank"
>
<v-icon>
mdi-open-in-new
</v-icon>
</v-btn>
</v-list-item-action>
<v-list-item-action>
<slot name="action" />
</v-list-item-action>
</v-list-item>
</template>
<script lang="ts">
/**
* @file provides a component for an attachment
* @author <marc.hanisch@gfz-potsdam.de>
*/
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import { Attachment } from '@/models/Attachment'
/**
* A class component that displays a single attached file
* @extends Vue
*/
@Component
// @ts-ignore
export default class AttachmentListItem extends Vue {
/**
* an Attachment
*/
@Prop({
required: true,
type: Attachment
})
// @ts-ignore
readonly value!: Attachment
/**
* whether the component is in readonly mode or not
*/
@Prop({
default: false,
type: Boolean
})
// @ts-ignore
readonly readonly: boolean
/**
* returns a filename from a full filepath
*
* @return {string} the filename
*/
get filename (): string {
const UNKNOWN_FILENAME = 'unknown filename'
if (this.value.url === '') {
return UNKNOWN_FILENAME
}
const paths = this.value.url.split('/')
if (!paths.length) {
return UNKNOWN_FILENAME
}
// @ts-ignore
return paths.pop()
}
/**
* returns the timestamp of the upload date
*
* @TODO this must be implemented when the file API is ready
* @return {string} a readable timestamp
*/
get uploadedDateTime (): string {
return '2020-06-17 16:35 (TODO)'
}
/**
* returns a material design icon name based on the file type extension
*
* @return {string} a material design icon name
*/
get filetypeIcon (): string {
let extension = ''
const paths = this.filename.split('.')
if (paths.length) {
// @ts-ignore
extension = paths.pop().toLowerCase()
}
switch (extension) {
case 'png':
case 'jpg':
case 'jpeg':
return 'mdi-image'
case 'pdf':
return 'mdi-file-pdf-box'
case 'doc':
case 'docx':
case 'odt':
return 'mdi-text-box'
default:
return 'mdi-paperclip'
}
}
/**
* update the internal model at a given key
*
* @param {string} key - a path to the property to set
* @param {string} value - the value to set
* @fires AttachmentListItem#input
*/
update (key: string, value: string) {
const newObj: Attachment = Attachment.createFromObject(this.value)
switch (key) {
case 'url':
newObj.url = value
break
case 'label':
newObj.label = value
break
default:
throw new TypeError('key ' + key + ' is not valid')
}
/**
* fires an input event
* @event AttachmentListItem#input
* @type {Attachment}
*/
this.$emit('input', newObj)
}
}
</script>
<!--
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>
<v-treeview
:items="items"
:activatable="false"
:hoverable="false"
rounded
open-all
>
<template #prepend="{ item }">
<v-icon v-if="item.isPlatform()">
mdi-rocket-outline
</v-icon>
<v-icon v-else>
mdi-network-outline
</v-icon>
</template>
</v-treeview>
<p
class="font-italic text--secondary"
>
This is a demo hierarchy. Replace it with your own platform and devices.
</p>
</div>
</template>
<script lang="ts">
/**
* @file provides a component to select platforms and devices for a configuration
* @author <marc.hanisch@gfz-potsdam.de>
*/
import { Vue, Component } from 'nuxt-property-decorator'
import { DateTime } from 'luxon'
import { Contact } from '@/models/Contact'
import { Device } from '@/models/Device'
import { DeviceMountAction } from '@/models/DeviceMountAction'
import { DeviceUnmountAction } from '@/models/DeviceUnmountAction'
import { Platform } from '@/models/Platform'
import { PlatformMountAction } from '@/models/PlatformMountAction'
import { PlatformUnmountAction } from '@/models/PlatformUnmountAction'
import { ConfigurationsTreeNode } from '@/viewmodels/ConfigurationsTreeNode'
import { buildConfigurationTree } from '@/modelUtils/mountHelpers'
/**
* A class component to select platforms and devices for a configuration
* @extends Vue
*/
@Component
// @ts-ignore
export default class ConfigurationsDemoTreeView extends Vue {
createPlatform (id: string) {
const p = new Platform()
p.id = id
p.shortName = 'Platform ' + id
return p
}
createDevice (id: string) {
const d = new Device()
d.id = id
d.shortName = 'Device ' + id
return d
}
private platforms: Platform[] = [
this.createPlatform('1'),
this.createPlatform('2'),
this.createPlatform('3')
]
private devices: Device[] = [
this.createDevice('1'),
this.createDevice('2'),
this.createDevice('3')
]
/**
* returns a demo tree
*
* @return {ConfigurationsTreeNode[]} a demo tree
*/
get items (): ConfigurationsTreeNode[] {
const demoContact = new Contact()
demoContact.givenName = 'Max'
demoContact.familyName = 'Mustermann'
demoContact.email = 'max.mustermann@mail.org'
const platformMountActions = [
PlatformMountAction.createFromObject({
id: '',
platform: this.platforms[0],
parentPlatform: null,
date: DateTime.utc(2020, 10, 11),
offsetX: 0,
offsetY: 0,
offsetZ: 0,
contact: demoContact,
description: 'Mounted platform 1'
}),
PlatformMountAction.createFromObject({
id: '',
platform: this.platforms[1],
parentPlatform: this.platforms[0],
date: DateTime.utc(2020, 10, 13),
offsetX: 0,
offsetY: 0,
offsetZ: 0,
contact: demoContact,
description: 'Mounted platform 2 on platform 1'
})
]
const platformUnmountActions = [
PlatformUnmountAction.createFromObject({
id: '',
platform: this.platforms[1],
date: DateTime.utc(2020, 10, 19),
contact: demoContact,
description: 'Unmounted platform 2'
})
]
const deviceMountActions = [
DeviceMountAction.createFromObject({
id: '',
device: this.devices[0],
parentPlatform: this.platforms[0],
date: DateTime.utc(2020, 10, 12),
offsetX: 0,
offsetY: 0,
offsetZ: 0,
contact: demoContact,
description: 'Mounted device 1 on platform 1'
}),
DeviceMountAction.createFromObject({
id: '',
device: this.devices[1],
parentPlatform: this.platforms[1],
date: DateTime.utc(2020, 10, 15),
offsetX: 0,
offsetY: 0,
offsetZ: 0,
contact: demoContact,
description: 'Mounted device 2 on platform 2'
}),
DeviceMountAction.createFromObject({
id: '',
device: this.devices[2],
parentPlatform: null,
date: DateTime.utc(2020, 10, 17),
offsetX: 0,
offsetY: 0,
offsetZ: 0,
contact: demoContact,
description: 'Mounted device 3'
})
]
const deviceUnmountActions = [
DeviceUnmountAction.createFromObject({
id: '',
device: this.devices[1],
date: DateTime.utc(2020, 10, 16),
contact: demoContact,
description: 'Unmounted device 2'
})
]
const tree = buildConfigurationTree({
platformMountActions,
platformUnmountActions,
deviceMountActions,
deviceUnmountActions
}, DateTime.utc(2020, 10, 17))
return tree.toArray()
}
}
</script>
<!--
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>
Add platforms and devices:
<v-row v-if="searchOptions">
<v-col cols="12" md="3">
<v-select
v-model="searchOptions.searchType"
label="Type"
:items="searchTypes"
/>
</v-col>
<v-col cols="12" md="6">
<v-text-field
v-model="searchOptions.text"
label="Name"
@keydown.enter="search"
/>
</v-col>
<v-col cols="12" md="3">
<v-btn
color="primary"
@click="search"
>
search
</v-btn>
</v-col>
</v-row>
<div v-if="loading">
<div class="text-center pt-2">
<v-progress-circular indeterminate />
</div>
</div>
<div v-else>
<v-row v-if="searchedForPlatforms && platforms.length">
<v-col cols="12">
<v-expansion-panels
v-model="selectedPlatform"
>
<v-expansion-panel
v-for="item in platforms"
:key="'platform-' + item.id"
>
<v-expansion-panel-header>
{{ item.shortName }} {{ isPlatformUsedFunc(item) ? ' - already mounted': '' }}
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-expansion-panels multiple>
<v-expansion-panel>
<v-expansion-panel-header>
Platform overview
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row>
<v-col>
<label>Long name</label>
</v-col>
<v-col>
{{ item.longName }}
</v-col>
</v-row>
<v-row>
<v-col>
<label>URN</label>
</v-col>
<v-col>
(TODO)
</v-col>
</v-row>
<v-row>
<v-col>
<v-btn :href="'platforms/' + item.id" target="_blank" :disabled="false">
<v-icon>
mdi-open-in-new
</v-icon>
Open in new tab
</v-btn>
</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel :disabled="isPlatformUsedFunc(item)">
<v-expansion-panel-header class="mount-expansion-panel">
Mount
</v-expansion-panel-header>
<v-expansion-panel-content>
<ConfigurationsPlatformDeviceMountForm
ref="mountForm"
data-role-btn="add-platform"
:readonly="isPlatformUsedFunc(item)"
:contacts="contacts"
:current-user-mail="currentUserMail"
@add="addPlatform(item, $event)"
/>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
</v-row>
<v-row v-else-if="searchedForPlatforms && !platforms.length">
<p class="text-center">
There are no platforms that match your search criteria.
</p>
</v-row>
<v-row v-if="searchedForDevices && devices.length">
<v-col cols="12">
<v-expansion-panels
v-model="selectedDevice"
>
<v-expansion-panel
v-for="item in devices"
:key="'device-' + item.id"
>
<v-expansion-panel-header>
{{ item.shortName }} {{ isDeviceUsedFunc(item) ? ' - already mounted': '' }}
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-expansion-panels multiple>
<v-expansion-panel>
<v-expansion-panel-header>
Device overview
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row>
<v-col>
<label>Long name</label>
</v-col>
<v-col>
{{ item.longName }}
</v-col>
</v-row>
<v-row>
<v-col>
<label>URN</label>
</v-col>
<v-col>
(TODO)
</v-col>
</v-row>
<v-row>
<v-col>
<v-btn :href="'devices/' + item.id" target="_blank" :disabled="false">
<v-icon>
mdi-open-in-new
</v-icon>
Open in new tab
</v-btn>
</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel :disabled="isDeviceUsedFunc(item)">
<v-expansion-panel-header class="mount-expansion-panel">
Mount
</v-expansion-panel-header>
<v-expansion-panel-content>
<ConfigurationsPlatformDeviceMountForm
data-role-btn="add-device"
:readonly="isDeviceUsedFunc(item)"
:contacts="contacts"
:current-user-mail="currentUserMail"
@add="addDevice(item, $event)"
/>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
</v-row>
<v-row v-else-if="searchedForDevices && !devices.length">
<p class="text-center">
There are no devices that match your search criteria.
</p>
</v-row>
</div>
</div>
</template>
<script lang="ts">
/**
* @file provides a component to select platforms and devices for a configuration
* @author <marc.hanisch@gfz-potsdam.de>
*/
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import { DateTime } from 'luxon'
import ConfigurationsPlatformDeviceMountForm from '@/components/ConfigurationsPlatformDeviceMountForm.vue'
import { Contact } from '@/models/Contact'
import { Platform } from '@/models/Platform'
import { Device } from '@/models/Device'
import { IMountData } from '@/viewmodels/IMountData'
enum SearchType {
Platform = 'Platform',
Device = 'Device'
}
interface ISearchOptions {
searchType: SearchType
text: string
}
type IsPlatformUsedFunc = (p: Platform) => boolean
type IsDeviceUsedFunc = (d: Device) => boolean
/**
* A class component to search for platforms and devices
* @extends Vue
*/
@Component({
components: {
ConfigurationsPlatformDeviceMountForm
}
})
// @ts-ignore
export default class ConfigurationsPlatformDeviceSearch extends Vue {
private searchOptions: ISearchOptions = {
searchType: SearchType.Platform,
text: ''
}
private platformsResult: Platform[] = [] as Platform[]
private devicesResult: Device[] = [] as Device[]
private selectedPlatform = -1
private selectedDevice = -1
private loading = false
private searchedForPlatforms = false
private searchedForDevices = false
/**
* a function that returns if a device is already present in a tree or not
*/
@Prop({
default: () => false,
type: Function
})
// @ts-ignore
readonly isDeviceUsedFunc: IsDeviceUsedFunc
/**
* a function that returns if a platform is already present in a tree or not
*/
@Prop({
default: () => false,
type: Function
})
// @ts-ignore
readonly isPlatformUsedFunc: IsPlatformUsedFunc
@Prop({
default: DateTime.utc(),
type: DateTime
})
readonly selectedDate!: DateTime
@Prop({
default: () => [],
type: Array
})
readonly contacts!: Contact[]
@Prop({
type: String
})
// @ts-ignore
readonly currentUserMail: string | null
get searchTypes (): string[] {
return [SearchType.Platform, SearchType.Device]
}
/**
* returns a list of platforms
*
* @return {Platform[]} an Array of platforms
*/
get platforms (): Platform[] {
return this.platformsResult
}
/**
* sets the list of platforms
*
* when the list is not empty, the list of devices gets cleared
*
* @param {Platform[]} platforms - an Array of platforms to set
*/
set platforms (platforms: Platform[]) {
this.platformsResult = platforms
if (platforms.length) {
this.devicesResult = [] as Device[]
}
}
/**
* returns a list of devices
*
* @return {Device[]} an Array of devices
*/
get devices (): Device[] {
return this.devicesResult
}
/**
* sets the list of devices
*
* when the list is not empty, the list of platforms gets cleared
*
* @param {Device[]} devices - an Array of devices to set
*/
set devices (devices: Device[]) {
this.devicesResult = devices
if (devices.length) {
this.platformsResult = [] as Platform[]
}
}
/**
* searches for platforms or devices depending on the searchType
*
* @async
*/
async search () {
this.loading = true
this.searchedForPlatforms = false
this.searchedForDevices = false
switch (this.searchOptions.searchType) {
case SearchType.Platform:
this.platforms = await this.$api.platforms.newSearchBuilder()
.withText(this.searchOptions.text)
.build()
.findMatchingAsList()
this.searchedForPlatforms = true
break
case SearchType.Device:
this.devices = await this.$api.devices.newSearchBuilder()
.withText(this.searchOptions.text)
.build()
.findMatchingAsList()
this.searchedForDevices = true
break
default:
throw new TypeError('search function not defined for unknown value')
}
this.loading = false
}
/**
* triggers an add-platform event
*
* @param {Platform} platform - the platform to add
* @fires ConfigurationsPlatformDeviceSearch#add-platform
*/
addPlatform (platform: Platform, mountData: IMountData) {
/**
* fires an add-plaform event
* @event ConfigurationsPlatformDeviceSearch#add-platform
* @type {Platform}
*/
this.$emit(
'add-platform',
platform,
mountData.offsetX,
mountData.offsetY,
mountData.offsetZ,
mountData.contact,
mountData.description
)
}
/**
* triggers an add-device event
*
* @param {Device} device - the device to add
* @fires ConfigurationsPlatformDeviceSearch#add-device
*/
addDevice (device: Device, mountData: IMountData) {
/**
* fires an add-device event
* @event ConfigurationsPlatformDeviceSearch#add-device
* @type {Device}
*/
this.$emit(
'add-device',
device,
mountData.offsetX,
mountData.offsetY,
mountData.offsetZ,
mountData.contact,
mountData.description
)
}
}
</script>
<!--
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>
<v-card
v-if="value"
outlined
>
<v-breadcrumbs :items="breadcrumbs" divider=">" />
<v-expansion-panels multiple>
<v-expansion-panel>
<v-expansion-panel-header>
<span v-if="value.isPlatform()">
Platform overview
</span>
<span v-else>
Device overview
</span>
</v-expansion-panel-header>
<v-expansion-panel-content>
<template v-if="description">
{{ description }}
</template>
<template v-else-if="value.isPlatform()">
<span class="text--disabled">The selected platform has no description.</span>
</template>
<template v-else-if="value.isDevice()">
<span class="text--disabled">The selected device has no description.</span>
</template>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>
Mount information
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-form
ref="mountUpdateForm"
@submit.prevent
>
<v-card-text>
<v-row>
<v-col>
<label>Mounted:</label>
{{ value.unpack().date | dateToDateTimeString }}
<span class="text-caption text--secondary">(UTC)</span>
</v-col>
</v-row>
<v-row>
<v-col
cols="12"
md="3"
>
<v-text-field
v-model.number="offsetX"
label="Offset (x)"
type="number"
step="any"
:readonly="readonly"
:disabled="readonly"
required
:rules="[rules.numericRequired]"
class="m-annotated"
@wheel.prevent
/>
</v-col>
<v-col
cols="12"
md="3"
>
<v-text-field
v-model.number="offsetY"
label="Offset (y)"
type="number"
step="any"
:readonly="readonly"
:disabled="readonly"
required
:rules="[rules.numericRequired]"
class="m-annotated"
@wheel.prevent
/>
</v-col>
<v-col
cols="12"
md="3"
>
<v-text-field
v-model.number="offsetZ"
label="Offset (z)"
type="number"
step="any"
:readonly="readonly"
:disabled="readonly"
required
:rules="[rules.numericRequired]"
class="m-annotated"
@wheel.prevent
/>
</v-col>
</v-row>
<v-row>
<v-col>
<v-autocomplete
v-model="mountContact"
:items="contacts"
label="Contact"
clearable
required
:rules="[rules.required]"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
<v-col>
<v-btn v-if="!readonly" small @click="selectCurrentUserAsMountContact">
Set current user
</v-btn>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="12">
<v-textarea
v-model="mountDescription"
label="Description"
rows="3"
:readonly="readonly"
:disabled="readonly"
/>
</v-col>
</v-row>
</v-card-text>
</v-form>
<div
v-if="value && !readonly"
>
<v-btn @click="overwriteExistingMountAction">
Update existing mount
</v-btn>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel v-if="!readonly">
<v-expansion-panel-header class="unmount-expansion-panel">
Unmount
</v-expansion-panel-header>
<v-expansion-panel-content>
<ConfigurationsSelectedItemUnmountForm
v-if="value"
:key="valueKey"
:contacts="contacts"
:readonly="readonly"
:current-user-mail="currentUserMail"
@remove="remove"
/>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-card>
</template>
<script lang="ts">
/**
* @file provides a component to display information about a selected tree node
* @author <marc.hanisch@gfz-potsdam.de>
*/
import { Vue, Component, Prop, Watch, mixins } from 'nuxt-property-decorator'
import { DateTime } from 'luxon'
// @ts-ignore
import ConfigurationsSelectedItemUnmountForm from '@/components/ConfigurationsSelectedItemUnmountForm.vue'
import { Contact } from '@/models/Contact'
import { Rules } from '@/mixins/Rules'
import { ConfigurationsTreeNode } from '@/viewmodels/ConfigurationsTreeNode'
import { DeviceNode } from '@/viewmodels/DeviceNode'
import { IUnmountData } from '@/viewmodels/IUnmountData'
import { PlatformNode } from '@/viewmodels/PlatformNode'
import { dateToDateTimeStringHHMM, dateToDateTimeString } from '@/utils/dateHelper'
/**
* A class component to display information about a selected tree node
* @extends Vue
*/
@Component({
components: {
ConfigurationsSelectedItemUnmountForm
},
filters: {
dateToDateTimeStringHHMM,
dateToDateTimeString
}
})
// @ts-ignore
export default class ConfigurationsSelectedItem extends mixins(Rules) {
private offsetX: number = 0.0
private offsetY: number = 0.0
private offsetZ: number = 0.0
private mountContact: Contact | null = null
private mountDescription: string = ''
/**
* the selected node
*/
@Prop({
default: null,
type: Object
})
// @ts-ignore
readonly value: ConfigurationsTreeNode | null
@Prop({
default: DateTime.utc(),
type: DateTime
})
readonly selectedDate!: DateTime
/**
* the breadcrumbs string array
*/
@Prop({
default: () => [],
type: Array
})
// @ts-ignore
readonly breadcrumbs: string[]
@Prop({
default: () => [],
type: Array
})
readonly contacts!: Contact[]
/**
* whether the component is in readonly mode or not
*/
@Prop({
default: false,
type: Boolean
})
// @ts-ignore
readonly readonly: boolean
@Prop({
type: String
})
// @ts-ignore
readonly currentUserMail: string | null
/**
* returns the description of a node
*
* @return {string} the description
*/
get description (): string {
if (!this.value) {
return ''
}
if (this.value.isPlatform()) {
return (this.value as PlatformNode).unpack().platform.description
}
return (this.value as DeviceNode).unpack().device.description
}
get isMountedOnSelectedDate (): boolean {
if (!this.value) {
return false
}
const value = this.value
const node = value.unpack()
const date = node.date
return date.equals(this.selectedDate)
}
get valueKey (): string {
if (this.value && this.value.id) {
return this.value.id
}
return 'no-key'
}
/**
* triggers a remove event for a node
*
* @fires ConfigurationsSelectedItem#remove
*/
remove (unmountData: IUnmountData) {
/**
* fires an input event
* @event ConfigurationsSelectedItem#remove
* @type {ConfigurationsTreeNode}
*/
this.$emit('remove', this.value, unmountData.contact, unmountData.description)
}
overwriteExistingMountAction () {
if (this.validateMountUpdateForm()) {
this.$emit(
'overwriteExistingMountAction',
this.value,
{
offsetX: this.offsetX,
offsetY: this.offsetY,
offsetZ: this.offsetZ,
contact: this.mountContact,
description: this.mountDescription
}
)
} else {
this.$store.commit('snackbar/setError', 'Please correct the errors')
}
}
selectCurrentUserAsMountContact () {
if (this.currentUserMail) {
const userIndex = this.contacts.findIndex(c => c.email === this.currentUserMail)
if (userIndex > -1) {
this.mountContact = this.contacts[userIndex]
return
}
}
this.$store.commit('snackbar/setError', 'No contact found with your data')
}
@Watch('value')
onValueChange (node: ConfigurationsTreeNode | null) {
this.offsetX = node?.unpack().offsetX || 0.0
this.offsetY = node?.unpack().offsetY || 0.0
this.offsetZ = node?.unpack().offsetZ || 0.0
this.mountContact = node?.unpack().contact || null
this.mountDescription = node?.unpack().description || ''
}
validateMountUpdateForm (): boolean {
return (this.$refs.mountUpdateForm as Vue & { validate: () => boolean }).validate()
}
}
</script>
<style scoped>
/* the m-annotated class is to add the unit (meters) to the fields */
.m-annotated::after {
content: " m";
white-space: pre;
}
</style>
<!--
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>
<EntitySelect
v-model="wrappedValue"
:readonly="readonly"
:fetch-function="findAllContacts"
:label="label"
color="indigo"
avatar-icon="mdi-account-circle"
/>
</template>
<script lang="ts">
/**
* @file provides a component to select contacts
* @author <marc.hanisch@gfz-potsdam.de>
* @author <nils.brinckmann@gfz-potsdam.de>
*/
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import EntitySelect from '@/components/EntitySelect.vue'
import { Contact } from '@/models/Contact'
type ContactsLoaderFunction = () => Promise<Contact[]>
/**
* A class component to select contacts
* @extends Vue
*/
@Component({
components: { EntitySelect }
})
// @ts-ignore
export default class ContactSelect extends Vue {
private contacts: Contact[] = []
/**
* a list of Contacts
*/
@Prop({
default: () => [] as Contact[],
required: true,
type: Array
})
// @ts-ignore
readonly value!: Contact[]
/**
* whether the component is in readonly mode or not
*/
@Prop({
default: false,
type: Boolean
})
// @ts-ignore
readonly readonly: boolean
/**
* the label of the component
*/
@Prop({
required: true,
type: String
})
readonly label!: string
/**
* fetches all contacts from the API
*
* @return {ContactsLoaderFunction} a function that returns a promise which returns a list of contacts
*/
get findAllContacts (): ContactsLoaderFunction {
return () => { return this.$api.contacts.findAll() }
}
/**
* returns the list of contacts
*
* @return {Contact[]} a list of contacts
*/
get wrappedValue () {
return this.value
}
/**
* triggers an input event when the list of contacts has changed
*
* @param {Contact[]} newValue - a list of contacts
* @fires ContactSelect#input
*/
set wrappedValue (newValue) {
/**
* fires an input event
* @event ContactSelect#input
* @type {Contact[]}
*/
this.$emit('input', newValue)
}
}
</script>
<!--
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>
<v-card
class="mb-2"
>
<v-card-text>
<v-row
no-gutters
>
<v-col
cols="12"
md="2"
>
<label>Key:</label>
{{ value.key }}
</v-col>
<v-col
cols="12"
md="8"
>
<label>Value:</label>
{{ value.value }}
</v-col>
<v-col
cols="12"
md="2"
class="text-right"
align-self="center"
>
<slot name="actions" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
import { CustomTextField } from '@/models/CustomTextField'
@Component
export default class CustomFieldCard extends Vue {
@Prop({
required: true,
type: Object
})
readonly value!: CustomTextField
get field (): CustomTextField {
return this.value
}
set field (value: CustomTextField) {
this.$emit('input', value)
}
get deviceId (): string {
return this.$route.params.deviceId
}
}
</script>
<!--
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>
<v-card
class="mb-2"
>
<v-card-text>
<v-row
dense
>
<v-col
cols="12"
md="2"
>
<v-text-field
ref="keyfield"
label="Key"
:value="value.key"
required
class="required"
:rules="[rules.required]"
@input="update('key', $event)"
/>
</v-col>
<v-col
cols="12"
md="8"
>
<v-text-field
label="Value"
:value="value.value"
@input="update('value', $event)"
/>
</v-col>
<v-col
cols="12"
md="2"
class="text-right"
align-self="center"
>
<slot name="actions" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<script lang="ts">
/**
* @file provides a component for a custom field which consists of an key and a value
* @author <marc.hanisch@gfz-potsdam.de>
*/
import { Component, Prop, Vue, mixins } from 'nuxt-property-decorator'
import { Rules } from '@/mixins/Rules'
import { CustomTextField } from '@/models/CustomTextField'
/**
* A class component for a custom field
* @extends Vue
*/
@Component
// @ts-ignore
export default class CustomFieldCardForm extends mixins(Rules) {
/**
* a CustomTextField
*/
@Prop({
default: () => new CustomTextField(),
required: true,
type: CustomTextField
})
// @ts-ignore
readonly value!: CustomTextField
/**
* updates a copy of the internal model at a given key and triggers an input event
*
* @param {string} key - a path to the property to set
* @param {string} value - the value to set
* @fires CustomFieldForm#input
*/
update (key: string, value: string) {
const newObj: CustomTextField = CustomTextField.createFromObject(this.value)
switch (key) {
case 'key':
newObj.key = value
break
case 'value':
newObj.value = value
break
default:
throw new TypeError('key ' + key + ' is not valid')
}
/**
* input event
* @event CustomTextFieldForm#input
* @type {CustomTextField}
*/
this.$emit('input', newObj)
}
focus (): void {
(this.$refs.keyfield as Vue & { focus: () => void }).focus()
}
}
</script>
<!--
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>
<v-form ref="customFieldsForm">
<v-btn
v-if="!readonly"
small
color="primary"
data-role="add-field"
@click="addField"
>
add Custom Field
</v-btn>
<br><br>
<template
v-for="(item, index) in value"
>
<v-card
:key="'customfield-' + index"
>
<v-card-text>
<CustomFieldForm
v-model="value[index]"
:readonly="readonly"
>
<template #actions>
<v-btn
v-if="!readonly"
icon
color="error"
data-role="delete-field"
@click="removeField(index)"
>
<v-icon>
mdi-delete
</v-icon>
</v-btn>
</template>
</CustomFieldForm>
</v-card-text>
</v-card>
<br
:key="'br-' + index"
>
</template>
</v-form>
</template>
<script lang="ts">
/**
* @file provides a component for collections of CustomFieldForms
* @author <marc.hanisch@gfz-potsdam.de>
*/
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import CustomFieldForm from '@/components/CustomFieldForm.vue'
import { CustomTextField } from '@/models/CustomTextField'
/**
* A class component that lists CustomFieldForms as Cards
* @extends Vue
*/
@Component({
components: { CustomFieldForm }
})
// @ts-ignore
export default class CustomFieldCards extends Vue {
/**
* a list of CustomTextFields
*/
@Prop({
default: () => [] as CustomTextField[],
required: true,
type: Array
})
// @ts-ignore
readonly value!: CustomTextField[]
/**
* whether the component is in readonly mode or not
*/
@Prop({
default: false,
type: Boolean
})
// @ts-ignore
readonly readonly: boolean
/**
* adds a new CustomTextField instance and triggers an event
*
* @fires CustomFieldCards#input
*/
addField () {
/**
* fires an input event
* @event CustomFieldCards#input
* @type {CustomTextField[]}
*/
this.$emit('input', [
...this.value,
new CustomTextField()
] as CustomTextField[])
}
/**
* removes a CustomTextField instance and triggers an event
*
* @param {CustomTextField} index - the index of the property to remove
* @fires CustomFieldCards#input
*/
removeField (index: number) {
if (this.value[index]) {
const properties = [...this.value] as CustomTextField[]
properties.splice(index, 1)
/**
* Update event
* @event CustomFieldCards#input
* @type {CustomTextField[]}
*/
this.$emit('input', properties)
}
}
}
</script>
<!--
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>
<v-menu
v-if="!readonly"
v-model="dateMenu"
:close-on-content-click="false"
:nudge-right="40"
transition="scale-transition"
offset-y
min-width="290px"
>
<template #activator="{ on, attrs }">
<v-text-field
:value="getDate()"
:rules="rules"
v-bind="attrs"
:label="label"
:clearable="clearable"
prepend-icon="mdi-calendar-range"
readonly
v-on="on"
@click:clear="setDate(null)"
/>
</template>
<v-date-picker
:value="getDate()"
first-day-of-week="1"
:show-week="true"
@input="setDate"
/>
</v-menu>
<v-text-field
v-else
:value="getDate()"
:label="label"
prepend-icon="mdi-calendar-range"
readonly
disabled
/>
</div>
</template>
<script lang="ts">
/**
* @file provides a component to pick dates from an calendar
* @author <marc.hanisch@gfz-potsdam.de>
* @author <nils.brinckmann@gfz-potsdam.de>
*/
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import { DateTime } from 'luxon'
import { dateToString, stringToDate } from '@/utils/dateHelper'
/**
* A class component to pick dates from an calendar
* wraps a v-date-picker
* @extends Vue
*/
@Component
// @ts-ignore
export default class DatePicker extends Vue {
private dateMenu: boolean = false
/**
* a date
*/
@Prop({
default: null,
type: Object
})
// @ts-ignore
readonly value!: DateTime | null
/**
* the label of the component
*/
@Prop({
required: true,
type: String
})
// @ts-ignore
readonly label!: string
/**
* a rules array
*/
@Prop({
default: () => [],
type: Array
})
// @ts-ignore
readonly rules!: []
/**
* whether the component is in readonly mode or not
*/
@Prop({
default: false,
type: Boolean
})
// @ts-ignore
readonly readonly: boolean
@Prop({
default: true,
type: Boolean
})
// @ts-ignore
readonly clearable: boolean
/**
* returns the date as a string representation
*
* @return {string} a date as an ISO string
*/
getDate (): string {
return dateToString(this.value)
}
/**
* triggers an input event when a date was selected or cleared
*
* @param {string | null} aDate - the selected date from the v-date-picker component
* @fires DatePicker#input
*/
setDate (aDate: string | null) {
this.dateMenu = false
/**
* fires an input event
* @event DatePicker#input
* @type {DateTime}
*/
this.$emit('input', aDate !== null ? stringToDate(aDate) : null)
}
}
</script>
<!--
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>
<v-expansion-panel>
<v-expansion-panel-header>
<v-row no-gutters>
<v-col cols="10">
{{ value.label | orDefault('unknown property') }}
</v-col>
<v-col
cols="2"
align-self="end"
class="text-right"
>
<slot name="actions" />
</v-col>
</v-row>
</v-expansion-panel-header>
<v-expansion-panel-content
eager
>
<slot />
</v-expansion-panel-content>
</v-expansion-panel>
</template>
<script lang="ts">
/**
* @file provides a component for collections of DevicePropertyForms
* @author <marc.hanisch@gfz-potsdam.de>
*/
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import { DeviceProperty } from '@/models/DeviceProperty'
/**
* A class component that lists DevicePropertyForms as ExpansionPanels
* @extends Vue
*/
@Component
// @ts-ignore
export default class DevicePropertyExpansionPanel extends Vue {
/**
* a DeviceProperty
*/
@Prop({
required: true,
type: Object
})
// @ts-ignore
readonly value!: DeviceProperty
}
</script>
<!--
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>
<v-form ref="propertiesForm">
<v-btn
v-if="!readonly"
small
color="primary"
data-role="add-property"
@click="addProperty"
>
add Property
</v-btn>
<br><br>
<v-expansion-panels
v-model="openedPanels"
multiple
>
<v-expansion-panel
v-for="(item, index) in value"
:key="index"
>
<v-expansion-panel-header>
<v-row no-gutters>
<v-col cols="11">
Property {{ index+1 }} {{ item.label ? ' - ' + item.label : '' }}
</v-col>
<v-col
cols="1"
align-self="end"
class="text-right"
>
<v-menu
v-if="!readonly"
right
offset-y
>
<template #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
dense
>
<v-list-item
data-role="copy-property"
@click="copyProperty(index)"
>
<v-list-item-title>
<v-icon
left
small
>
mdi-content-copy
</v-icon>
Copy
</v-list-item-title>
</v-list-item>
<v-list-item
dense
data-role="delete-property"
@click="removeProperty(index)"
>
<v-list-item-title
class="red--text"
>
<v-icon
left
small
color="red"
>
mdi-delete
</v-icon>
Delete
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
</v-expansion-panel-header>
<v-expansion-panel-content>
<DevicePropertyForm
v-model="value[index]"
:readonly="readonly"
:compartments="compartments"
:sampling-medias="samplingMedias"
:properties="properties"
:units="units"
:measured-quantity-units="measuredQuantityUnits"
/>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-form>
</template>
<script lang="ts">
/**
* @file provides a component for collections of DevicePropertyForms
* @author <marc.hanisch@gfz-potsdam.de>
*/
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import DevicePropertyForm from '@/components/DevicePropertyForm.vue'
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 { DeviceProperty } from '@/models/DeviceProperty'
/**
* A class component that lists DevicePropertyForms as ExpansionPanels
* @extends Vue
*/
@Component({
components: { DevicePropertyForm }
})
// @ts-ignore
export default class DevicePropertyExpansionPanels extends Vue {
private openedPanels: number[] = []
/**
* a list of DeviceProperty
*/
@Prop({
default: () => [] as DeviceProperty[],
required: true,
type: Array
})
// @ts-ignore
readonly value!: DeviceProperty[]
/**
* whether the component is in readonly mode or not
*/
@Prop({
default: false,
type: Boolean
})
// @ts-ignore
readonly readonly: boolean
/**
* a list of Compartments
*/
@Prop({
default: () => [] as Compartment[],
required: true,
type: Array
})
readonly compartments!: Compartment[]
/**
* a list of SamplingMedias
*/
@Prop({
default: () => [] as SamplingMedia[],
required: true,
type: Array
})
readonly samplingMedias!: SamplingMedia[]
/**
* a list of Properties
*/
@Prop({
default: () => [] as Property[],
required: true,
type: Array
})
readonly properties!: Property[]
/**
* a list of Units
*/
@Prop({
default: () => [] as Unit[],
required: true,
type: Array
})
readonly units!: Unit[]
/**
* a list of MeasuredQuantityUnits
*/
@Prop({
default: () => [] as MeasuredQuantityUnit[],
required: true,
type: Array
})
readonly measuredQuantityUnits!: MeasuredQuantityUnit[]
/**
* adds a new DeviceProperty instance and triggers an input event
*
* @fires DevicePropertyExpansionPanels#input
*/
addProperty () {
/**
* Update event
* @event DevicePropertyExpansionPanels#input
* @type {DeviceProperty[]}
*/
this.$emit('input', [
...this.value,
new DeviceProperty()
] as DeviceProperty[])
this.openedPanels.push(this.value.length)
// @TODO: scroll to new property with this.$vuetify.goTo()
}
/**
* removes a DeviceProperty instance and triggers an input event
*
* @param {DeviceProperty} index - the index of the property to remove
* @fires DevicePropertyExpansionPanels#input
*/
removeProperty (index: number) {
if (this.value[index]) {
const properties = [...this.value] as DeviceProperty[]
properties.splice(index, 1)
/**
* Update event
* @event DevicePropertyExpansionPanels#input
* @type {DeviceProperty[]}
*/
this.$emit('input', properties)
}
}
/**
* copies a DeviceProperty instance and triggers an input event
*
* @param {DeviceProperty} index - the index of the property to copy
* @fires DevicePropertyExpansionPanels#input
*/
copyProperty (index: number) {
if (this.value[index]) {
const newProperty = DeviceProperty.createFromObject(this.value[index])
newProperty.label += ' (copy)'
/**
* Update event
* @event DevicePropertyExpansionPanels#input
* @type {DeviceProperty[]}
*/
this.$emit('input', [
...this.value,
newProperty
] as DeviceProperty[])
}
}
}
</script>
<!--
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>
<EntitySelect
v-model="wrappedValue"
:readonly="readonly"
:fetch-function="getAvailableDeviceProperties"
:label="label"
color="blue"
/>
</template>
<script lang="ts">
/**
* @file provides a component to select device properties
* @author <marc.hanisch@gfz-potsdam.de>
* @author <nils.brinckmann@gfz-potsdam.de>
*/
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import EntitySelect from '@/components/EntitySelect.vue'
import { DeviceProperty } from '@/models/DeviceProperty'
type DevicePropertysLoaderFunction = () => Promise<DeviceProperty[]>
/**
* A class component to select deviceProperties
* @extends Vue
*/
@Component({
components: { EntitySelect }
})
// @ts-ignore
export default class DevicePropertySelect extends Vue {
private deviceProperties: DeviceProperty[] = []
/**
* a list of DeviceProperties
*/
@Prop({
default: () => [] as DeviceProperty[],
required: true,
type: Array
})
// @ts-ignore
readonly value!: DeviceProperty[]
/**
* whether the component is in readonly mode or not
*/
@Prop({
default: false,
type: Boolean
})
// @ts-ignore
readonly readonly: boolean
/**
* the label of the component
*/
@Prop({
required: true,
type: String
})
// @ts-ignore
readonly label!: string
/**
* a list of DeviceProperties
*/
@Prop({
default: () => [] as DeviceProperty[],
required: true,
type: Array
})
// @ts-ignore
readonly properties!: DeviceProperty[]
/**
* returns a list if DeviceProperties
*
* the method returns a function which is passed to the EntitySelect component
*
* @return {DevicePropertysLoaderFunction} a function that returns the list of DeviceProperties
*/
get getAvailableDeviceProperties (): DevicePropertysLoaderFunction {
return () => new Promise((resolve) => {
resolve(
this.properties
)
})
}
/**
* returns the list of DeviceProperties
*
* @return {DeviceProperty[]} a list of DeviceProperties
*/
get wrappedValue () {
return this.value
}
/**
* triggers an input event when the list of device properties has changed
*
* @param {DeviceProperty[]} newValue - a list of DeviceProperties
* @fires DevicePropertySelect#input
*/
set wrappedValue (newValue) {
/**
* fires an input event
* @event DevicePropertySelect#input
* @type {DeviceProperty[]}
*/
this.$emit('input', newValue)
}
}
</script>
<!--
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>
<v-alert
border="left"
colored-border
type="info"
elevation="2"
dismissible
>
<slot />
</v-alert>
</template>
<script lang="ts">
/**
* @file provides a component to show an info text
* @author <marc.hanisch@gfz-potsdam.de>
*/
import { Vue, Component } from 'nuxt-property-decorator'
/**
* A class component to show an info text
* @extends Vue
*/
@Component
// @ts-ignore
export default class InfoBox extends Vue {
}
</script>
The action button tray can be used to display an *apply* and a *cancel* button
for all action forms.
## Usage
### Standard Usage
```vue
<template>
<ActionButtonTray
cancel-url="/"
/>
</template>
```
### Disabled Apply Button
The *apply* button can be disabled by providing `true` to the property
`isSaving`. This is usually used during a asynchronous API action:
```vue
<template>
<ActionButtonTray
cancel-url="/"
:is-saving="true"
/>
</template>
```
### Hidden Apply Button
The *apply* button can be also hidden by providing `false` to the `show-apply`
property:
```vue
<template>
<ActionButtonTray
cancel-url="/"
:show-apply="false"
/>
</template>
```
<!--
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)
- Tobias Kuhnert (UFZ, tobias.kuhnert@ufz.de)
- Erik Pongratz (UFZ, erik.pongratz@ufz.de)
- Helmholtz Centre Potsdam - GFZ German Research Centre for
Geosciences (GFZ, https://www.gfz-potsdam.de)
- Helmholtz Centre for Environmental Research GmbH - UFZ
(UFZ, https://www.ufz.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-btn
small
text
nuxt
:to="cancelUrl"
>
cancel
</v-btn>
<v-btn
v-if="showApply"
color="green"
small
:disabled="isSaving"
@click="onApplyButtonClick"
>
apply
</v-btn>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'nuxt-property-decorator'
/**
* A simple button tray with an apply and a cancel button
*
* @augments Vue
*/
@Component
export default class ActionButtonTray extends Vue {
/**
* a Nuxt router link for the cancel action
*/
@Prop({
type: String,
required: true
})
readonly cancelUrl!: string
/**
* whether the apply button is disabled or not
*/
@Prop({
type: Boolean,
default: false
})
readonly isSaving!: boolean
/**
* whether the apply button is hidden or not
*/
@Prop({
type: Boolean,
default: true
})
readonly showApply!: boolean
/**
* triggers the apply event when the button is clicked
*
* @fires ActionButtonTray#apply
*/
onApplyButtonClick (): void {
/**
* is triggered when the apply button was clicked
*
* @event apply
*/
this.$emit('apply')
}
}
</script>
A menu with action related menu items.
## Usage
### Standard Usage
```vue
<template>
<v-card
v-if="showCard"
>
<v-card-subtitle>
<v-row no-gutters>
<v-col>
A simple card with a menu
</v-col>
<v-col
align-self="end"
class="text-right"
>
<ActionCardMenu
:value="action"
@delete-menu-item-click="hideCard"
/>
</v-col>
</v-row>
</v-card-subtitle>
</v-card>
</template>
<script>
import { ActionCommonDetails } from '@/models/ActionCommonDetails'
export default {
data () {
return {
action: new ActionCommonDetails(),
showCard: true
}
},
methods: {
hideCard: function () {
this.showCard = false
setTimeout(() => this.showCard = true, 2000)
}
}
}
</script>
```
<!--
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)
- Tobias Kuhnert (UFZ, tobias.kuhnert@ufz.de)
- Erik Pongratz (UFZ, erik.pongratz@ufz.de)
- Helmholtz Centre Potsdam - GFZ German Research Centre for
Geosciences (GFZ, https://www.gfz-potsdam.de)
- Helmholtz Centre for Environmental Research GmbH - UFZ
(UFZ, https://www.ufz.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>
<v-menu
close-on-click
close-on-content-click
offset-x
left
z-index="999"
>
<template #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="onDeleteButtonClick"
>
<v-list-item-content>
<v-list-item-title class="red--text">
<v-icon
left
small
color="red"
>
mdi-delete
</v-icon>
Delete
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import { IActionCommonDetails } from '@/models/ActionCommonDetails'
@Component
/**
* A component that provides a simple menu for action related user-actions
*
* @augments Vue
*/
export default class ActionCardMenu extends Vue {
/**
* The action to which the menu relates
*/
@Prop({
type: Object,
required: true
})
readonly value!: IActionCommonDetails
onDeleteButtonClick (): void {
/**
* is triggered when the user clicks the delete menu item
*
* @event delete-menu-item-click
* @property {IActionCommonDetails} value
*/
this.$emit('delete-menu-item-click', this.value)
}
}
</script>
......@@ -46,98 +46,14 @@ permissions and limitations under the Licence.
<slot v-if="action.isDeviceCalibrationAction" name="calibration-action" :action="action" :index="index"></slot>
<slot v-if="action.isDeviceMountAction" name="device-mount-action" :action="action.inner" :index="index"></slot>
<slot v-if="action.isDeviceUnmountAction" name="device-unmount-action" :action="action.inner" :index="index"></slot>
<!-- <GenericActionCard-->
<!-- v-if="action.isGenericAction"-->
<!-- :value="value[index]"-->
<!-- :delete-callback="getActionApiDispatcherDeleteMethod(action)"-->
<!-- :is-user-authenticated="isUserAuthenticated"-->
<!-- @delete-success="removeActionFromModel"-->
<!-- @showdelete="$emit('showdelete', $event)"-->
<!-- >-->
<!-- <template #actions>-->
<!-- <v-btn-->
<!-- v-if="isUserAuthenticated"-->
<!-- :to="'/devices/' + deviceId + '/actions/generic-device-actions/' + action.id + '/edit'"-->
<!-- color="primary"-->
<!-- text-->
<!-- @click.stop.prevent-->
<!-- >-->
<!-- Edit-->
<!-- </v-btn>-->
<!-- </template>-->
<!-- </GenericActionCard>-->
<!-- <SoftwareUpdateActionCard-->
<!-- v-if="action.isSoftwareUpdateAction"-->
<!-- target="Device"-->
<!-- :value="value[index]"-->
<!-- :delete-callback="getActionApiDispatcherDeleteMethod(action)"-->
<!-- :is-user-authenticated="isUserAuthenticated"-->
<!-- @delete-success="removeActionFromModel"-->
<!-- @showdelete="$emit('showdelete', $event)"-->
<!-- >-->
<!-- <template #actions>-->
<!-- <v-btn-->
<!-- v-if="isUserAuthenticated"-->
<!-- :to="'/devices/' + deviceId + '/actions/software-update-actions/' + action.id + '/edit'"-->
<!-- color="primary"-->
<!-- text-->
<!-- @click.stop.prevent-->
<!-- >-->
<!-- Edit-->
<!-- </v-btn>-->
<!-- </template>-->
<!-- </SoftwareUpdateActionCard>-->
<!-- <DeviceCalibrationActionCard-->
<!-- v-if="action.isDeviceCalibrationAction"-->
<!-- :value="value[index]"-->
<!-- :delete-callback="getActionApiDispatcherDeleteMethod(action)"-->
<!-- :is-user-authenticated="isUserAuthenticated"-->
<!-- @delete-success="removeActionFromModel"-->
<!-- @showdelete="$emit('showdelete', $event)"-->
<!-- >-->
<!-- <template #actions>-->
<!-- <v-btn-->
<!-- v-if="isUserAuthenticated"-->
<!-- :to="'/devices/' + deviceId + '/actions/device-calibration-actions/' + action.id + '/edit'"-->
<!-- color="primary"-->
<!-- text-->
<!-- @click.stop.prevent-->
<!-- >-->
<!-- Edit-->
<!-- </v-btn>-->
<!-- </template>-->
<!-- </DeviceCalibrationActionCard>-->
<!-- <DeviceMountActionCard-->
<!-- v-if="action.isDeviceMountAction"-->
<!-- v-model="action.inner"-->
<!-- />-->
<!-- <DeviceUnmountActionCard-->
<!-- v-if="action.isDeviceUnmountAction"-->
<!-- v-model="action.inner"-->
<!-- />-->
</v-timeline-item>
</v-timeline>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import GenericActionCard from '@/components/actions/GenericActionCard.vue'
import SoftwareUpdateActionCard from '@/components/actions/SoftwareUpdateActionCard.vue'
import DeviceCalibrationActionCard from '@/components/actions/DeviceCalibrationActionCard.vue'
import DeviceMountActionCard from '@/components/actions/DeviceMountActionCard.vue'
import DeviceUnmountActionCard from '@/components/actions/DeviceUnmountActionCard.vue'
import { getActionColor} from '@/modelUtils/actionHelpers'
import { IActionCommonDetails } from '@/models/ActionCommonDetails'
import {
getActionColor,
IActionApiDispatcher,
ActionApiDeleteMethod
} from '@/modelUtils/actionHelpers'
/**
* A component to display Device related actions in a timeline
......@@ -145,14 +61,6 @@ import {
* The component offers the following properties:
*
* * value - an Array of actions
* * deviceId - the id of the device the actions belong to
* * actionApiDispatcher - an object that returns the methods that are required
* to modifiy the actions (for example via an Api)
*
* The component triggers the following events:
*
* * input - the Array of actions was altered (for example because of an action
* that was deleted)
*
* @augments Vue
*/
......@@ -168,83 +76,5 @@ export default class DeviceActionTimeline extends Vue {
type: Array
})
readonly value!: IActionCommonDetails[]
//
// @Prop({
// type: String,
// required: true
// })
// readonly deviceId!: string
//
// /**
// * an object that dispatches Api methods to handle actions
// */
// @Prop({
// default: null,
// required: false,
// type: Object
// })
// // @ts-ignore
// readonly actionApiDispatcher!: IActionApiDispatcher | null
//
// @Prop({
// type: Boolean,
// required: true
// })
// readonly isUserAuthenticated!: boolean
//
// getActionTypeIterationKey (action: IActionCommonDetails): string {
// return this.getActionType(action) + '-' + action.id
// }
//
// getActionType (action: IActionCommonDetails): string {
// switch (true) {
// case 'isGenericAction' in action:
// return 'generic-action'
// case 'isSoftwareUpdateAction' in action:
// return 'software-update-action'
// case 'isDeviceCalibrationAction' in action:
// return 'device-calibration-action'
// case 'isDeviceMountAction' in action:
// return 'device-mount-action'
// case 'isDeviceUnmountAction' in action:
// return 'device-unmount-action'
// default:
// return 'unknown-action'
// }
// }
//
// /**
// * removes the action from the model and triggers the input event with the
// * updated model
// *
// * @param {IActionCommonDetails} action - the action to remove
// * @fires DeviceActionTimeline#input
// */
// removeActionFromModel (action: IActionCommonDetails) {
// const actions: IActionCommonDetails[] = [...this.value]
// const actionIndex: number = actions.findIndex(someAction => someAction === action)
// if (actionIndex > -1) {
// actions.splice(actionIndex, 1)
// }
// /**
// * fires an input event
// * @event DeviceActionTimeline#input
// * @type {IActionCommonDetails[]}
// */
// this.$emit('input', actions)
// }
//
// /**
// * returns the Api method to delete the specific action, if available
// *
// * @param {IActionCommonDetails} action - the action to get the delete method for
// * @return {ActionApiDeleteMethod | undefined} an Api method to delete the action
// */
// getActionApiDispatcherDeleteMethod (action: IActionCommonDetails): ActionApiDeleteMethod | undefined {
// if (!this.actionApiDispatcher) {
// return
// }
// return this.actionApiDispatcher.getDeleteMethod(action)
// }
}
</script>
<!--
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)
- Tobias Kuhnert (UFZ, tobias.kuhnert@ufz.de)
- Erik Pongratz (UFZ, erik.pongratz@ufz.de)
- Helmholtz Centre Potsdam - GFZ German Research Centre for
Geosciences (GFZ, https://www.gfz-potsdam.de)
- Helmholtz Centre for Environmental Research GmbH - UFZ
(UFZ, https://www.ufz.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>
<v-row>
<v-col cols="12" md="5">
<v-text-field
v-model="searchTextModel"
label="Label"
placeholder="Label of configuration"
hint="Please enter at least 3 characters"
@keydown.enter="emitSearch"
/>
</v-col>
<v-col
cols="12"
md="7"
align-self="center"
>
<v-btn
color="primary"
small
@click="emitSearch"
>
Search
</v-btn>
<v-btn
text
small
@click="clearSearch"
>
Clear
</v-btn>
</v-col>
</v-row>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
import { IConfigurationBasicSearchParams } from '@/modelUtils/ConfigurationSearchParams'
@Component
export default class ConfigurationsBasicSearch extends Vue {
@Prop({
default: '',
required: false,
type: String
})
private readonly searchText!: string
private internalSearchText: string | null = null
get searchTextModel (): string | null {
return this.internalSearchText || this.searchText
}
set searchTextModel (value: string | null) {
this.internalSearchText = value
}
emitSearch () {
this.$emit('search', {
searchText: this.searchTextModel
} as IConfigurationBasicSearchParams)
}
clearSearch () {
this.searchTextModel = null
}
}
</script>
<style scoped>
</style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment