#223 add views and components to create a transect

app/src/components/CreateTransectItem.ts

+import {Component, Vue} from "vue-property-decorator";
+
+@Component({
+    components: {},
+})
+export default class CreateTransectItem extends Vue {
+    private showConfirmationAlert = false;
+    private showFailAlert = false;
+    private showLoading = false;
+    private errorMessage = "";
+    private transectCode = "";
+    private transectIcc = "";
+    private transectIcc2 = "";
+    private transectName = "";
+    private transectComment = "";
+
+    private showSuccessAlert() {
+        this.showLoadingCircle(false);
+        this.showConfirmationAlert = true;
+        this.showFailAlert = false;
+    }
+
+    private showErrorAlert(errorMessage: string) {
+        this.errorMessage = errorMessage;
+        this.showLoadingCircle(false);
+        this.showConfirmationAlert = false;
+        this.showFailAlert = true;
+    }
+
+    private hideAlerts() {
+        this.showConfirmationAlert = false;
+        this.showFailAlert = false;
+    }
+
+    private showLoadingCircle(show: boolean) {
+        this.showLoading = show;
+    }
+
+    private redirectToTransectManagement() {
+        this.$router.push({path: "/admin/transect_management"});
+    }
+
+    private delay(millis: number) {
+        return new Promise((resolve) => setTimeout(resolve, millis));
+    }
+
+    private save() {
+        console.log("save transect");
+    }
+
+    private cancel() {
+        this.redirectToTransectManagement();
+    }
+}

app/src/components/CreateTransectItem.vue

+<template>
+    <v-col cols="12">
+        <v-card class="mx-auto my-4" max-width="700" outlined shaped :disabled="showLoading">
+            <v-card-title class="grey--text">{{ $t("transectManagement.create") }}</v-card-title>
+            <v-divider class="mx-4" />
+            <div class="text-center">
+                <v-progress-circular v-show="showLoading" color="primary" indeterminate/>
+            </div>
+            <v-card-text>
+                <v-text-field
+                    v-model="transectCode"
+                    :label="$t('basic.mandatory') + $t('transectManagement.tableHeader.transectCode')" />
+                <v-text-field
+                    v-model="transectIcc"
+                    :label="$t('basic.mandatory') + $t('transectManagement.tableHeader.ICC')" />
+                <v-text-field
+                    v-model="transectIcc2"
+                    :label="$t('basic.mandatory') + $t('transectManagement.tableHeader.ICC2')" />
+                <v-text-field
+                    v-model="transectName"
+                    :label="$t('basic.mandatory') + $t('transectManagement.tableHeader.name')" />
+                <v-textarea
+                    v-model="transectComment"
+                    :label="$t('basic.mandatory') + $t('transectManagement.tableHeader.comment')" 
+                    multi-line />
+                <v-container fluid>
+                    <v-row justify="end">
+                        <v-btn text
+                            color="secondary" 
+                            @click="cancel()"
+                            data-testid="saveTransect">{{$t("basic.cancel")}}</v-btn>
+                        <v-btn text
+                            color="primary" 
+                            @click="save()"
+                            data-testid="saveTransect">{{$t("basic.save")}}</v-btn>
+                    </v-row>
+                </v-container>
+            </v-card-text>
+        </v-card>
+    </v-col>
+</template>
+
+<script lang="ts" src="./CreateTransectItem.ts">
+</script>

app/src/i18n/deutsch.json

@@ -295,6 +295,7 @@
       "date": "Datum",
       "time": "Uhrzeit",
       "name": "Name",
+      "ICC": "Land",
       "ICC2": "Bundesland",
       "sectionCount": "Anzahl Abschnitte",
       "comment": "Kommentar",

app/src/i18n/english.json

@@ -295,6 +295,7 @@
       "date": "Date",
       "time": "Time",
       "name": "Name",
+      "ICC": "State",
       "ICC2": "Federal state ",
       "sectionCount": "Number of sections",
       "comment": "Comment",

app/src/views/CreateTransect.ts

 import {Component, Vue} from "vue-property-decorator";
+import CreateTransectItem from "@/components/CreateTransectItem.vue";
 
 @Component({
-    components: {},
+    components: {
+        CreateTransectItem,
+    },
 })
 export default class CreateTransect extends Vue {
     // logic goes here

app/src/views/CreateTransect.vue

 <template>
     <v-container>
         <v-row>
-            <h1 class="display-2 font-weight-bold mb-3">
-                Create Transect
-            </h1>
+            <CreateTransectItem />
         </v-row>
     </v-container>
 </template>