Add unix timestamp tool

package.json

@@ -9,29 +9,29 @@
   },
   "dependencies": {
     "@monaco-editor/loader": "^1.4.0",
-    "autoprefixer": "^10",
+    "autoprefixer": "^10.4.19",
-    "axios": "^0.27.2",
+    "axios": "^1.6.0",
-    "cronstrue": "^2.47.0",
+    "cronstrue": "^2.50.0",
     "easyqrcodejs": "^4.6.1",
-    "mitt": "^3.0.0",
+    "mitt": "^3.0.1",
-    "pinia": "^2.0.14",
+    "moment": "^2.30.1",
-    "postcss": "^8.4.35",
+    "pinia": "^2.1.7",
-    "sql-formatter": "^15.0.2",
+    "postcss": "^8.4.39",
-    "tailwindcss": "^3",
+    "sql-formatter": "^15.3.2",
-    "vue": "^3.2.36",
+    "tailwindcss": "^3.4.4",
-    "vue-axios": "^3.4.1",
+    "vue": "^3.4.31",
-    "vue-router": "^4.0.15"
+    "vue-axios": "^3.5.2",
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.0",
+    "@rushstack/eslint-patch": "^1.10.3",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue": "^2.3.4",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-prettier": "^7.1.0",
-    "autoprefixer": "^10.4.7",
+    "eslint": "^8.57.0",
-    "eslint": "^8.5.0",
+    "eslint-plugin-vue": "^8.7.1",
-    "eslint-plugin-vue": "^8.2.0",
+    "prettier": "^2.8.8",
-    "prettier": "^2.5.1",
+    "sass": "^1.77.6",
-    "sass": "^1.52.3",
+    "vite": "^2.9.18",
-    "vite": "^2.9.17",
     "vue-cli-plugin-tailwind": "~3.0.0"
   }
 }

src/components/Sidebar.vue

@@ -42,6 +42,7 @@ export default {
         'humans_txt': 'humans.txt generator',
         'file_base64_encode_decode': 'File base64 encode/decode',
         'qr_code': 'QR code',
+        'unix_timestamp': 'Unix timestamp',
       },
       'Strings': {
         'fix_ru_en_keyboard': 'Fix ru-en keyboard',

src/router/index.js

@@ -36,6 +36,11 @@ const router = createRouter({
 			name: 'qr_code',
 			component: () => import('../views/QRCode.vue'),
 		},
+		{
+			path: '/unix_timestamp',
+			name: 'unix_timestamp',
+			component: () => import('../views/UnixTimestamp.vue'),
+		},
 
 		/**
 		 * String manipulation

src/views/UnixTimestamp.vue

@@ -0,0 +1,157 @@
+<template>
+  <h2 class="tool-title">Unix timestamp</h2>
+  <hr class="mt-5 mb-5">
+
+  <table>
+    <thead>
+      <tr>
+        <th>Format</th>
+        <th>Date & Time</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(value, format) in currentTimestampFormatted" :key="format">
+        <td>{{ format }}</td>
+        <td>{{ value }}</td>
+        <td><button @click="copyTimestamp(value)">📋</button></td>
+      </tr>
+    </tbody>
+  </table>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="inputTimestamp">Enter timestamp</label>
+
+    <div>
+      <input id="inputTimestamp" type="number" v-model="toolData.inputTimestamp" :placeholder="currentTimestamp">
+      <button @click="convertFromUnix">Convert</button>
+    </div>
+  </div>
+
+  <div class="input-group">
+    <label>Enter Date & Time</label>
+
+    <div>
+      <table class="table-date-and-time">
+        <thead>
+          <tr>
+            <th>Year</th>
+            <th>Month</th>
+            <th>Day</th>
+            <th>Hour (24)</th>
+            <th>Minute</th>
+            <th>Second</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><input type="number" v-model="toolData.inputYear"></td>
+            <td><input type="number" v-model="toolData.inputMonth"></td>
+            <td><input type="number" v-model="toolData.inputDay"></td>
+            <td><input type="number" v-model="toolData.inputHour"></td>
+            <td><input type="number" v-model="toolData.inputMinute"></td>
+            <td><input type="number" v-model="toolData.inputSecond"></td>
+            <td><button @click="convertToUnix">Convert →</button></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+
+export default {
+  data() {
+    return {
+      toolData: {
+        inputTimestamp: '',
+        inputYear: moment().year(),
+        inputMonth: moment().month() + 1,
+        inputDay: moment().day(),
+        inputHour: moment().hour(),
+        inputMinute: moment().minute(),
+        inputSecond: moment().second(),
+      },
+      currentTimestamp: 0,
+      currentTimestampFormatted: {},
+    };
+  },
+  mounted() {
+    const updateCurrentTimestamp = () => {
+      this.currentTimestamp = moment().unix();
+
+      this.currentTimestampFormatted = {
+        'UTC': moment().utc().format('YYYY-MM-DDTHH:mm:ss[Z]'),
+        // 'UTC (local)': moment().format('YYYY-MM-DDTHH:mm:ssZZ'),
+        'ISO 8601': moment().toISOString(),
+        // 'RFC 2822': moment().format('ddd, DD MMM YYYY HH:mm:ss ZZ'),
+        // 'RFC 850': moment().format('dddd, DD-MMM-YY HH:mm:ss [UTC]'),
+        // 'RFC 1036': moment().format('ddd, DD MMM YY HH:mm:ss ZZ'),
+        // 'RFC 1123': moment().format('ddd, DD MMM YYYY HH:mm:ss ZZ'),
+        // 'RFC 822': moment().format('ddd, DD MMM YY HH:mm:ss ZZ'),
+        // 'RFC 3339': moment().format('YYYY-MM-DDTHH:mm:ssZZ'),
+        'COOKIE': moment().format('dddd, DD-MMM-YYYY HH:mm:ss [UTC]'),
+        // 'RSS': moment().format('ddd, DD MMM YYYY HH:mm:ss ZZ'),
+        'Unix Epoch': moment().unix(),
+        'YYYY-DD-MM': moment().format('YYYY/MM/DD'),
+        'SQL DATETIME': moment().toISOString().replaceAll(/[ZT]/g, ' '),
+        'YYYY/DD/MM HH:MM:SS AM/PM': moment().format('YYYY/MM/DD HH:mm:ss A'),
+        'DD.MM.YYYY HH:MM:SS': moment().format('DD.MM.YYYY HH:mm:ss'),
+      };
+    };
+    updateCurrentTimestamp();
+
+    setInterval(updateCurrentTimestamp, 1000);
+  },
+  methods: {
+    convertFromUnix() {
+      let timestamp = this.toolData.inputTimestamp.length ? this.toolData.inputTimestamp : this.currentTimestamp;
+
+      const date = moment.unix(timestamp);
+
+      this.toolData.inputYear = date.year();
+      this.toolData.inputMonth = date.month() + 1;
+      this.toolData.inputDay = date.day();
+      this.toolData.inputHour = date.hour();
+      this.toolData.inputMinute = date.minute();
+      this.toolData.inputSecond = date.second();
+
+    },
+    convertToUnix() {
+      const date = moment({
+        year: this.toolData.inputYear,
+        month: this.toolData.inputMonth - 1, // Months are 0-indexed
+        day: this.toolData.inputDay,
+        hour: this.toolData.inputHour,
+        minute: this.toolData.inputMinute,
+        second: this.toolData.inputSecond
+      });
+
+      this.toolData.inputTimestamp = date.unix();
+    },
+    copyTimestamp(text) {
+      navigator.clipboard.writeText(text)
+        .then(() => {
+          // console.log('Timestamp copied to clipboard!');
+        })
+        .catch(err => {
+          // console.error('Failed to copy: ', err);
+        });
+    },
+  },
+};
+</script>
+
+<style>
+.table-date-and-time th {
+  text-align: left;
+}
+.table-date-and-time td input {
+  width: 80px;
+}
+</style>