BulmaButton component

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>

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) {