diff client/src/components/importschedule/importtypes/Waterwaygauges.vue @ 1996:fda5c78fb7d3 importschedulerefac

moved components
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 24 Jan 2019 13:43:36 +0100
parents client/src/components/importschedule/Waterwaygauges.vue@29f02d0043a9
children 5af57aa2b8fc
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/importtypes/Waterwaygauges.vue	Thu Jan 24 13:43:36 2019 +0100
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-100">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>URL</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="urlChanged"
+            class="form-control"
+            type="url"
+            :value="url"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="!url" class="d-flex flex-row">
+      <small
+        ><translate class="text-danger">Please enter a URL</translate></small
+      >
+    </div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>Username</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="usernameChanged"
+            class="form-control"
+            type="text"
+            :value="username"
+          />
+        </div>
+        <div v-if="!username" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a Username</translate
+            ></small
+          >
+        </div>
+      </div>
+      <div class="flex-column mt-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>Password</translate> </small>
+        </div>
+        <div class="w-100 d-flex flex-row">
+          <input
+            @keyup="passwordChanged"
+            class="form-control"
+            :type="showPassword"
+            :value="password"
+          />
+          <span
+            class="input-group-text ml-2"
+            @click="passwordVisible = !passwordVisible"
+          >
+            <font-awesome-icon
+              :icon="passwordVisible ? 'eye-slash' : 'eye'"
+            ></font-awesome-icon>
+          </span>
+        </div>
+        <div v-if="!password" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a Password</translate
+            ></small
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "waterwaygauges",
+  props: ["username", "password", "url"],
+  data() {
+    return {
+      passwordVisible: false
+    };
+  },
+  computed: {
+    showPassword() {
+      if (this.passwordVisible) return "text";
+      return "password";
+    }
+  },
+  methods: {
+    urlChanged(e) {
+      this.$emit("urlChanged", e.target.value);
+    },
+    usernameChanged(e) {
+      this.$emit("usernameChanged", e.target.value);
+    },
+    passwordChanged(e) {
+      this.$emit("passwordChanged", e.target.value);
+    }
+  }
+};
+</script>
+
+<style></style>