added button for enable Drag&Drop

frontend/src/App.vue

@@ -20,6 +20,18 @@
 			</button>
 		</div>
 		<div class="menu">
+			<label
+				class="drag-drop-toggle"
+				:title="dragDropEnabled ? 'Drag & drop je zapnutý' : 'Drag & drop je vypnutý'"
+			>
+				<input
+					v-model="dragDropEnabled"
+					type="checkbox"
+					:aria-label="dragDropEnabled ? 'Vypnúť drag & drop' : 'Zapnúť drag & drop'"
+					@change="onDragDropChange"
+				/>
+				<span>Drag & drop</span>
+			</label>
 			<router-link to="/add"
 				><font-awesome-icon :icon="['fas', 'square-plus']" /> Pridať
 				bug</router-link
@@ -45,11 +57,29 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import backend from "./backend";
 import events from "./events";
+import {
+	getDragDropEnabled,
+	getDragDropMediaQuery,
+	getDragDropPreference,
+	setDragDropEnabled,
+} from "./dragDropSettings";
 
 const short_bug = ref("");
+const dragMediaQuery = getDragDropMediaQuery();
+const dragDropEnabled = ref(getDragDropEnabled(dragMediaQuery));
+
+function updateAutomaticDragDropState() {
+	if (getDragDropPreference() != null) return;
+	dragDropEnabled.value = getDragDropEnabled(dragMediaQuery);
+}
+
+function onDragDropChange() {
+	setDragDropEnabled(dragDropEnabled.value);
+	events.emit("drag-drop-changed", dragDropEnabled.value);
+}
 
 function onShortBugEnter(event) {
 	if (event.keyCode == 13) {
@@ -64,4 +94,16 @@ function shortBugAdd() {
 		events.emit("reports-changed");
 	});
 }
+
+onMounted(() => {
+	if (dragMediaQuery != null) {
+		dragMediaQuery.addEventListener("change", updateAutomaticDragDropState);
+	}
+});
+
+onUnmounted(() => {
+	if (dragMediaQuery != null) {
+		dragMediaQuery.removeEventListener("change", updateAutomaticDragDropState);
+	}
+});
 </script>