From 62a93d41c7c99da16bac4e083cf436b58f7c2623 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 7 Sep 2023 15:43:05 +0000
Subject: [PATCH] BulmaButton component

---
 ui/src/components/BulmaButton.vue   | 25 +++++++++++++++++++++++++
 ui/src/components/DoorMapEditor.vue | 12 ++++++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/components/BulmaButton.vue

diff --git a/ui/src/components/BulmaButton.vue b/ui/src/components/BulmaButton.vue
new file mode 100644
index 0000000..77eb481
--- /dev/null
+++ b/ui/src/components/BulmaButton.vue
@@ -0,0 +1,25 @@
+<template>
+  <button class="button">
+    <span class="icon-text">
+      <span class="icon">
+        <font-awesome-icon :icon="icon" />
+      </span>
+      <span><slot name="default" /></span>
+    </span>
+  </button>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  props: {
+    icon: String,
+  },
+})
+export default class extends Vue {
+  public icon!: string;
+}
+</script>
+
+<style scoped></style>
diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index 7891951..6cd7b54 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -8,7 +8,13 @@
     <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
     <template v-if="current_step === 2">
       <Calendar :doors="doors" />
-      <button class="button is-success" @click.left="submit">Speichern</button>
+      <BulmaButton
+        class="is-success"
+        icon="fa-solid fa-crosshairs"
+        @click.left="save_doors"
+      >
+        Speichern
+      </BulmaButton>
     </template>
   </div>
 </template>
@@ -18,6 +24,7 @@ import { Door, DoorSerialized } from "@/lib/door";
 import { Options, Vue } from "vue-class-component";
 
 import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
+import BulmaButton from "./BulmaButton.vue";
 import Calendar from "./Calendar.vue";
 import DoorChooser from "./calendar/editor/DoorChooser.vue";
 import DoorPlacer from "./calendar/editor/DoorPlacer.vue";
@@ -25,6 +32,7 @@ import DoorPlacer from "./calendar/editor/DoorPlacer.vue";
 @Options({
   components: {
     BulmaBreadcrumbs,
+    BulmaButton,
     DoorPlacer,
     DoorChooser,
     Calendar,
@@ -39,7 +47,7 @@ export default class extends Vue {
   public current_step = 0;
   public doors: Door[] = [];
 
-  public submit() {
+  public save_doors() {
     const data: DoorSerialized[] = [];
 
     for (const door of this.doors) {