1. Timer auf 60 Minuten und 10 Minuten vorher eine Warnung

11. Continue statt Review Dataset (im Step 3)
12. keywords auf default 'uncontrolled' einfrieren
14. Lizenzen mit Links versehen
19. Timezone: 'timezone' => 'Europe/Vienna'
20. angefangen mit RDR -> TETHYS Unbenennungen
21. translated validation ausgebessert
22. dataset als Typescript Instanz

resources/js/components/Dataset.ts

@@ -0,0 +1,144 @@
+import { Component, Vue, Watch } from 'vue-property-decorator';
+
+//outside of the component:
+function initialState() {
+  return {
+    type: "",
+    state: "",
+    rights: null,
+    project_id: "",
+
+    creating_corporation: "GBA Repository",
+    language: "",
+    embargo_date: "",
+    belongs_to_bibliography: 0,
+
+    title_main: {
+      value: "",
+      language: ""
+    },
+    abstract_main: {
+      value: "",
+      language: ""
+    },
+    // geolocation: {
+    //   xmin: "",
+    //   ymin: "",
+    //   xmax: "",
+    //   ymax: ""
+    // },
+    coverage: {
+      xmin: "",
+      ymin: "",
+      xmax: "",
+      ymax: "",
+      elevation_min: "",
+      elevation_max: "",
+      elevation_absolut: "",
+      depth_min: "",
+      depth_max: "",
+      depth_absolut: "",
+      time_min: "",
+      time_max: "",
+      time_absolut: ""
+    },
+    checkedAuthors: [],
+    checkedLicenses: [], // [],
+    files: [],
+    keywords: [],
+    references: [],
+    titles: [],
+    descriptions: [],
+    checkedContributors: [],
+    // checkedSubmitters: [],
+
+    persons: [],
+    contributors: []
+    // submitters: []
+  };
+}
+
+// const dataset = new Vue({
+@Component
+export default class Dataset extends Vue {
+  // data: function() {
+  //   return initialState();
+  // }
+  initialState = {};
+  type= "";
+  state= "";
+  rights= null;
+  project_id= "";
+
+  creating_corporation= "TETHYS Repository";
+  language= "";
+  embargo_date= "";
+  belongs_to_bibliography= 0;
+
+  title_main= {
+    value: "",
+    language: ""
+  };
+  abstract_main= {
+    value: "",
+    language: ""
+  };
+  // geolocation: {
+  //   xmin: "",
+  //   ymin: "",
+  //   xmax: "",
+  //   ymax: ""
+  // },
+  coverage= {
+    xmin: "",
+    ymin: "",
+    xmax: "",
+    ymax: "",
+    elevation_min: "",
+    elevation_max: "",
+    elevation_absolut: "",
+    depth_min: "",
+    depth_max: "",
+    depth_absolut: "",
+    time_min: "",
+    time_max: "",
+    time_absolut: ""
+  };
+  checkedAuthors= [];
+  checkedLicenses= [];
+  files= [];
+  keywords= [];
+  references= [];
+  titles= [];
+  descriptions= [];
+  checkedContributors= [];
+  // checkedSubmitters: [],
+
+  persons= [];
+  contributors= [];
+  // submitters: []
+
+  created () {
+    this.initialState = Object.assign({}, this);
+    // let json = JSON.stringify(this.$data);
+    // this.reset = () => {
+    //   Object.assign(this.$data, JSON.parse(json));
+    // };
+    // this.reset(json);
+  }
+
+  @Watch('language')
+  onLanguageChanged(val) {
+    this.title_main.language = val;
+    this.abstract_main.language = val;
+  }
+  
+  
+  reset() {
+    // Object.assign(this.$data, initialState());
+    Object.assign(this.$data, this.initialState);
+  }
+ 
+}
+// export default dataset;
+

resources/js/components/Dataset.vue

@@ -1,87 +0,0 @@
-// <script>
-import Vue from "vue";
-
-//outside of the component:
-function initialState() {
-  return {
-    type: "",
-    state: "",
-    rights: null,
-    project_id: "",
-
-    creating_corporation: "GBA Repository",
-    language: "",
-    embargo_date: "",
-    belongs_to_bibliography: 0,
-
-    title_main: {
-      value: "",
-      language: ""
-    },
-    abstract_main: {
-      value: "",
-      language: ""
-    },
-    // geolocation: {
-    //   xmin: "",
-    //   ymin: "",
-    //   xmax: "",
-    //   ymax: ""
-    // },
-    coverage: {
-      xmin: "",
-      ymin: "",
-      xmax: "",
-      ymax: "",
-      elevation_min: "",
-      elevation_max: "",
-      elevation_absolut: "",
-      depth_min: "",
-      depth_max: "",
-      depth_absolut: "",
-      time_min: "",
-      time_max: "",
-      time_absolut: ""
-    },
-    checkedAuthors: [],
-    checkedLicenses: [], // [],
-    files: [],
-    keywords: [],
-    references: [],
-    titles: [],
-    descriptions: [],
-    checkedContributors: [],
-    // checkedSubmitters: [],
-
-    persons: [],
-    contributors: []
-    // submitters: []
-  };
-}
-
-const dataset = new Vue({
-  data: function() {
-    return initialState();
-  },
-  created: function() {
-    // let json = JSON.stringify(this.$data);
-    // this.reset = () => {
-    //   Object.assign(this.$data, JSON.parse(json));
-    // };
-    // this.reset(json);
-  },
-  watch: {
-    language(val) {
-      this.title_main.language = val;
-      this.abstract_main.language = val;
-    }
-  },  
-  methods: {
-    reset() {
-      Object.assign(this.$data, initialState());
-    }
-  }
-});
-export default dataset;
-//export { dataset };
-</script>

resources/js/components/VueCountdown.ts

@@ -0,0 +1,118 @@
+import EasyTimer from 'easytimer';
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+
+@Component
+export default class VueCountdown extends Vue {
+    // props: {
+    //     seconds: Number,
+    //     countdown: Boolean,
+    //     message: String,
+    //     date: String,
+    //     units: Array,
+    //     start: {
+    //         type: Boolean,
+    //         default: true
+    //     }
+    // },
+
+    @Prop(Number)
+    seconds;
+    @Prop(Boolean)
+    countdown;
+    @Prop([String])
+    message;
+    @Prop([String])
+    date;
+    @Prop([Array])
+    units;
+    @Prop({ default: true, type: Boolean })
+    start: boolean;
+
+
+    // data () {
+    //     return {
+    //         timer: null,
+    //         time: '',
+    //         label: this.message ? this.message : 'Time\'s up!',
+    //         timerUnits: this.units ? this.units : ['hours', 'minutes', 'seconds'],
+    //         timerOptions: {}
+    //     };
+    // },
+
+    warningSeconds: Number = this.seconds;
+    timer: EasyTimer = null;
+    time: string = '';
+    label: string = this.message ? this.message : 'Time\'s up!';
+    timerUnits = this.units ? this.units : ['hours', 'minutes', 'seconds'];
+    timerOptions = {
+        startValues: {},
+        // target: {},
+        countdown: true,
+        current_page: 0,
+        data: []
+    };
+
+    get parsedDate(): number {
+        if (!this.date) {
+            return 0;
+        }
+        return Date.parse(this.date);
+    }
+    
+    created() {
+        this.timer = new EasyTimer();
+
+        const parsedDate = this.parsedDate;
+        const now = Date.now();
+
+        let seconds = this.seconds;
+        this.timerOptions.countdown = true;
+
+        // = {
+        //     countdown: true
+        // };
+
+        if (!parsedDate && this.date) {
+            throw new Error('Please provide valid date');
+        }
+
+        if (now < parsedDate) {
+            seconds = (parsedDate - now) / 1000;
+        }
+
+        this.timerOptions.startValues = {
+            seconds: seconds
+        };
+       
+        if (this.start) {
+            this.timer.start(this.timerOptions);
+        }
+
+        this.time = this.timer.getTimeValues().toString(this.timerUnits);
+
+        this.timer.addEventListener('secondsUpdated', this.onTimeChange.bind(this));
+        this.timer.addEventListener('targetAchieved', this.onTimeExpire.bind(this));
+    }
+
+
+    onTimeChange() {
+        this.warningSeconds = this.timer.getTotalTimeValues().seconds;        
+        this.time = this.timer.getTimeValues().toString(this.timerUnits);
+    }
+
+    onTimeExpire() {
+        this.$emit('time-expire');
+        this.time = this.label;
+    }
+
+
+    @Watch('start')
+    onStartChanged(newValue) {
+        if (newValue) {
+            this.timer.start(this.timerOptions);
+        } else {
+            this.timer.stop();
+        }
+    }
+
+}

resources/js/components/vue-countdown.vue

@@ -0,0 +1,18 @@
+<template>
+    <div v-show="warningSeconds <= 600" class="vue-countdown">
+        <div class="vue-countdown--time">
+            remaining time: {{ time }}
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import VueCountdown from "./VueCountdown";
+export default VueCountdown;
+</script>
+
+<style scoped>
+.vue-countdown--time {
+  color:red;
+}
+</style>