55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
|
<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>
|