feat: DateConverter

Signed-off-by: CorentinTh <corentin.thomasset74@gmail.com>

src/App.vue

@@ -55,18 +55,16 @@
         </v-app-bar>
 
         <v-content>
-            <v-container class="fill-height">
+            <v-row class="fill-height pa-4" justify="center" align="center" no-gutters>
-                <v-row justify="center" align="center">
                     <router-view></router-view>
-                </v-row>
+            </v-row>
-            </v-container>
         </v-content>
 
-<!--        <v-footer app>-->
+        <!--        <v-footer app>-->
-<!--            <span>&copy; {{new Date().getFullYear()}} <a href="//corentin-thomasset.fr" class="footer-link">Corentin Thomasset</a></span>-->
+        <!--            <span>&copy; {{new Date().getFullYear()}} <a href="//corentin-thomasset.fr" class="footer-link">Corentin Thomasset</a></span>-->
-<!--            <span>A bug ? A feature request ? Stuff happens <a href="https://github.com/CorentinTh/it-tools/issues"-->
+        <!--            <span>A bug ? A feature request ? Stuff happens <a href="https://github.com/CorentinTh/it-tools/issues"-->
-<!--                                                               target="_blank" class="footer-link">here</a>.</span>-->
+        <!--                                                               target="_blank" class="footer-link">here</a>.</span>-->
-<!--        </v-footer>-->
+        <!--        </v-footer>-->
     </v-app>
 </template>
 
@@ -79,15 +77,19 @@
             appVersion: 'v' + process.env.APPLICATION_VERSION,
             drawer: null,
             items: [
-
                 {
                     title: 'Crypto',
                     child: [
                         {icon: 'fa-key', text: 'Token generator', link: '/token-generator'},
-                        {icon: 'fa-key', text: 'Hash text', link: '/hash'},
+                        {icon: 'fa-font', text: 'Hash text', link: '/hash'},
-                    ]
+                    ],
+                },
+                {
+                    title: 'Converter',
+                    child: [
+                        {icon: 'fa-calendar', text: 'Date/Time converter', link: '/date-converter'},
+                    ],
                 }
-
             ],
         }),
         created() {
@@ -97,24 +99,36 @@
 </script>
 
 <style lang="less">
+    .single-card {
+        width: 100%;
+        max-width: 700px !important;
+    }
 
-/*    footer {*/
+    .v-card__title{
-/*        display: flex;*/
+        justify-content: center;
-/*        flex-direction: row;*/
+        font-size: 30px !important;
-/*        justify-content: space-between;*/
+        line-height: 30px !important;
-/*        color: rgba(255, 255, 255, 0.52) !important;*/
+        padding: 30px 0 !important;
+        font-weight: 300 !important;
+    }
 
-/*        .footer-link {*/
+    /*    footer {*/
-/*            text-decoration: none;*/
+    /*        display: flex;*/
-/*            color: rgba(255, 255, 255, 0.52) !important;*/
+    /*        flex-direction: row;*/
-/*            border-bottom: 1px dashed;*/
+    /*        justify-content: space-between;*/
+    /*        color: rgba(255, 255, 255, 0.52) !important;*/
 
-/*            &:hover {*/
+    /*        .footer-link {*/
-/*                color: #4CAF50 !important;*/
+    /*            text-decoration: none;*/
-/*                border-bottom: 1px solid;*/
+    /*            color: rgba(255, 255, 255, 0.52) !important;*/
-/*            }*/
+    /*            border-bottom: 1px dashed;*/
-/*        }*/
+
-/*    }*/
+    /*            &:hover {*/
+    /*                color: #4CAF50 !important;*/
+    /*                border-bottom: 1px solid;*/
+    /*            }*/
+    /*        }*/
+    /*    }*/
 
     .title {
         text-decoration: none;

src/components/DateConverter.vue

@@ -0,0 +1,64 @@
+<template>
+    <v-row justify="center">
+        <v-col lg="6" md="6" sm="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()"/>
+                </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-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-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
+
+<script>
+    export default {
+        name: "DateConverter",
+        created() {
+            setInterval(this.refreshCurrentDate.bind(this), 1000);
+        },
+        data() {
+            return {
+                useCurrentDate: true,
+                displayedDate: new Date(),
+                formats: ['locale'],
+                refreshCurrentDate() {
+                    if (this.useCurrentDate) {
+                        this.displayedDate = new Date();
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="less">
+</style>

src/components/Hash.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-card>
+    <v-card class="single-card">
         <v-card-title>Hash text</v-card-title>
         <v-card-text>
             <v-textarea

src/components/TokenGenerator.vue

@@ -1,34 +1,29 @@
 <template>
-    <v-card>
+    <v-card class="single-card">
         <v-card-title>Token generator</v-card-title>
 
         <v-card-text>
             <v-row no-gutters>
                 <v-col lg="6" md="12">
-                    <v-switch v-model="withLowercase" label="Lowercase (abc...)" color="#4CAF50"/>
+                    <v-switch v-model="withLowercase" label="Lowercase (abc...)"/>
-                    <v-switch v-model="withUppercase" label="Uppercase (ABC...)" color="#4CAF50"/>
+                    <v-switch v-model="withUppercase" label="Uppercase (ABC...)"/>
 
                 </v-col>
                 <v-col lg="6" md="12">
-                    <v-switch v-model="withNumbers" label="Numbers (123...)" color="#4CAF50"/>
+                    <v-switch v-model="withNumbers" label="Numbers (123...)"/>
-                    <v-switch v-model="withSpecials" label="Specials (#]-...)" color="#4CAF50"/>
+                    <v-switch v-model="withSpecials" label="Specials (#]-...)"/>
                 </v-col>
             </v-row>
 
 
-            <v-slider :label="`Length (${length})`" v-model="length" color="#4CAF50"></v-slider>
+            <v-slider :label="`Length (${length})`" v-model="length" min="1" max="256"></v-slider>
 
-            <v-text-field
+            <v-textarea outlined v-model="token"></v-textarea>
-                    outlined
-                    :value="token"
-                    append-icon="fa-refresh"
-                    @click:append="refreshToken()"
-                    append-outer-icon="fa-clipboard"
-                    @click:append-outer="copyToken()"
-            >
-
-            </v-text-field>
 
+            <div class="text-center">
+                <v-btn @click="refreshToken()" depressed class="mr-4">Refresh</v-btn>
+                <v-btn @click="copyToken()" depressed>Copy token</v-btn>
+            </div>
         </v-card-text>
     </v-card>
 </template>
@@ -59,7 +54,7 @@
                 refreshToken() {
                     this.refreshBool = !this.refreshBool;
                 },
-                copyToken(){
+                copyToken() {
                     copyToClipboard(this.token);
                     this.$toast.success('Copied to clipboard.')
                 }
@@ -82,9 +77,6 @@
     }
 </script>
 
-<style>
+<style >
-    .v-card {
+
-        max-width: 600px;
-        width: 500px;
-    }
 </style>

src/plugins/vuetify.js

@@ -11,7 +11,8 @@ Vue.use(Vuetify, {
 export default new Vuetify({
   theme: {
     themes: {
-      light: {
+      theme: 'dark',
+      dark: {
         primary: '#4CAF50',
         secondary: '#424242',
         accent: '#4CAF50',

src/router.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import Home from './routes/Home.vue'
 import TokenGenerator from "./components/TokenGenerator";
 import Hash from "./components/Hash";
+import DateConverter from "./components/DateConverter";
 
 Vue.use(VueRouter)
 
@@ -19,6 +20,10 @@ const routes = [
         path: '/hash',
         component: Hash
     },
+    {
+        path: '/date-converter',
+        component: DateConverter
+    },
     {
         path: '/about',
         name: 'About',

src/routes/Home.vue

@@ -1,6 +1,9 @@
 <template>
   <v-card>
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium culpa dicta dolores eligendi esse harum illum iusto magnam maxime neque nisi nobis nostrum odit quia quo recusandae, saepe veniam voluptatibus?
+    <v-card-text>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad at cumque dolore dolores, dolorum eius error est eum eveniet hic illum ipsum labore minus odio quibusdam repudiandae sed ullam veritatis!
+
+    </v-card-text>
   </v-card>
 </template>