From e8ed23d984697214856be664ec7b17d8a22f9758 Mon Sep 17 00:00:00 2001
From: David Zwart <davidzwa@gmail.com>
Date: Mon, 24 Apr 2023 23:50:57 +0200
Subject: [PATCH] ffeat: printer placement, lot of UI improvements and
 experimental pages hidden, fix: printer batch import

---
 package.json                                  |   2 +-
 src/backend/app.service.ts                    |   7 +
 .../Generic/Actions/PrinterCreateAction.vue   |  33 +++
 .../Generic/Actions/PrinterDeleteAction.vue   |   4 +-
 .../Generic/Actions/PrinterSettingsAction.vue |   2 +-
 .../Generic/Dialogs/BatchJsonCreateDialog.vue |  16 +-
 .../Generic/Dialogs/CreatePrinterDialog.vue   |   2 +-
 .../Generic/Dialogs/dialog.constants.ts       |   1 +
 src/components/PrinterGrid/HomeToolbar.vue    |  13 +
 src/components/PrinterGrid/PrinterGrid.vue    |  32 +++
 .../PrinterGrid/PrinterGridTile.vue           | 230 ++++++++++--------
 src/components/PrinterList/PrinterDetails.vue |   3 -
 src/constants/drag.constants.ts               |  17 ++
 src/constants/experimental.constants.ts       |   3 +
 src/directives/printer-place.directive.ts     |  84 +++++++
 src/main.ts                                   |   2 +
 src/store/grid.store.ts                       |  10 +
 src/views/AboutView.vue                       |  99 +++++++-
 src/views/PrinterGridView.vue                 |   2 +-
 src/views/PrintersView.vue                    |  53 ++--
 20 files changed, 471 insertions(+), 144 deletions(-)
 create mode 100644 src/backend/app.service.ts
 create mode 100644 src/components/Generic/Actions/PrinterCreateAction.vue
 create mode 100644 src/constants/drag.constants.ts
 create mode 100644 src/directives/printer-place.directive.ts
 create mode 100644 src/store/grid.store.ts

diff --git a/package.json b/package.json
index eee8c5e0..05c46bfb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fdm-monster/client",
-  "version": "1.0.0-rc7",
+  "version": "1.0.0",
   "private": false,
   "author": "David Zwart",
   "license": "AGPL-3.0-or-later",
diff --git a/src/backend/app.service.ts b/src/backend/app.service.ts
new file mode 100644
index 00000000..190ce3b3
--- /dev/null
+++ b/src/backend/app.service.ts
@@ -0,0 +1,7 @@
+import { BaseService } from "./base.service";
+
+export class AppService extends BaseService {
+  static async updateClientDist() {
+    return await this.postApi("api/server/update-client-bundle-github");
+  }
+}
diff --git a/src/components/Generic/Actions/PrinterCreateAction.vue b/src/components/Generic/Actions/PrinterCreateAction.vue
new file mode 100644
index 00000000..39e3842b
--- /dev/null
+++ b/src/components/Generic/Actions/PrinterCreateAction.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-btn
+    class="ma-2"
+    color="primary"
+    fab
+    small
+    @click.c.capture.native.stop="openCreatePrinterDialog()"
+  >
+    <v-icon>add</v-icon>
+  </v-btn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useDialogsStore } from "../../../store/dialog.store";
+import { DialogName } from "../Dialogs/dialog.constants";
+
+export default defineComponent({
+  name: "PrinterCreateAction",
+  props: {},
+  setup: () => {
+    return {
+      dialogsStore: useDialogsStore(),
+    };
+  },
+  computed: {},
+  methods: {
+    openCreatePrinterDialog() {
+      this.dialogsStore.openDialog(DialogName.CreatePrinterDialog);
+    },
+  },
+});
+</script>
diff --git a/src/components/Generic/Actions/PrinterDeleteAction.vue b/src/components/Generic/Actions/PrinterDeleteAction.vue
index ddc39d7c..02637e5f 100644
--- a/src/components/Generic/Actions/PrinterDeleteAction.vue
+++ b/src/components/Generic/Actions/PrinterDeleteAction.vue
@@ -1,7 +1,6 @@
 <template>
-  <v-btn color="warning" outlined @click="deletePrinter()">
+  <v-btn class="ma-2" color="primary" fab small @click.prevent.stop="deletePrinter()">
     <v-icon>delete</v-icon>
-    <span class="d-none d-lg-inline">Delete printer</span>
   </v-btn>
 </template>
 
@@ -30,6 +29,7 @@ export default defineComponent({
   },
   methods: {
     async deletePrinter() {
+      if (!confirm("Are you sure to delete this printer?")) return;
       await this.printersStore.deletePrinter(this.printerId);
     },
   },
diff --git a/src/components/Generic/Actions/PrinterSettingsAction.vue b/src/components/Generic/Actions/PrinterSettingsAction.vue
index e7a2fe6b..696bd2d9 100644
--- a/src/components/Generic/Actions/PrinterSettingsAction.vue
+++ b/src/components/Generic/Actions/PrinterSettingsAction.vue
@@ -9,7 +9,7 @@ import { defineComponent, PropType } from "vue";
 import { Printer } from "@/models/printers/printer.model";
 
 export default defineComponent({
-  name: "PrinterUrlAction",
+  name: "PrinterSettingsAction",
   props: {
     printer: Object as PropType<Printer>,
   },
diff --git a/src/components/Generic/Dialogs/BatchJsonCreateDialog.vue b/src/components/Generic/Dialogs/BatchJsonCreateDialog.vue
index 1a03c58f..a76e30ea 100644
--- a/src/components/Generic/Dialogs/BatchJsonCreateDialog.vue
+++ b/src/components/Generic/Dialogs/BatchJsonCreateDialog.vue
@@ -1,7 +1,7 @@
 <template>
-  <BaseDialog :id="dialogId" max-width="500px">
+  <BaseDialog :id="dialogId" max-width="700px">
     <validation-observer ref="validationObserver" v-slot="{ invalid }">
-      <v-card>
+      <v-card class="pa-4">
         <v-card-title>
           <span class="text-h5"> Batch Import JSON printers </span>
         </v-card-title>
@@ -13,6 +13,7 @@
                   v-model="formData.json"
                   :error-messages="errors"
                   data-vv-validate-on="change|blur"
+                  rows="10"
                   @change="updatePrinterCount()"
                 >
                   <template v-slot:label>
@@ -20,9 +21,10 @@
                   </template>
                 </v-textarea>
               </validation-provider>
-              {{ numPrinters }} printers
+              {{ numPrinters }} printers found
             </v-col>
           </v-row>
+          <v-btn class="mt-2">Validate printers</v-btn>
         </v-card-text>
         <v-card-actions>
           <em class="red--text">* indicates required field</em>
@@ -118,7 +120,6 @@ export default defineComponent({
       const answer = confirm(`Are you sure to import ${numPrinters} printers?`);
       if (answer) {
         printers.forEach((p) => {
-          p.enabled = false;
           if (p["_id"]) {
             delete p["_id"];
           }
@@ -130,6 +131,13 @@ export default defineComponent({
             p.settingsAppearance = p["settingsApperance"];
             delete p["settingsApperance"];
           }
+          if (p["name"]) {
+            if (!p.settingsAppearance) {
+              p.settingsAppearance = {};
+            }
+            p.settingsAppearance.name = p["name"];
+            delete p["name"];
+          }
         });
         await PrintersService.batchImportPrinters(printers);
       }
diff --git a/src/components/Generic/Dialogs/CreatePrinterDialog.vue b/src/components/Generic/Dialogs/CreatePrinterDialog.vue
index 962b610c..029ffa9a 100644
--- a/src/components/Generic/Dialogs/CreatePrinterDialog.vue
+++ b/src/components/Generic/Dialogs/CreatePrinterDialog.vue
@@ -13,7 +13,7 @@
         <v-card-text>
           <v-row>
             <v-col :cols="showChecksPanel ? 8 : 12">
-              <PrinterCrudForm ref="printerCrudForm" @onChange="onFormChange" />
+              <PrinterCrudForm ref="printerCrudForm" />
             </v-col>
 
             <PrinterChecksPanel v-if="showChecksPanel" :cols="4" :test-progress="testProgress">
diff --git a/src/components/Generic/Dialogs/dialog.constants.ts b/src/components/Generic/Dialogs/dialog.constants.ts
index 6a88e87d..fd783832 100644
--- a/src/components/Generic/Dialogs/dialog.constants.ts
+++ b/src/components/Generic/Dialogs/dialog.constants.ts
@@ -1,6 +1,7 @@
 export enum DialogName {
   BatchJson = "BatchJson",
   CreatePrinterDialog = "CreatePrinterDialog",
+  PlacePrinterDialog = "PlacePrinterDialog",
   CreatePrinterFloorDialog = "CreatePrinterFloorDialog",
   PrinterMaintenanceDialog = "PrinterMaintenanceDialog",
   UpdatePrinterDialog = "UpdatePrinterDialog",
diff --git a/src/components/PrinterGrid/HomeToolbar.vue b/src/components/PrinterGrid/HomeToolbar.vue
index 4c07a66c..50370b9d 100644
--- a/src/components/PrinterGrid/HomeToolbar.vue
+++ b/src/components/PrinterGrid/HomeToolbar.vue
@@ -13,6 +13,17 @@
         {{ f.name }}
       </v-btn>
     </v-btn-toggle>
+
+    <v-btn color="primary" class="mt-0 ml-6" v-if="!printersStore.printers?.length" to="/printers">
+      You have no printers. Click here to start!
+    </v-btn>
+    <v-alert color="primary" class="mt-4 ml-12" v-if="printersStore.floorlessPrinters.length">
+      <v-icon>warning</v-icon>
+      {{ printersStore.floorlessPrinters.length }} unplaced printer(s)!</v-alert
+    >
+    <div class="ma-4 pt-6">
+      <v-switch v-model="gridStore.gridEditMode" label="Printer Relocate Mode"></v-switch>
+    </div>
     <v-spacer></v-spacer>
   </v-toolbar>
 </template>
@@ -20,6 +31,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { usePrintersStore } from "@/store/printers.store";
+import { useGridStore } from "../../store/grid.store";
 
 export default defineComponent({
   name: "HomeToolbar",
@@ -27,6 +39,7 @@ export default defineComponent({
   setup() {
     return {
       printersStore: usePrintersStore(),
+      gridStore: useGridStore(),
     };
   },
   data(): {
diff --git a/src/components/PrinterGrid/PrinterGrid.vue b/src/components/PrinterGrid/PrinterGrid.vue
index e0485fb1..d1872069 100644
--- a/src/components/PrinterGrid/PrinterGrid.vue
+++ b/src/components/PrinterGrid/PrinterGrid.vue
@@ -1,5 +1,21 @@
 <template>
   <div>
+    <div v-if="gridStore.gridEditMode" class="ml-4 mt-4 mb-0" style="cursor: move">
+      <span class="pr-4">
+        Drag and drop {{ printersStore.floorlessPrinters.length }} unplaced printer(s) here:
+      </span>
+      <div
+        v-for="printer of printersStore.floorlessPrinters"
+        :key="printer.id"
+        class="d-inline-block text-center mr-1 mb-1"
+        draggable="true"
+        style="width: 100px; height: 40px; border: 1px solid gray; border-radius: 2px"
+        @dragstart="onDragStart(printer, $event)"
+      >
+        <strong text-center>{{ printer.printerName }}</strong>
+      </div>
+      <div class="mt-4">Clear printers by clicking on their tile below:</div>
+    </div>
     <v-row v-for="y in rows" :key="y" class="ma-1" no-gutters>
       <v-col v-for="x in columns" :key="x" :cols="columnWidth" :sm="columnWidth">
         <v-row class="test-top" no-gutters>
@@ -50,6 +66,8 @@ import {
 } from "@/constants/printer-grid.constants";
 import { usePrintersStore } from "@/store/printers.store";
 import { Printer } from "../../models/printers/printer.model";
+import { useGridStore } from "../../store/grid.store";
+import { dragAppId, INTENT, PrinterPlace } from "../../constants/drag.constants";
 
 export default defineComponent({
   components: { PrinterGridTile },
@@ -65,6 +83,7 @@ export default defineComponent({
   setup() {
     return {
       printersStore: usePrintersStore(),
+      gridStore: useGridStore(),
     };
   },
   async created() {
@@ -91,6 +110,19 @@ export default defineComponent({
     },
   },
   methods: {
+    onDragStart(printer: Printer, ev: DragEvent) {
+      if (!ev.dataTransfer) return;
+      if (!printer.id) return;
+
+      ev.dataTransfer.setData(
+        "text",
+        JSON.stringify({
+          appId: dragAppId,
+          intent: INTENT.PRINTER_PLACE,
+          printerId: printer.id,
+        } as PrinterPlace)
+      );
+    },
     getPrinter(col: number, row: number) {
       const x = col;
       const y = row;
diff --git a/src/components/PrinterGrid/PrinterGridTile.vue b/src/components/PrinterGrid/PrinterGridTile.vue
index 51ab0142..0d95af6b 100644
--- a/src/components/PrinterGrid/PrinterGridTile.vue
+++ b/src/components/PrinterGrid/PrinterGridTile.vue
@@ -1,100 +1,115 @@
 <template>
-  <v-card
-    v-drop-upload="{ printers: [printer] }"
-    :class="{ 'tile-selected': selected, 'tile-unselected': unselected, 'tile-setup': printer }"
-    :disabled="!printer"
-    :style="{ 'background-color': printerStateColor }"
-    class="tile"
-    outlined
-    tile
-    @click="selectPrinter()"
-  >
-    <v-container v-if="printer" class="tile-inner">
-      <small class="small-resized-font">
-        {{ printer.printerName }}
-      </small>
-      <v-menu offset-y>
-        <template v-slot:activator="{ on, attrs }">
-          <v-btn class="float-right d-inline d-xl-none" icon v-bind="attrs" v-on="on">
-            <v-icon>more_vert</v-icon>
+  <div v-drop-printer-position="{ x, y, printerSet: printer }">
+    <v-card
+      v-drop-upload="{ printers: [printer] }"
+      :class="{ 'tile-selected': selected, 'tile-unselected': unselected, 'tile-setup': printer }"
+      :disabled="!printer"
+      :style="{
+        'background-color':
+          !gridStore.gridEditMode || !printer ? printerStateColor : 'rgba(1,1,1,0)',
+      }"
+      class="tile"
+      outlined
+      tile
+      @click="selectOrUnplacePrinter()"
+    >
+      <v-container v-if="printer" class="tile-inner">
+        <small class="small-resized-font">
+          {{ printer.printerName }}
+        </small>
+        <v-menu offset-y>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn class="float-right d-inline d-xl-none" icon v-bind="attrs" v-on="on">
+              <v-icon>more_vert</v-icon>
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-item :close-on-click="true" @click="clickInfo()">
+              <v-icon>info</v-icon>
+              &nbsp;Details
+            </v-list-item>
+            <v-list-item :close-on-click="true" @click="clickOpenPrinterURL()">
+              <v-icon>directions</v-icon>
+              &nbsp;Visit OctoPrint
+            </v-list-item>
+            <v-list-item :close-on-click="true" @click="clickOpenSettings()">
+              <v-icon>settings</v-icon>
+              &nbsp;Edit Printer
+            </v-list-item>
+            <v-list-item :close-on-click="true" @click="clickEmergencyStop()">
+              <v-icon>stop</v-icon>
+              &nbsp;Emergency stop
+            </v-list-item>
+          </v-list>
+        </v-menu>
+        <div v-if="!gridStore.gridEditMode" class="float-right d-none d-xl-inline">
+          <v-btn icon @click.prevent.stop="clickEmergencyStop()">
+            <v-icon>dangerous</v-icon>
+          </v-btn>
+          <v-btn icon @click.prevent.stop="clickInfo()">
+            <v-icon>menu_open</v-icon>
           </v-btn>
-        </template>
-        <v-list>
-          <v-list-item :close-on-click="true" @click="clickInfo()">
-            <v-icon>info</v-icon>
-            &nbsp;Details
-          </v-list-item>
-          <v-list-item :close-on-click="true" @click="clickOpenPrinterURL()">
-            <v-icon>directions</v-icon>
-            &nbsp;Visit OctoPrint
-          </v-list-item>
-          <v-list-item :close-on-click="true" @click="clickOpenSettings()">
-            <v-icon>settings</v-icon>
-            &nbsp;Edit Printer
-          </v-list-item>
-          <v-list-item :close-on-click="true" @click="clickEmergencyStop()">
-            <v-icon>stop</v-icon>
-            &nbsp;Emergency stop
-          </v-list-item>
-        </v-list>
-      </v-menu>
-
-      <v-btn class="float-right d-none d-xl-inline" icon @click.prevent.stop="clickInfo()">
-        <v-icon>info</v-icon>
-      </v-btn>
-      <v-btn class="float-right d-none d-xl-inline" icon @click.prevent.stop="clickEmergencyStop()">
-        <v-icon>stop</v-icon>
-      </v-btn>
-      <br />
-
-      <v-tooltip
-        :disabled="!printer.disabledReason"
-        close-delay="100"
-        color="danger"
-        open-delay="0"
-        top
+        </div>
+        <strong v-else class="float-end">
+          <v-icon>disabled_visible</v-icon>
+          Click to clear
+        </strong>
+        <br />
+
+        <v-tooltip
+          :disabled="!printer.disabledReason"
+          close-delay="100"
+          color="danger"
+          open-delay="0"
+          top
+        >
+          <template v-slot:activator="{ on, attrs }">
+            <small
+              class="xsmall-resized-font text--secondary d-lg-inline d-none"
+              v-bind="attrs"
+              v-on="on"
+            >
+              <span v-if="printer.disabledReason">
+                <small> MAINTENANCE</small>
+                <v-icon class="d-none d-xl-inline" color="primary" small>info</v-icon>
+              </span>
+              <span v-else>
+                <small>{{ printer.printerState.state?.toUpperCase() }}</small>
+              </span>
+            </small>
+          </template>
+          Maintenance reason: <br />
+          {{ printer.disabledReason }}
+        </v-tooltip>
+
+        <v-tooltip v-if="filamentColorParse()" close-delay="1000" open-delay="0" right>
+          <template v-slot:activator="{ on, attrs }">
+            <div
+              :style="{ background: printerFilamentColorRgba }"
+              class="d-flex justify-end filament-abs-border"
+              v-bind="attrs"
+              v-on="on"
+            ></div>
+          </template>
+          <span>{{ printerFilamentColorName }}</span>
+        </v-tooltip>
+      </v-container>
+      <v-container v-else-if="gridStore.gridEditMode">
+        <v-icon size="48">add</v-icon>
+        Place printer
+      </v-container>
+      <!--      <v-container v-else>  </v-container>-->
+
+      <v-progress-linear
+        v-if="printer && printer.currentJob"
+        :value="printer.currentJob.progress"
+        absolute
+        bottom
+        color="green"
       >
-        <template v-slot:activator="{ on, attrs }">
-          <small
-            class="xsmall-resized-font text--secondary d-lg-inline d-none"
-            v-bind="attrs"
-            v-on="on"
-          >
-            <span v-if="printer.disabledReason">
-              <small> MAINTENANCE</small>
-              <v-icon class="d-none d-xl-inline" color="primary" small>info</v-icon>
-            </span>
-            <span v-else>
-              <small>{{ printer.printerState.state?.toUpperCase() }}</small>
-            </span>
-          </small>
-        </template>
-        Maintenance reason: <br />
-        {{ printer.disabledReason }}
-      </v-tooltip>
-
-      <v-tooltip close-delay="1000" open-delay="0" right>
-        <template v-slot:activator="{ on, attrs }">
-          <div
-            :style="{ background: printerFilamentColorRgba }"
-            class="d-flex justify-end filament-abs-border"
-            v-bind="attrs"
-            v-on="on"
-          ></div>
-        </template>
-        <span>{{ printerFilamentColorName }}</span>
-      </v-tooltip>
-    </v-container>
-
-    <v-progress-linear
-      v-if="printer && printer.currentJob"
-      :value="printer.currentJob.progress"
-      absolute
-      bottom
-      color="green"
-    >
-    </v-progress-linear>
-  </v-card>
+      </v-progress-linear>
+    </v-card>
+  </div>
 </template>
 
 <script lang="ts">
@@ -106,6 +121,9 @@ import { PrintersService } from "@/backend";
 import { usePrintersStore } from "@/store/printers.store";
 import { useDialogsStore } from "@/store/dialog.store";
 import { DialogName } from "@/components/Generic/Dialogs/dialog.constants";
+import { useGridStore } from "../../store/grid.store";
+import { FloorService } from "../../backend/floor.service";
+import { filamentColorParse } from "../../constants/experimental.constants";
 
 const defaultColor = "rgba(100,100,100,0.1)";
 const maintenanceColor = "black";
@@ -117,10 +135,13 @@ export default defineComponent({
   components: {},
   props: {
     printer: Object as PropType<Printer>,
+    x: Number,
+    y: Number,
   },
   setup() {
     return {
       printersStore: usePrintersStore(),
+      gridStore: useGridStore(),
       dialogsStore: useDialogsStore(),
     };
   },
@@ -162,6 +183,9 @@ export default defineComponent({
     },
   },
   methods: {
+    filamentColorParse() {
+      return filamentColorParse;
+    },
     clickInfo() {
       this.printersStore.setSideNavPrinter(this.printer);
     },
@@ -175,12 +199,24 @@ export default defineComponent({
     },
     async clickEmergencyStop() {
       if (!this.printer) return;
-      if (confirm("Are you sure to abort the print? Please reconnect after.")) {
+      if (
+        confirm("Are you sure to abort the print in Emergency Stop mode? Please reconnect after.")
+      ) {
         await CustomGcodeService.postEmergencyM112Command(this.printer.id);
       }
     },
-    selectPrinter() {
-      if (!this.printer) return;
+    async selectOrUnplacePrinter() {
+      if (!this.printer?.id) return;
+
+      if (this.gridStore.gridEditMode) {
+        const floorId = this.printersStore.selectedFloor?._id;
+        if (!floorId) throw new Error("Cant clear printer, floor not selected");
+        await FloorService.deletePrinterFromFloor(
+          this.printersStore.selectedFloor!._id,
+          this.printer.id
+        );
+      }
+
       this.printersStore.toggleSelectedPrinter(this.printer);
     },
     printerFilamentColor() {
diff --git a/src/components/PrinterList/PrinterDetails.vue b/src/components/PrinterList/PrinterDetails.vue
index fd3a9517..8abd5652 100644
--- a/src/components/PrinterList/PrinterDetails.vue
+++ b/src/components/PrinterList/PrinterDetails.vue
@@ -22,7 +22,6 @@
       </v-col>
       <v-col>
         <RefreshFilesAction :printer="printer" class="d-flex justify-end" />
-        <PrinterDeleteAction :printer="printer" class="d-flex justify-end" />
       </v-col>
     </v-row>
 
@@ -34,7 +33,6 @@
 import { defineComponent, PropType } from "vue";
 import FileControlList from "@/components/PrinterList/FileControlList.vue";
 import { Printer } from "@/models/printers/printer.model";
-import PrinterDeleteAction from "@/components/Generic/Actions/PrinterDeleteAction.vue";
 import RefreshFilesAction from "@/components/Generic/Actions/RefreshFilesAction.vue";
 import { usePrintersStore } from "@/store/printers.store";
 
@@ -46,7 +44,6 @@ export default defineComponent({
   name: "PrinterDetails",
   components: {
     FileControlList,
-    PrinterDeleteAction,
     RefreshFilesAction,
   },
   setup: () => {
diff --git a/src/constants/drag.constants.ts b/src/constants/drag.constants.ts
new file mode 100644
index 00000000..f188e3bc
--- /dev/null
+++ b/src/constants/drag.constants.ts
@@ -0,0 +1,17 @@
+export const dragAppId = "FDM-Monster-Client-Vue2";
+
+export enum INTENT {
+  PRINTER_PLACE = "PRINTER_PLACE",
+}
+
+export function isPrinterPlaceDataTransfer(data: PrinterPlace) {
+  if (!data?.appId?.length || !data?.intent?.length) return false;
+
+  return data.appId === dragAppId && data.intent === INTENT.PRINTER_PLACE;
+}
+
+export interface PrinterPlace {
+  appId: string;
+  intent: string;
+  printerId: string;
+}
diff --git a/src/constants/experimental.constants.ts b/src/constants/experimental.constants.ts
index ed454a5b..18bcdab0 100644
--- a/src/constants/experimental.constants.ts
+++ b/src/constants/experimental.constants.ts
@@ -1,2 +1,5 @@
 export const whitelistSettingsHidden = true;
 export const floorPrinterAssignmentHidden = true;
+export const filamentColorParse = false;
+
+export const firmwareUpdateSection = false;
diff --git a/src/directives/printer-place.directive.ts b/src/directives/printer-place.directive.ts
new file mode 100644
index 00000000..7fb4b501
--- /dev/null
+++ b/src/directives/printer-place.directive.ts
@@ -0,0 +1,84 @@
+import { Printer } from "prettier";
+import Vue, { Directive } from "vue";
+import { isPrinterPlaceDataTransfer, PrinterPlace } from "../constants/drag.constants";
+import { FloorService } from "../backend/floor.service";
+import { usePrintersStore } from "../store/printers.store";
+
+interface PrinterBindingValue {
+  printerSet: Printer | null;
+  x: number;
+  y: number;
+}
+
+const defaultBorder = "1px solid #2b2a27";
+const hoverBorder = "1px solid gray";
+
+const bindDropConditionally = (
+  el: HTMLElement,
+  bindingValue: PrinterBindingValue,
+  context?: Vue
+) => {
+  const printerStore = usePrintersStore();
+
+  const printerSet = bindingValue?.printerSet;
+  // If a printer is placed, we will not (yet) allow placing another printer
+  if (printerSet) {
+    el.ondrop = null;
+    el.ondragover = null;
+    el.ondragleave = null;
+    return;
+  } else {
+    el.style.border = defaultBorder;
+    el.ondrop = async (e) => {
+      el.style.border = defaultBorder;
+      e.preventDefault();
+      if (!e.dataTransfer) {
+        console.debug("No data transferred to drop printer");
+        return;
+      }
+
+      const buffer = e.dataTransfer.getData("text");
+      const data = JSON.parse(buffer) as PrinterPlace;
+      const isRecognized = isPrinterPlaceDataTransfer(data);
+      if (!isRecognized) {
+        console.debug("Drop not recognized", data);
+        return;
+      }
+
+      const floorId = printerStore.selectedFloor?._id;
+      if (!floorId?.length) throw new Error("Floor is not set");
+      const printerId = data.printerId;
+      if (!printerId?.length) throw new Error("PrinterId was not provided");
+
+      await FloorService.addPrinterToFloor(floorId, {
+        printerId,
+        x: bindingValue.x,
+        y: bindingValue.y,
+      });
+    };
+    el.ondragover = (ev: DragEvent) => {
+      if (!ev?.dataTransfer) return;
+
+      if (ev.dataTransfer && [...ev!.dataTransfer.items].filter((i) => i.kind === "file").length) {
+        return;
+      }
+      el.style.border = hoverBorder;
+      ev.preventDefault();
+    };
+    el.ondragleave = (ev: DragEvent) => {
+      el.style.border = defaultBorder;
+      ev.preventDefault();
+    };
+  }
+};
+
+export function registerPrinterPlaceDirective() {
+  Vue.directive("drop-printer-position", {
+    inserted: (el, binding, vnode) => {
+      bindDropConditionally(el, binding.value, vnode.context);
+    },
+    update: (el, binding, vnode) => {
+      bindDropConditionally(el, binding.value, vnode.context);
+    },
+  });
+}
diff --git a/src/main.ts b/src/main.ts
index 83c676c7..8728c01c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,6 +13,7 @@ import { registerFileDropDirective } from "@/directives/file-upload.directive";
 import { errorEvent } from "@/event-bus/alert.events";
 import { createPinia, PiniaVuePlugin } from "pinia";
 import BaseDialog from "@/components/Generic/Dialogs/BaseDialog.vue";
+import { registerPrinterPlaceDirective } from "@/directives/printer-place.directive";
 
 Vue.config.productionTip = false;
 Vue.use(VueAxios, axios);
@@ -20,6 +21,7 @@ Vue.use(VueBus);
 
 configureVeeValidate();
 registerFileDropDirective();
+registerPrinterPlaceDirective();
 
 window.addEventListener("unhandledrejection", (event) => {
   if (event.reason?.isAxiosError) {
diff --git a/src/store/grid.store.ts b/src/store/grid.store.ts
new file mode 100644
index 00000000..6a188403
--- /dev/null
+++ b/src/store/grid.store.ts
@@ -0,0 +1,10 @@
+import { defineStore } from "pinia";
+
+interface State {
+  gridEditMode: boolean;
+}
+export const useGridStore = defineStore("GridStore", {
+  state: (): State => ({
+    gridEditMode: false,
+  }),
+});
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index e1db80ea..920b7e0e 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,20 +1,92 @@
 <template>
   <v-container>
-    FDM Monster was created by D. Zwart (https://github.com/davidzwa) in collaboration with
-    <strong><a href="https://mtb3d.com">MTB3D</a></strong
-    >.
+    <v-card>
+      <v-card-title> About FDM Monster<strong>©</strong></v-card-title>
+      <v-card-text>
+        The first prototype of FDM Monster<strong>©</strong> was created by David Zwart in 2021 in
+        collaboration with <strong><a href="https://mtb3d.com">MTB3D</a> </strong>. This open-source
+        prototype proved a strong factor in process and logistics optimization for a 3D Printing
+        company with 100+ printers. Due to it's success, we decided to keep it open-source and free!
+      </v-card-text>
+      <v-card-text>
+        The latest 3D Printing Farm server named FDM Monster has been tested for 2 years using a
+        custom image for running 4 OctoPrint images on a Raspberry Pi.
+        <br />
+        This version uses the famous framework
+        <a href="https://nodejs.org/en" target="_blank">
+          <strong>NodeJS framework</strong>
+        </a>
+        together with Awilix and ExpressJS for its server, and
+        <a href="https://vuejs.org/" target="_blank"><strong>Vue 2</strong></a>
+        and
+        <a href="https://next.vuetifyjs.com/" target="_blank">
+          <strong>Vuetify 2</strong>
+        </a>
+        to set a base for FDM Monster Client<strong>©</strong> - the webapp.
+        <br />
+        <br />
+        <v-btn color="primary" @click="updateClientDist()"> Update Client</v-btn>
+      </v-card-text>
+      <v-card-title>
+        Bug reports
+        <v-icon>bug</v-icon>
+      </v-card-title>
+      <v-card-text>
+        Did you find a bug, or a feature that needs work? We would love to hear about it! <br />
 
-    <br />
-    <br />
-    Found a bug? Please report them here
-    <strong><a href="https://github.com/fdm-monster/fdm-monster/issues">Github Issues</a></strong>
+        <strong>We have multiple ways to report it:</strong>
+        <h3>
+          <ul class="ml-5">
+            <li>Mail to davidzwa@gmail.com</li>
+            <li>
+              <a href="https://discord.gg/mwA8uP8CMc" style="color: white" target="_blank">
+                Discord server
+              </a>
+            </li>
+            <li>
+              <strong>
+                <a
+                  href="https://github.com/fdm-monster/fdm-monster/issues"
+                  style="color: white"
+                  target="_blank"
+                >
+                  FDM Monster <strong>©</strong> Github Issues
+                </a>
+              </strong>
+            </li>
+            <li>
+              <a href="https://fdm-monster.net" style="color: white" target="_blank"> Website </a>
+            </li>
+          </ul>
+        </h3>
+      </v-card-text>
 
-    <br />
+      <v-card-title>About me</v-card-title>
+      <v-card-text>
+        <v-img src="/img/DavidZwart.jpg" width="150px"></v-img>
+        <h4 class="mt-2">
+          <a
+            href="https://www.linkedin.com/in/david-zwart-88514083/"
+            style="color: white"
+            target="_blank"
+          >
+            LinkedIn
+          </a>
+
+          <a class="ml-2" href="https://github.com/davidzwa" style="color: white" target="_blank">
+            Github Profile
+          </a>
+        </h4>
+        David Zwart MSc., post-graduate from the TU Delft (Embedded Systems), author of FDM
+        Monster<strong>© </strong>
+      </v-card-text>
+    </v-card>
   </v-container>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { AppService } from "../backend/app.service";
 
 export default defineComponent({
   name: "AboutView",
@@ -26,7 +98,16 @@ export default defineComponent({
   async mounted() {},
   props: {},
   computed: {},
-  methods: {},
+  methods: {
+    async updateClientDist() {
+      if (!confirm("Are you sure? This might cause breaking changes, if the server is outdated"))
+        return;
+
+      console.debug("Updating client");
+      await AppService.updateClientDist();
+      location.reload();
+    },
+  },
   watch: {},
 });
 </script>
diff --git a/src/views/PrinterGridView.vue b/src/views/PrinterGridView.vue
index 398acf5c..e8d6aa3b 100644
--- a/src/views/PrinterGridView.vue
+++ b/src/views/PrinterGridView.vue
@@ -6,7 +6,7 @@
       <v-row style="margin-bottom: -5px">
         <v-col style="padding: 5px 0 0 15px">
           <v-chip-group class="d-inline-block">
-            <v-chip v-if="selectedPrinters.length === 0" small>No printers selected</v-chip>
+            <v-chip v-if="selectedPrinters.length === 0" small>No selected printers</v-chip>
             <v-chip
               v-for="selectedPrinter in selectedPrinters"
               :key="selectedPrinter.id"
diff --git a/src/views/PrintersView.vue b/src/views/PrintersView.vue
index 9bfd8240..74bd358e 100644
--- a/src/views/PrintersView.vue
+++ b/src/views/PrintersView.vue
@@ -24,33 +24,30 @@
       show-expand
       @click:row="clickRow"
     >
-      <template v-if="reorder" v-slot:body="props">
-        <draggable :list="props.items" tag="tbody">
-          <slot></slot>
-          <tr v-for="(printer, index) in props.items" :key="index">
-            <td>
-              <v-icon class="reorder-row-icon">reorder</v-icon>
-              {{ printer.sortIndex }}
-            </td>
-            <td>{{ printer.enabled }}</td>
-            <td>{{ printer.printerName }}</td>
-            <td>{{ floorOfPrinter(printer.id).name }}</td>
-          </tr>
-        </draggable>
+      <template v-slot:no-results>
+        <div class="mt-4 mb-4">
+          <h3>No printer has been found. Create one here:</h3>
+          <PrinterCreateAction />
+        </div>
+      </template>
+      <template v-slot:no-data>
+        <div class="mt-4 mb-4">
+          <h3>No printer has been created yet. Create one here:</h3>
+          <PrinterCreateAction />
+        </div>
       </template>
       <template v-slot:top>
         <v-toolbar flat>
-          <v-toolbar-title>Filtering {{ printers.length || 0 }} printers</v-toolbar-title>
-          <v-spacer></v-spacer>
-          <v-switch v-model="reorder" class="mt-5 mr-3" dark label="Sort mode" />
-
-          <v-btn class="ml-3" color="primary" type="button" @click="openImportJsonPrintersDialog()">
-            Import JSON Printers
-          </v-btn>
-
+          <v-toolbar-title>Showing {{ printers.length || 0 }} printers</v-toolbar-title>
           <v-btn class="ml-3" color="primary" type="button" @click="openCreatePrinterDialog()">
+            <v-icon>add</v-icon>
             Create Printer
           </v-btn>
+          <v-btn class="ml-3" color="primary" type="button" @click="openImportJsonPrintersDialog()">
+            <v-icon>publish</v-icon>
+            Import JSON Printers
+          </v-btn>
+          <v-spacer></v-spacer>
         </v-toolbar>
       </template>
       <template v-slot:item.enabled="{ item }">
@@ -79,6 +76,7 @@
         <PrinterConnectionAction :printer="item" />
         <PrinterEmergencyStopAction :printer="item" />
         <SyncPrinterNameAction :printer="item" />
+        <PrinterDeleteAction :printer="item" />
         <PrinterSettingsAction :printer="item" v-on:update:show="openEditDialog(item)" />
       </template>
       <template v-slot:expanded-item="{ headers, item }">
@@ -89,6 +87,7 @@
     </v-data-table>
 
     <v-data-table
+      v-if="firmwareUpdateSection()"
       key="id"
       :headers="firmwareTableHeaders"
       :items="firmwareUpdateStates"
@@ -131,7 +130,6 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { Printer } from "@/models/printers/printer.model";
-import draggable from "vuedraggable";
 import { PrintersService } from "@/backend/printers.service";
 import PrinterDetails from "@/components/PrinterList/PrinterDetails.vue";
 import PrinterUrlAction from "@/components/Generic/Actions/PrinterUrlAction.vue";
@@ -147,9 +145,11 @@ import SyncPrinterNameAction from "@/components/Generic/Actions/SyncPrinterNameA
 import { usePrintersStore } from "@/store/printers.store";
 import { useDialogsStore } from "@/store/dialog.store";
 import { DialogName } from "@/components/Generic/Dialogs/dialog.constants";
+import { firmwareUpdateSection } from "../constants/experimental.constants";
+import PrinterCreateAction from "../components/Generic/Actions/PrinterCreateAction.vue";
+import PrinterDeleteAction from "../components/Generic/Actions/PrinterDeleteAction.vue";
 
 interface Data {
-  reorder: boolean;
   showJsonImportDialog: boolean;
   search: string;
   expanded: Printer[];
@@ -162,12 +162,13 @@ interface Data {
 export default defineComponent({
   name: "PrintersView",
   components: {
+    PrinterDeleteAction,
     PrinterDetails,
-    draggable,
     BatchJsonCreateDialog,
     PrinterUrlAction,
     PrinterSettingsAction,
     PrinterEmergencyStopAction,
+    PrinterCreateAction,
     SyncPrinterNameAction,
     PrinterConnectionAction,
   },
@@ -179,7 +180,6 @@ export default defineComponent({
   },
   props: {},
   data: (): Data => ({
-    reorder: false,
     firmwareUpdateStates: [],
     firmwareReleases: [],
     showJsonImportDialog: false,
@@ -242,6 +242,9 @@ export default defineComponent({
     },
   },
   methods: {
+    firmwareUpdateSection() {
+      return firmwareUpdateSection;
+    },
     floorOfPrinter(printerId: string) {
       return this.printersStore.floorOfPrinter(printerId);
     },