Mercurial > gemma

changeset 1532:44e094330272

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
automatic imports: fields added
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 07 Dec 2018 13:34:44 +0100
parents 24445a618513
children 8fc1a2298acb
files client/package.json client/src/components/admin/importschedule/Importschedule.vue client/src/components/admin/importschedule/Importscheduledetail.vue client/src/main.js client/yarn.lock
diffstat 5 files changed, 113 insertions(+), 16 deletions(-) [+]
line wrap: on
line diff
--- a/client/package.json	Fri Dec 07 13:08:17 2018 +0100
+++ b/client/package.json	Fri Dec 07 13:34:44 2018 +0100
@@ -41,6 +41,7 @@
     "vue-clipboard2": "^0.2.1",
     "vue-color": "^2.6.0",
     "vue-highlightjs": "^1.3.3",
+    "vue-js-toggle-button": "^1.3.0",
     "vue-router": "^3.0.2",
     "vue-snotify": "^3.2.1",
     "vuex": "^3.0.1",
--- a/client/src/components/admin/importschedule/Importschedule.vue	Fri Dec 07 13:08:17 2018 +0100
+++ b/client/src/components/admin/importschedule/Importschedule.vue	Fri Dec 07 13:34:44 2018 +0100
@@ -1,8 +1,8 @@
 <template>
   <div class="d-flex flex-row">
     <div :class="spacerStyle"></div>
-    <div class="mt-3">
-      <div class="card schedulecard shadow-xs">
+    <div class="mt-3 w-100">
+      <div class="card flex-grow-1 schedulecard shadow-xs">
         <h6
           class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
         >
@@ -11,7 +11,7 @@
         </h6>
         <div class="card-body schedulecardbody">
           <div class="card-body schedulecardbody">
-            <div class="searchandfilter d-flex flex-row">
+            <div class="searchandfilter  w-50 d-flex flex-row">
               <div class="searchgroup input-group">
                 <div class="input-group-prepend">
                   <span class="input-group-text" id="search">
@@ -148,7 +148,6 @@
 }
 
 .schedulecard {
-  width: 50vw;
   margin-right: $offset;
   min-height: 20rem;
 }
--- a/client/src/components/admin/importschedule/Importscheduledetail.vue	Fri Dec 07 13:08:17 2018 +0100
+++ b/client/src/components/admin/importschedule/Importscheduledetail.vue	Fri Dec 07 13:34:44 2018 +0100
@@ -1,6 +1,9 @@
 <template>
-  <div class="importscheduledetails" v-if="importScheduleDetailVisible">
-    <div class="card shadow-xs">
+  <div
+    class="importscheduledetails  fadeIn animated"
+    v-if="importScheduleDetailVisible"
+  >
+    <div class="card h-100 shadow-xs">
       <h6
         class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
       >
@@ -11,14 +14,77 @@
       </h6>
       <div class="card-body">
         <form @submit.prevent="save" class="ml-3">
-          <small class="text-muted"> <translate>Imports</translate> </small>
-          <select v-model="import_" class="custom-select" id="depthreference">
-            <option
-              v-for="option in this.$options.depthReferenceOptions"
-              :key="option"
-              >{{ option }}</option
-            >
-          </select>
+          <div class="d-flex flex-row w-100">
+            <div class="flex-column w-100">
+              <div class="flex-row text-left">
+                <small class="text-muted">
+                  <translate>Imports</translate>
+                </small>
+              </div>
+              <select v-model="import_" class="custom-select" id="import_">
+                <option v-for="option in this.$options.imports" :key="option">{{
+                  option
+                }}</option>
+              </select>
+            </div>
+          </div>
+          <div class="d-flex flex-row mt-3 w-100 justify-content-between">
+            <div class="flex-column w-100 mr-2">
+              <div class="flex-row text-left">
+                <small class="text-muted">
+                  <translate>Importtype</translate>
+                </small>
+              </div>
+              <select v-model="import_" class="custom-select" id="importtype">
+                <option
+                  v-for="option in this.$options.importtype"
+                  :key="option"
+                  >{{ option }}</option
+                >
+              </select>
+            </div>
+            <div class="flex-column w-100 ml-2">
+              <div class="flex-row text-left">
+                <small class="text-muted">
+                  <translate>Schedule</translate>
+                </small>
+              </div>
+              <select v-model="schedule" class="custom-select" id="period">
+                <option v-for="option in this.$options.periods" :key="option">{{
+                  option
+                }}</option>
+              </select>
+            </div>
+          </div>
+          <div class="flex-column mt-3 w-100 mr-2">
+            <div class="flex-row text-left">
+              <small class="text-muted">
+                <translate>Email Notification</translate>
+              </small>
+            </div>
+            <div class="flex-flex-row text-left">
+              <toggle-button
+                v-model="eMailNotification"
+                class="mt-2"
+                :speed="100"
+                :labels="{
+                  checked: this.$options.on,
+                  unchecked: this.$options.off
+                }"
+                :width="70"
+                :height="30"
+              />
+            </div>
+          </div>
+          <div v-if="eMailNotification" class="flex-column w-100 mr-2">
+            <div class="flex-row text-left">
+              <small class="text-muted"> <translate>Email</translate> </small>
+            </div>
+            <input class="form-control" type="text" />
+          </div>
+          <button type="submit" class="shadow-sm btn btn-info submit-button">
+            <translate>Submit</translate>
+          </button>
         </form>
       </div>
     </div>
@@ -27,31 +93,54 @@
 
 <script>
 import { mapState } from "vuex";
+import { displayInfo } from "../../../lib/errors.js";
 
 export default {
   name: "importscheduledetail",
   data() {
     return {
-      import_: null
+      schedule: null,
+      import_: null,
+      eMailNotification: false
     };
   },
   computed: {
     ...mapState("imports", ["importScheduleDetailVisible"])
   },
   methods: {
+    save() {
+      displayInfo({
+        title: "Import",
+        message: "under construction"
+      });
+    },
     closeDetailview() {
       this.$store.commit("imports/clearImportScheduleDetail");
       this.$store.commit("imports/setImportScheduleDetailInvisible");
     }
+  },
+  imports: [],
+  importtype: [],
+  on: "on",
+  off: "off",
+  periods: {
+    DAILY: "daily",
+    MONTHLY: "monthly"
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .importscheduledetails {
+  height: 420px;
   width: 45%;
   margin-top: $offset;
-  margin-left: $offset;
   margin-right: $offset;
 }
+
+.submit-button {
+  position: absolute;
+  right: $offset;
+  bottom: $offset;
+}
 </style>
--- a/client/src/main.js	Fri Dec 07 13:08:17 2018 +0100
+++ b/client/src/main.js	Fri Dec 07 13:34:44 2018 +0100
@@ -119,6 +119,9 @@
   faWater,
   faWrench
 );
+import ToggleButton from "vue-js-toggle-button";
+Vue.use(ToggleButton);
+
 Vue.component("font-awesome-icon", FontAwesomeIcon);
 
 Vue.use(VTooltip);
--- a/client/yarn.lock	Fri Dec 07 13:08:17 2018 +0100
+++ b/client/yarn.lock	Fri Dec 07 13:34:44 2018 +0100
@@ -10768,6 +10768,11 @@
     tsconfig "^7.0.0"
     vue-template-es2015-compiler "^1.6.0"
 
+vue-js-toggle-button@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/vue-js-toggle-button/-/vue-js-toggle-button-1.3.0.tgz#59240f215fd502f54f0c210c5fac878960b0131c"
+  integrity sha512-lnRy+D7gHlvEyv1WKnvYWkxx42obCmeST5eAUwCnyIS+dC1l9Cu4AuWfw9XrRdNRpY7UZgu2TblZcOOF1H661A==
+
 vue-loader@^15.4.2:
   version "15.4.2"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.4.2.tgz#812bb26e447dd3b84c485eb634190d914ce125e2"