Merged DB into main, replaced js with typescript

editor_frontend/src/components/ExhibitEditor.vue

@@ -18,11 +18,15 @@
         <button @click="addLink">Add Link</button>
       </div>
       <div class="preview">
-        <BaseWidget v-for="widget in exhibit.widgets" :key="widget.data"
-          :exhibit="exhibit" :widget="widget"
+        <BaseWidget
+          v-for="widget in exhibit.widgets"
+          :key="widget.data"
+          :exhibit="exhibit"
+          :widget="widget"
           @up="moveWidgetUp(widget)"
-          @down="moveWidgetDown(widget)" 
-          @remove="removeWidget(widget)" />
+          @down="moveWidgetDown(widget)"
+          @remove="removeWidget(widget)"
+        />
       </div>
       <div class="extra">
         <div class="item" v-for="extra in exhibit.extra" :key="extra[0]">
@@ -31,7 +35,7 @@
           <div>
             <button @click="saveExtras(extra[0], extra[1])">SAVE</button>
 
-            <button @click="removeExtras(extra[0])" >REMOVE</button>
+            <button @click="removeExtras(extra[0])">REMOVE</button>
           </div>
         </div>
         <div class="item">
@@ -40,23 +44,22 @@
           <button class="add" @click="addExtras">ADD</button>
         </div>
         <p>{{ error_msg }}</p>
-
       </div>
     </section>
   </main>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import {Exhibit, Widget} from "@/models/Exhibit";
+import { Exhibit, Widget } from "@/models/Exhibit";
 import BaseWidget from "./BaseWidget.vue";
 import { useRoute } from "vue-router";
-import dataService from "../services/DataService.js";
+import dataService from "../services/DataService";
 
 export default defineComponent({
   components: {
     BaseWidget,
-},
+  },
   data() {
     return {
       exhibit: new Exhibit(),
@@ -67,7 +70,7 @@ export default defineComponent({
     };
   },
   created() {
-    this.getExhibit(useRoute().params.id);
+    this.getExhibit(useRoute().params.id as string);
   },
   beforeMount() {
     let id = useRoute().params.id;
@@ -80,21 +83,21 @@ export default defineComponent({
       this.exhibit.widgets.push({
         id: this.generatedId++,
         type: "gallery",
-        data: ""
+        data: "",
       });
     },
     addParagraph() {
       this.exhibit.widgets.push({
         id: this.generatedId++,
         type: "paragraph",
-        data: ""
+        data: "",
       });
     },
     addLink() {
       this.exhibit.widgets.push({
         id: this.generatedId++,
         type: "link",
-        data: ""
+        data: "",
       });
     },
     moveWidgetUp(widget: Widget) {
@@ -115,7 +118,7 @@ export default defineComponent({
       let index = this.exhibit.widgets.indexOf(widget);
       this.exhibit.widgets.splice(index, 1);
     },
-    async getExhibit(id) {
+    async getExhibit(id: string) {
       let docData = await dataService.getOne(id);
       this.exhibit.id = id;
       this.exhibit.name = docData.name;
@@ -138,12 +141,10 @@ export default defineComponent({
       this.exhibit.extra.set(key, value);
     },
   },
-
 });
 </script>
 
 <style lang="scss" scoped>
-
 main {
   display: flex;
   flex-direction: column;
@@ -200,7 +201,8 @@ button {
   overflow: auto;
 }
 
-.tools, .extra {
+.tools,
+.extra {
   display: flex;
   flex-direction: column;
   align-items: stretch;

editor_frontend/src/initfirestore.ts

@@ -1,11 +1,6 @@
-//import { initializeApp } from "firebase/app";
-//import firebase from "firebase/app";
-//import { getFirestore } from "firebase/firestore";
 import { initializeApp } from "firebase/app";
 
-//import "firebase";
-
-let config = {
+const config = {
   apiKey: "AIzaSyCd4GmSTcBhnrnyxwAxGz63VeZoBHMu4p8",
   authDomain: "cloudlib-980ef.firebaseapp.com",
   databaseURL:

editor_frontend/src/models/Exhibit.ts

@@ -1,28 +1,29 @@
-
 export class Exhibit {
-    id: string; // id of exhibit
-    name: string; // name of exhibit
-    description: string; //short description
-    extra: Map<string, string>; //extra parameters
-    widgets: Widget[];
+  id: string; // id of exhibit
+  name: string; // name of exhibit
+  description: string; //short description
+  extra: Map<string, string>; //extra parameters
+  widgets: Widget[];
 
-    constructor() {
-        this.id = '';
-        this.name = '';
-        this.description = '';
-        this.extra = new Map<string, string>();
-        this.widgets = [];
-    }
+  constructor();
+  constructor(id: string, name: string);
+  constructor(id?: string, name?: string) {
+    this.id = id || "";
+    this.name = name || "";
+    this.description = "";
+    this.extra = new Map<string, string>();
+    this.widgets = [];
+  }
 }
 
 export class Widget {
-    id: number;
-    type: string;
-    data: string;
+  id: number;
+  type: string;
+  data: string;
 
-    constructor() {
-        this.id = 0;
-        this.type = '';
-        this.data = '';
-    }
+  constructor() {
+    this.id = 0;
+    this.type = "";
+    this.data = "";
+  }
 }

editor_frontend/src/services/DataService.ts

@@ -1,28 +1,31 @@
-//import coll from "@/initfirestore";
 import { getFirestore } from "firebase/firestore";
 import firebaseApp from "@/initfirestore";
 import { query, collection, getDocs, getDoc, doc } from "firebase/firestore";
+import { Exhibit } from "@/models/Exhibit";
 
-//let db = getFirestore(firebaseApp);
 const db = getFirestore(firebaseApp);
 
 class DataService {
   async getAll() {
-    let sth = [{ id: "1", name: "1" }];
+    const sth = [] as Exhibit[];
     sth.pop();
     const querySnap = await getDocs(query(collection(db, "exhibits")));
 
     // add each doc to 'countries' array
     querySnap.forEach((doc) => {
-      sth.push({ id: doc.id, name: doc.data().name });
+      sth.push(new Exhibit(doc.id, doc.data().name));
     });
 
     return sth;
   }
 
-  async getOne(id) {
+  async getOne(id: string) {
+    const sth = new Exhibit();
     const snap = await getDoc(doc(db, "exhibits", id));
-    return snap.data();
+    sth.id = id;
+    sth.name = snap.data()?.name;
+    sth.description = snap.data()?.description;
+    return sth;
   }
 
   /*create(exhibit) {