Add icon to reset coordinates input.

frontend/src/App.vue

@@ -64,6 +64,8 @@ h2 {
 
 input {
     padding: $input-padding;
+    font-size: $input-font-size;
+
     border: none;
     border-radius: $input-border-radius;
 

frontend/src/components/NodeMap.vue

@@ -91,6 +91,10 @@ function createMap(defaultLayers: L.Layer[], layers: { [p: string]: L.Layer }) {
 function updateMarker() {
     const coordinates = getCoordinates();
     if (!coordinates) {
+        if (marker) {
+            marker.remove();
+            marker = null;
+        }
         return;
     }
 

frontend/src/components/form/ValidationFormInput.vue

@@ -13,6 +13,7 @@ interface Props {
     placeholder: string;
     constraint: Constraint;
     validationError: string;
+    resetIconTitle?: string;
     help?: string;
 }
 
@@ -24,8 +25,8 @@ const emit = defineEmits<{
 const displayLabel = computed(() =>
     props.label
         ? props.constraint.optional
-            ? props.label
+            ? `${props.label}:`
-            : `${props.label}*`
+            : `${props.label}*:`
         : undefined
 );
 
@@ -33,6 +34,10 @@ const input = ref<HTMLInputElement>();
 const valid = ref(true);
 const validated = ref(false);
 
+const hasResetIcon = computed(
+    () => !!(props.modelValue && props.resetIconTitle)
+);
+
 function registerValidationComponent() {
     const instance = getCurrentInstance();
     let parent = instance?.parent;
@@ -48,16 +53,30 @@ function registerValidationComponent() {
     );
 }
 
-function onInput() {
+function withInputElement(callback: (element: HTMLInputElement) => void): void {
-    if (validated.value) {
-        validate();
-    }
     const element = input.value;
     if (!element) {
         console.warn("Could not get referenced input element.");
         return;
     }
-    emit("update:modelValue", element.value);
+
+    callback(element);
+}
+
+function onInput() {
+    if (validated.value) {
+        validate();
+    }
+    withInputElement((element) => {
+        emit("update:modelValue", element.value);
+    });
+}
+
+function reset() {
+    withInputElement((element) => {
+        element.value = "";
+        onInput();
+    });
 }
 
 function validate(): boolean {
@@ -82,27 +101,29 @@ onMounted(() => {
 
 <template>
     <div class="validation-form-input">
-        <label v-if="displayLabel">
+        <label>
-            {{ displayLabel }}:
+            {{ displayLabel }}
             <ExpandableHelpBox v-if="props.help" :text="props.help" />
-            <input
+
-                ref="input"
+            <span class="input-wrapper">
-                :name="props.name"
+                <input
-                :value="props.modelValue"
+                    ref="input"
-                @input="onInput"
+                    :class="{ 'has-reset-icon': hasResetIcon }"
-                :type="props.type || 'text'"
+                    :name="props.name"
-                :placeholder="props.placeholder"
+                    :value="props.modelValue"
-            />
+                    @input="onInput"
+                    :type="props.type || 'text'"
+                    :placeholder="props.placeholder"
+                />
+                <i
+                    v-if="hasResetIcon"
+                    class="fa fa-times reset-icon"
+                    aria-hidden="true"
+                    :title="props.resetIconTitle"
+                    @click.prevent="reset"
+                />
+            </span>
         </label>
-        <input
-            v-if="!displayLabel"
-            ref="input"
-            :name="props.name"
-            :value="props.modelValue"
-            @input="onInput"
-            :type="props.type || 'text'"
-            :placeholder="props.placeholder"
-        />
         <div class="validation-error" v-if="!valid">
             {{ props.validationError }}
         </div>
@@ -117,15 +138,35 @@ onMounted(() => {
 }
 
 label {
+    position: relative;
     display: block;
     font-weight: $label-font-weight;
     cursor: pointer;
 }
 
-input {
+.input-wrapper {
-    box-sizing: border-box;
+    display: flex;
-    width: 100%;
+    align-items: center;
-    margin: 0.25em 0;
+
+    input {
+        box-sizing: border-box;
+        width: 100%;
+        margin: 0.25em 0;
+
+        &.has-reset-icon {
+            padding-right: $input-with-reset-icon-padding-right;
+        }
+    }
+
+    .reset-icon {
+        cursor: pointer;
+        width: 0; // Allow input to really take up 100% width within flexbox.
+
+        margin-left: -$input-reset-icon-position-right;
+
+        font-size: $input-font-size;
+        color: $input-reset-icon-color;
+    }
 }
 
 .validation-error {

frontend/src/components/nodes/NodeCoordinatesInput.vue

@@ -43,6 +43,7 @@ function onUpdateModelValue(value: string) {
                 :placeholder="`z. B. ${configStore.getConfig.coordsSelector.lat} ${configStore.getConfig.coordsSelector.lng}`"
                 :constraint="CONSTRAINTS.node.coords"
                 :validation-error="`Bitte gib die Koordinaten wie folgt an, Beispiel: ${configStore.getConfig.coordsSelector.lat} ${configStore.getConfig.coordsSelector.lng}`"
+                reset-icon-title="Koodinaten zurücksetzen"
             />
         </div>
 

frontend/src/scss/_variables.scss

@@ -91,6 +91,7 @@ $validation-form-input-margin: 1em 0;
 
 // Inputs
 $input-padding: 0.25em 0.5em;
+$input-font-size: 1em;
 $input-background-color: $gray-lighter;
 $input-text-color: $gray-darkest;
 $input-placeholder-color: $gray-darkest;
@@ -98,6 +99,9 @@ $input-placeholder-opacity: 0.8;
 $input-border-radius: 0.5em;
 $input-outline: 0.1em solid $variant-color-info;
 $input-outline-offset: 0.125em;
+$input-reset-icon-color: $gray-darkest;
+$input-reset-icon-position-right: 1em;
+$input-with-reset-icon-padding-right: 1.25em;
 
 $checkbox-size: 1.25em;
 $checkbox-margin: 0 0.5em 0 0;