feat: DateConverter
Signed-off-by: CorentinTh <corentin.thomasset74@gmail.com>
This commit is contained in:
CorentinTh
Corentin THOMASSET
parent
d1db2c8601
commit
5a06d89bcc
70
src/App.vue
70
src/App.vue
@ -55,18 +55,16 @@
|
||||
</v-app-bar>
|
||||
|
||||
<v-content>
|
||||
<v-container class="fill-height">
|
||||
<v-row justify="center" align="center">
|
||||
<v-row class="fill-height pa-4" justify="center" align="center" no-gutters>
|
||||
<router-view></router-view>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-content>
|
||||
|
||||
<!-- <v-footer app>-->
|
||||
<!-- <span>© {{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"-->
|
||||
<!-- target="_blank" class="footer-link">here</a>.</span>-->
|
||||
<!-- </v-footer>-->
|
||||
<!-- <v-footer app>-->
|
||||
<!-- <span>© {{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"-->
|
||||
<!-- target="_blank" class="footer-link">here</a>.</span>-->
|
||||
<!-- </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 {*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: row;*/
|
||||
/* justify-content: space-between;*/
|
||||
/* color: rgba(255, 255, 255, 0.52) !important;*/
|
||||
.v-card__title{
|
||||
justify-content: center;
|
||||
font-size: 30px !important;
|
||||
line-height: 30px !important;
|
||||
padding: 30px 0 !important;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
/* .footer-link {*/
|
||||
/* text-decoration: none;*/
|
||||
/* color: rgba(255, 255, 255, 0.52) !important;*/
|
||||
/* border-bottom: 1px dashed;*/
|
||||
/* footer {*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: row;*/
|
||||
/* justify-content: space-between;*/
|
||||
/* color: rgba(255, 255, 255, 0.52) !important;*/
|
||||
|
||||
/* &:hover {*/
|
||||
/* color: #4CAF50 !important;*/
|
||||
/* border-bottom: 1px solid;*/
|
||||
/* }*/
|
||||
/* }*/
|
||||
/* }*/
|
||||
/* .footer-link {*/
|
||||
/* text-decoration: none;*/
|
||||
/* color: rgba(255, 255, 255, 0.52) !important;*/
|
||||
/* border-bottom: 1px dashed;*/
|
||||
|
||||
/* &:hover {*/
|
||||
/* color: #4CAF50 !important;*/
|
||||
/* border-bottom: 1px solid;*/
|
||||
/* }*/
|
||||
/* }*/
|
||||
/* }*/
|
||||
|
||||
.title {
|
||||
text-decoration: none;
|
||||
|
||||
64
src/components/DateConverter.vue
Normal file
64
src/components/DateConverter.vue
Normal file
@ -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>
|
||||
@ -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
|
||||
|
||||
@ -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="withUppercase" label="Uppercase (ABC...)" color="#4CAF50"/>
|
||||
<v-switch v-model="withLowercase" label="Lowercase (abc...)"/>
|
||||
<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="withSpecials" label="Specials (#]-...)" color="#4CAF50"/>
|
||||
<v-switch v-model="withNumbers" label="Numbers (123...)"/>
|
||||
<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
|
||||
outlined
|
||||
:value="token"
|
||||
append-icon="fa-refresh"
|
||||
@click:append="refreshToken()"
|
||||
append-outer-icon="fa-clipboard"
|
||||
@click:append-outer="copyToken()"
|
||||
>
|
||||
|
||||
</v-text-field>
|
||||
<v-textarea outlined v-model="token"></v-textarea>
|
||||
|
||||
<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>
|
||||
.v-card {
|
||||
max-width: 600px;
|
||||
width: 500px;
|
||||
}
|
||||
<style >
|
||||
|
||||
</style>
|
||||
@ -11,7 +11,8 @@ Vue.use(Vuetify, {
|
||||
export default new Vuetify({
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
theme: 'dark',
|
||||
dark: {
|
||||
primary: '#4CAF50',
|
||||
secondary: '#424242',
|
||||
accent: '#4CAF50',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user