From ee4eb30ca2656974c0fcfd983ff384a3bc20bdc9 Mon Sep 17 00:00:00 2001
From: CorentinTh <corentin.thomasset74@gmail.com>
Date: Sun, 26 Apr 2020 16:02:39 +0200
Subject: [PATCH] feat: improved date converter input

---
 src/App.vue                      |   3 +
 src/components/DateConverter.vue | 146 +++++++++++++++++++++++++------
 2 files changed, 123 insertions(+), 26 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f8488b39..ea6e9dce 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -99,6 +99,9 @@
 </script>
 
 <style lang="less">
+    html{
+        overflow-y: hidden !important;
+    }
     .single-card {
         width: 100%;
         max-width: 700px !important;
diff --git a/src/components/DateConverter.vue b/src/components/DateConverter.vue
index 51551786..fcc96f0e 100644
--- a/src/components/DateConverter.vue
+++ b/src/components/DateConverter.vue
@@ -1,37 +1,58 @@
 <template>
-    <v-row justify="center">
-        <v-col lg="6" md="6" sm="12" >
+    <v-row justify="center" align="center">
+        <v-col xl="4" lg="6" md="12">
             <v-card class="mb-5">
                 <v-card-title>Input</v-card-title>
                 <v-card-text>
-                    <v-switch v-model="useCurrentDate" label="Use current date"/>
-                </v-card-text>
-            </v-card>
-            <v-card class="mb-5">
-                <v-card-title>Date</v-card-title>
-                <v-card-text>
-                    <v-text-field readonly outlined label="Date" :value="displayedDate.toDateString()"/>
-                    <v-text-field readonly outlined label="Locale date" :value="displayedDate.toLocaleDateString()"/>
-                </v-card-text>
-            </v-card>
-            <v-card class="mb-5">
-                <v-card-title>Time</v-card-title>
-                <v-card-text>
-                    <v-text-field readonly outlined label="Time" :value="displayedDate.toTimeString()"/>
-                    <v-text-field readonly outlined label="Locale time" :value="displayedDate.toLocaleTimeString()"/>
+                    <div class="text-center">
+                        <v-switch v-model="useCurrentDate" label="Use current date"/>
+                    </div>
+
+                    <v-divider></v-divider>
+                    <br>
+
+                    <v-row>
+                        <v-col md="6" sm="12" class="pt-0 pb-0">
+                            <v-select
+                                    :items="formats.filter(f => !f.title.toLowerCase().includes('locale'))"
+                                    item-value="dateFromFormat"
+                                    item-text="title"
+                                    outlined
+                                    label="Your date format"
+                                    placeholder="Input format"
+                                    v-model="inputFormater"
+                                    @input="userInputChanged()"
+                            />
+                        </v-col>
+                        <v-col md="6" sm="12" class="pt-0 pb-0">
+                            <v-text-field
+                                    outlined
+                                    v-model="inputString"
+                                    label="Your date string"
+                                    @input="userInputChanged()"
+                                    :error="invalidInput"
+                            />
+                        </v-col>
+                    </v-row>
                 </v-card-text>
             </v-card>
         </v-col>
-        <v-col lg="6" md="6" sm="12">
-            <v-card >
-                <v-card-title>DateTime</v-card-title>
+        <v-col xl="4" lg="6" md="12" >
+            <v-card>
+                <v-card-title>Dates formats</v-card-title>
                 <v-card-text>
 
-                    <v-text-field readonly outlined label="Locale datetime" :value="displayedDate.toLocaleString()"/>
-                    <v-text-field readonly outlined label="ISO 8601" :value="displayedDate.toISOString()"/>
-                    <v-text-field readonly outlined label="UTC format" :value="displayedDate.toUTCString()"/>
-                    <v-text-field readonly outlined label="UNIX Timestamp (ms)" :value="displayedDate.getTime()"/>
-                    <v-text-field readonly outlined label="Complete" :value="displayedDate.toString()"/>
+                    <v-text-field
+                            dense
+                            readonly
+                            outlined
+                            v-for="format of formats"
+                            v-bind:key="format.title"
+                            :label="format.title"
+                            :value="format.getDate()"
+                            append-icon="fa-clipboard"
+                            @click:append="copyDate(format.getDate())"
+                    />
 
                 </v-card-text>
             </v-card>
@@ -40,20 +61,93 @@
 </template>
 
 <script>
+    import {copyToClipboard} from "../utils/helpers";
+
     export default {
         name: "DateConverter",
         created() {
             setInterval(this.refreshCurrentDate.bind(this), 1000);
+            this.inputFormater = this.formats[1].dateFromFormat;
         },
         data() {
+            const vm = this;
+
             return {
+                inputString: '',
+                inputFormater: undefined,
                 useCurrentDate: true,
                 displayedDate: new Date(),
-                formats: ['locale'],
+                invalidInput: false,
+                formats: [
+                    {
+                        title: 'Locale datetime',
+                        getDate() {
+                            return vm.displayedDate.toLocaleString();
+                        },
+                        dateFromFormat(dateString){
+                            return dateString
+                        }
+                    },
+                    {
+                        title: 'ISO 8601',
+                        getDate() {
+                            return vm.displayedDate.toISOString();
+                        },
+                        dateFromFormat(dateString){
+                            return new Date(dateString)
+                        }
+                    },
+                    {
+                        title: 'UTC format',
+                        getDate() {
+                            return vm.displayedDate.toUTCString();
+                        },
+                        dateFromFormat(dateString){
+                            return new Date(dateString)
+                        }
+                    },
+                    {
+                        title: 'UNIX Timestamp (ms)',
+                        getDate() {
+                            return vm.displayedDate.getTime();
+                        },
+                        dateFromFormat(dateString){
+                            return new Date(parseInt(dateString))
+                        }
+                    },
+                    {
+                        title: 'Complete',
+                        getDate() {
+                            return vm.displayedDate.toString();
+                        },
+                        dateFromFormat(dateString){
+                            return new Date(dateString)
+                        }
+                    }
+                ],
                 refreshCurrentDate() {
                     if (this.useCurrentDate) {
                         this.displayedDate = new Date();
                     }
+                },
+                copyDate(date) {
+                    copyToClipboard(date);
+                    this.$toast.success('Copied to clipboard.')
+                },
+                userInputChanged(){
+                    try{
+                        this.invalidInput = false;
+                        const newDate = this.inputFormater(this.inputString);
+
+                        if(newDate && !isNaN(newDate.getTime())){
+                            this.useCurrentDate = false;
+                            this.displayedDate = newDate;
+                        }else if(this.inputString.length > 0) {
+                            this.invalidInput = true;
+                        }
+                    } catch (ignored) {
+                        //
+                    }
                 }
             }
         }