Add Str to NATO alphabet tool

src/components/Sidebar.vue

@@ -48,7 +48,8 @@ export default {
         'str_to_lower_upper': 'Str to lower/upper',
         'str_remove_duplicate_lines': 'Str remove duplicate lines',
         'str_pad': 'Str pad',
-        'numeronym': 'Str numeronym (i18n)',
+        'str_numeronym': 'Str numeronym (i18n)',
+        'str_to_nato_alphabet': 'Str to NATO alphabet',
         'url_encode_decode': 'URL encode/decode',
         'url_query_viewer': 'URL query viewer',
       },

src/router/index.js

@@ -66,10 +66,15 @@ const router = createRouter({
 			component: () => import('../views/StrToPHPArray.vue'),
 		},
 		{
-			path: '/numeronym',
-			name: 'numeronym',
+			path: '/str_numeronym',
+			name: 'str_numeronym',
 			component: () => import('../views/StrNumeronym.vue'),
 		},
+		{
+			path: '/str_to_nato_alphabet',
+			name: 'str_to_nato_alphabet',
+			component: () => import('../views/StrToNATOAlphabet.vue'),
+		},
 		{
 			path: '/php_array_to_json',
 			name: 'php_array_to_json',

src/views/StrToNATOAlphabet.vue

@@ -0,0 +1,55 @@
+<template>
+  <h2 class="tool-title">Str to NATO alphabet</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <input id="data" v-model="toolData.data" v-on:keyup="result" type="text">
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <MonacoEditor name="result" language="php" :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: '',
+      },
+      toolResult: '',
+    };
+  },
+  methods: {
+    result() {
+      const natoAlphabet = {
+        'A': 'Alpha',   'B': 'Bravo',    'C': 'Charlie',  'D': 'Delta',
+        'E': 'Echo',    'F': 'Foxtrot',  'G': 'Golf',     'H': 'Hotel',
+        'I': 'India',   'J': 'Juliett',  'K': 'Kilo',     'L': 'Lima',
+        'M': 'Mike',    'N': 'November', 'O': 'Oscar',    'P': 'Papa',
+        'Q': 'Quebec',  'R': 'Romeo',    'S': 'Sierra',   'T': 'Tango',
+        'U': 'Uniform', 'V': 'Victor',   'W': 'Whiskey',  'X': 'X-ray',
+        'Y': 'Yankee',  'Z': 'Zulu',
+      };
+
+      this.toolResult = this.toolData.data.toUpperCase().split('').map(char => natoAlphabet[char] || char).join(' ');
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>