Refactor views structure

src/views/php/Serialize.vue

@@ -0,0 +1,65 @@
+<template>
+  <h2 class="tool-title">PHP serialize</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
+  </div>
+
+  <div class="input-group">
+    <label for="data_delimiter">Mode</label>
+
+    <div>
+      <input id="mode_serialize" value="serialize" name="mode" v-model="toolData.mode" v-on:change="result"
+             type="radio"> <label for="mode_serialize">serialize</label><br>
+      <input id="mode_unserialize" value="unserialize" name="mode" v-model="toolData.mode" v-on:change="result"
+             type="radio"> <label for="mode_unserialize">unserialize</label><br>
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <MonacoEditor name="result" language="json" :value="toolResult"></MonacoEditor>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import { config } from "../../../config";
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
+export default {
+  components: {
+    MonacoEditor
+  },
+  data() {
+    return {
+      toolData: {
+        data: "",
+        mode: "serialize"
+      },
+      toolResult: ""
+    };
+  },
+  methods: {
+    result() {
+      axios.post(`${config.APP_URL}/api/php/php_serialize.php`, {
+        data: this.toolData.data,
+        mode: this.toolData.mode
+      })
+        .then((response) => {
+          this.toolResult = response.data;
+
+          Promise.resolve(response);
+        });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>