First dummy (and faked) version of listing and editing platforms

layouts/default.vue

@@ -19,7 +19,7 @@
         </v-list-item>
 
         <!-- Devices -->
-        <v-list-item to="devices" exact nuxt>
+        <v-list-item to="/devices" exact nuxt>
           <v-list-item-action>
             <v-icon>mdi-network</v-icon>
           </v-list-item-action>
@@ -29,7 +29,7 @@
         </v-list-item>
 
         <!-- Projects -->
-        <v-list-item to="projects" exact nuxt>
+        <v-list-item to="/projects" exact nuxt>
           <v-list-item-action>
             <v-icon>mdi-nature-people</v-icon>
           </v-list-item-action>
@@ -39,7 +39,7 @@
         </v-list-item>
 
         <!-- Users -->
-        <v-list-item to="users" exact nuxt>
+        <v-list-item to="/users" exact nuxt>
           <v-list-item-action>
             <v-icon>mdi-account-multiple</v-icon>
           </v-list-item-action>
@@ -51,7 +51,7 @@
         <v-divider />
 
         <!-- Help -->
-        <v-list-item to="help" nuxt exact>
+        <v-list-item to="/help" nuxt exact>
           <v-list-item-action>
             <v-icon>mdi-help-circle-outline</v-icon>
           </v-list-item-action>

pages/devices/index.vue

+<template>
+  <div>
+    <v-row>
+      <h1>Devices</h1>
+    </v-row>
+    <v-card>
+      <v-row>
+        <v-col>
+          <v-form>
+            <v-container>
+              <v-text-field v-model="searchText" label="Name" placeholder="Name of device" />
+              <v-select label="Type" placeholder="Platform / Sensor" :items="searchTypes" />
+              <v-btn @click="search">search</v-btn>
+              <a href="#" @click="toggleExtendedSearch">
+                <div v-if="!showExtendedSearch">Show extended search</div>
+                <div v-else>Hide extended search</div>
+              </a>
+            </v-container>
+          </v-form>
+        </v-col>
+      </v-row>
+    </v-card>
+    <v-card v-if="showExtendedSearch">
+      Extended Search
+      <v-row>
+        <v-col>
+          <v-form>
+            <v-container>
+              <v-select label="Manufacture" :items="searchManufactures" :item-text="(x) => x.name" :item-value="(x) => x.id" />
+              <v-btn>+</v-btn>
+              <v-select label="Institute" :items="searchInstitutes" :item-text="(x) => x.name" :item-value="(x) => x.id" />
+              <v-btn>+</v-btn>
+              <v-select label="Parameter" :items="searchParameter" :item-text="(x) => x.name" :item-value="(x) => x.id" />
+              <v-btn>+</v-btn>
+            </v-container>
+          </v-form>
+        </v-col>
+      </v-row>
+    </v-card>
+    <p>Results:</p>
+    <v-card v-for="result in searchResults" :key="result.id">
+      <v-card-title>
+        {{ result.name }}
+      </v-card-title>
+      <v-card-text>
+        <p>{{ result.type }}</p>
+        <p>Project {{ result.project }}</p>
+        <p>State {{ result.state }}</p>
+      </v-card-text>
+      <v-card-actions v-if="result.devicetype == 'platform'">
+        <v-btn>View</v-btn>
+        <v-btn :to="'/devices/platforms/' + result.id">
+          Edit
+        </v-btn>
+        <v-btn>Copy</v-btn>
+      </v-card-actions>
+      <v-card-actions v-if="result.devicetype == 'device'">
+        <v-btn>View</v-btn>
+        <v-btn>Edit</v-btn>
+        <v-btn>Copy</v-btn>
+      </v-card-actions>
+    </v-card>
+
+    <v-card>
+      <v-btn to="/devices/platforms">
+        Add Platform
+      </v-btn>
+      <v-btn>Add Sensor</v-btn>
+    </v-card>
+  </div>
+</template>
+
+<script>
+
+import masterdataservice from '../../services/masterdataservice'
+import deviceservice from '../../services/deviceservice'
+
+export default {
+  data () {
+    return {
+      showExtendedSearch: false,
+      searchManufactures: [],
+      searchInstitutes: [],
+      searchParameter: [],
+      searchTypes: ['Platform / Sensor', 'Sensor', 'Platform'],
+      searchResults: [],
+      searchText: null
+    }
+  },
+  mounted () {
+    masterdataservice.findAllManufactures().then((manufactures) => {
+      this.searchManufactures = manufactures
+    })
+    masterdataservice.findAllInstitutes().then((institutes) => {
+      this.searchInstitutes = institutes
+    })
+    masterdataservice.findAllParameter().then((paramater) => {
+      this.searchParameter = paramater
+    })
+    deviceservice.findPlatformsAndSensors(this.searchText).then((findResults) => {
+      this.searchResults = findResults
+    })
+  },
+  methods: {
+    toggleExtendedSearch (event) {
+      event.preventDefault()
+      this.showExtendedSearch = !this.showExtendedSearch
+    },
+    search () {
+      deviceservice.findPlatformsAndSensors(this.searchText).then((findResults) => {
+        this.searchResults = findResults
+      })
+    }
+  }
+}
+
+</script>

pages/devices/platforms/_id.vue

+<template>
+  <div>
+    <h1>Platform URN</h1>
+
+    <v-form>
+      <v-card>
+        <v-card-text>
+          <v-select v-model="platform.platformType" label="platform type" :items="platformTypes" :item-text="(x) => x.name" :item-value="(x) => x.id" />
+          <v-text-field v-model="platform.shortName" label="platform short name" />
+          <v-text-field v-model="platform.longName" label="platform long name" />
+          <v-textarea v-model="platform.description" label="description" />
+          <v-select v-model="platform.manufacture" label="manufacture" :items="manufactures" :item-text="(x) => x.name" :item-value="(x) => x.id" />
+          <v-select v-model="platform.type" label="type" :items="types" />
+          <v-text-field v-model="platform.website" label="link to website" />
+        </v-card-text>
+      </v-card>
+      <v-card>
+        <v-card-title>
+          Responsible persons
+        </v-card-title>
+        <v-card-text>
+          <div v-for="(person, index) in platform.responsiblePersons" :key="index">
+            <v-select v-model="platform.responsiblePersons[index]" label="Person" :items="persons" :item-text="(x) => x.name" :item-value="(x) => x.id" />
+            <v-btn @click="removePerson(index)">
+              Delete
+            </v-btn>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn @click="addEmptyPerson()">+</v-btn>
+        </v-card-actions>
+      </v-card>
+      <v-card>
+        <v-card-actions>
+          <v-btn @click="goBack()">
+            Cancel
+          </v-btn>
+          <v-btn @click="save()">Save</v-btn>
+          <v-btn>Save and create copy</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-form>
+  </div>
+</template>
+
+<script>
+import masterdataservice from '../../../services/masterdataservice'
+import personservice from '../../../services/personservice'
+import deviceservice from '../../../services/deviceservice'
+
+export default {
+  data () {
+    return {
+      platformTypes: [],
+      manufactures: [],
+      types: ['Type 01'],
+      persons: [],
+
+      platform: {
+        id: null,
+        platformType: null,
+        shortName: null,
+        longName: null,
+        description: null,
+        manfature: null,
+        type: null,
+        website: null,
+        responsiblePersons: []
+      }
+    }
+  },
+  mounted () {
+    masterdataservice.findAllManufactures().then((foundManufactures) => {
+      this.manufactures = foundManufactures
+    })
+    masterdataservice.findAllPlatformTypes().then((foundPlatformTypes) => {
+      this.platformTypes = foundPlatformTypes
+    })
+    personservice.findAllPersons().then((foundPersons) => {
+      this.persons = foundPersons
+    })
+
+    const platformId = this.$route.params.id
+    if (platformId) {
+      deviceservice.findPlatformById(platformId).then((foundPlatform) => {
+        this.platform = foundPlatform
+      }).catch((error) => {
+        console.err(error)
+      })
+    }
+  },
+  methods: {
+    goBack () {
+      this.$router.back()
+    },
+    addEmptyPerson () {
+      this.$set(this.platform.responsiblePersons, this.platform.responsiblePersons.length, {})
+    },
+    removePerson (index) {
+      this.$delete(this.platform.responsiblePersons, index)
+    },
+    save () {
+      deviceservice.savePlatform(this.platform).then(() => {
+        this.$router.push('/devices')
+      })
+    }
+  }
+}
+</script>

services/deviceservice.js

+import masterdataservice from './masterdataservice'
+
+const fakeDb = {
+  platforms: [
+    {
+      id: 1,
+      shortName: 'Boeken',
+      longName: 'Boeken',
+      description: 'The Boeken station',
+      platformType: 1,
+      responsiblePersons: [1]
+    },
+    {
+      id: 2,
+      shortName: 'Polarstern',
+      longName: 'Polarstern',
+      description: 'The icebreaker',
+      platformType: 3,
+      responsiblePersons: [2, 1]
+    }
+  ]
+}
+
+const findPlatformById = (id) => {
+  const searchId = Number.parseInt(id)
+  return new Promise((resolve, reject) => {
+    for (const platform of fakeDb.platforms) {
+      if (platform.id === searchId) {
+        resolve(platform)
+        break
+      }
+    }
+    reject('Not found')
+  })
+}
+
+const savePlatform = (platform) => {
+  return new Promise((resolve) => {
+    if (!platform.id) {
+      let highestPlatformId = 0;
+      for (const dbPlatform of fakeDb.platforms) {
+        if (highestPlatformId < dbPlatform.id) {
+          highestPlatformId = dbPlatform.id
+        }
+      }
+      platform.id = highestPlatformId += 1
+      fakeDb.platforms.push(platform)
+      resolve(platform)
+    } else {
+      let idxToSet = null
+      let idx = 0
+      for (const dbPlatform of fakeDb.platforms) {
+        if (dbPlatform.id === platform.id) {
+          idxToSet = idx
+          break
+        }
+        idx += 1
+      }
+      if (idxToSet != null) {
+        fakeDb.platforms[idxToSet] = platform
+        resolve(platform)
+      }
+    }
+  })
+}
+
+const findPlatformsAndSensors = (text) => {
+  return new Promise((resolve) => {
+    masterdataservice.findAllPlatformTypes().then((platformTypes) => {
+
+      const result = []
+
+      let filterFunc = (platform) => { return true }
+
+      if (text) {
+        filterFunc = (platform) => {
+          return platform.shortName.includes(text)
+        }
+      }
+
+      const platformTypeLookup = {}
+      for (const platformType of platformTypes) {
+        platformTypeLookup[platformType.id] = platformType
+      }
+
+      for (const platform of fakeDb.platforms) {
+        if (filterFunc(platform)) {
+          result.push(
+            {
+              id: platform.id,
+              name: platform.shortName,
+              project: '...',
+              type: platformTypeLookup[platform.platformType].name,
+              state: 'shipping',
+              devicetype: 'platform'
+            }
+          )
+        }
+      }
+      resolve(result)
+    })
+  })
+}
+
+export default {
+  findPlatformsAndSensors,
+  findPlatformById,
+  savePlatform
+}

services/masterdataservice.js

+const findAllManufactures = () => {
+  return new Promise((resolve) => {
+    resolve([
+      {
+        id: 1,
+        name: 'Manufacture 01'
+      },
+      {
+        id: 2,
+        name: 'Manufacture 02'
+      }
+    ])
+  })
+}
+
+const findAllInstitutes = () => {
+  return new Promise((resolve) => {
+    resolve([
+      {
+        id: 1,
+        name: 'UFZ'
+      },
+      {
+        id: 2,
+        name: 'GFZ'
+      }
+    ])
+  })
+}
+
+const findAllParameter = () => {
+  return new Promise((resolve) => {
+    resolve([
+      {
+        id: 1,
+        name: 'Parameter 01'
+      }
+    ])
+  })
+}
+
+const findAllPlatformTypes = () => {
+  return new Promise((resolve) => {
+    resolve([
+      {
+        id: 1,
+        name: 'Station'
+      },
+      {
+        id: 2,
+        name: 'Drone'
+      },
+      {
+        id: 3,
+        name: 'Vessel'
+      },
+      {
+        id: 4,
+        name: 'Vehicle'
+      },
+      {
+        id: 5,
+        name: 'Satellite'
+      }
+    ])
+  })
+}
+
+export default {
+  findAllManufactures,
+  findAllInstitutes,
+  findAllParameter,
+  findAllPlatformTypes
+}

services/personservice.js

+// must be replaced by something that filters the
+// persons that are part of a given project
+const findAllPersons = () => {
+  return new Promise((resolve) => {
+    resolve([
+      {
+        id: 1,
+        name: 'Person 1'
+      },
+      {
+        id: 2,
+        name: 'Person 2'
+      }
+    ])
+  })
+}
+
+export default {
+  findAllPersons
+}
\ No newline at end of file