Refactor views structure

src/views/general/UnixTimestamp.vue

@@ -0,0 +1,162 @@
+<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]|(\.[0-9]{3})/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>