Cleaning
This commit is contained in:
		| @@ -1,18 +0,0 @@ | ||||
| <script setup lang="ts"> | ||||
| import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue'; | ||||
| import InsertDefaultComponent from '../xml/InsertDefaultComponent.vue'; | ||||
|  | ||||
| defineProps({ | ||||
|   inputValue: {type: String, required: true} | ||||
| }) | ||||
|  | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|   <div class="flex flex-col w-full h-full"> | ||||
|      | ||||
|     <textarea name="data" id="data" :value="$props.inputValue" class="text-field"></textarea> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <style scoped></style> | ||||
| @@ -1,6 +1,6 @@ | ||||
| <script setup lang="ts"> | ||||
|  | ||||
| import InsertDefaultComponent from "./InsertDefaultComponent.vue" | ||||
| import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue' | ||||
|  | ||||
| const props = defineProps( | ||||
|     { | ||||
| @@ -21,7 +21,7 @@ function setDefault(data: string) { | ||||
|     <div class="flex place-content-between w-full pr-2 items-center m-2"> | ||||
|         <span class="dark:text-white">{{ prettyName }}</span> | ||||
|         <div class="flex space-x-2"> | ||||
|             <InsertDefaultComponent :pretty-name="props.prettyName" @update:default-data="(data) => setDefault(data)"></InsertDefaultComponent> | ||||
|             <InsertTemplateComponent :pretty-name="props.prettyName" @update:default-data="(data: string) => setDefault(data)"></InsertTemplateComponent> | ||||
|         </div> | ||||
|          | ||||
|     </div> | ||||
|   | ||||
| @@ -1,6 +1,5 @@ | ||||
| <script setup lang="ts"> | ||||
| import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue'; | ||||
| import { ref } from 'vue'; | ||||
| import { onMounted, ref } from 'vue'; | ||||
|  | ||||
|  | ||||
| const props = defineProps( | ||||
| @@ -13,7 +12,80 @@ const props = defineProps( | ||||
|  | ||||
| const result = ref(''); | ||||
|  | ||||
| function parseResult(data: any) { | ||||
| var engines = ["saxon", "xalan", "libxml"]; | ||||
| var versions = ["1.0", "2.0", "3.0", "3.1"]; | ||||
|  | ||||
| const engine = ref(''); | ||||
| const version = ref(''); | ||||
|  | ||||
|  | ||||
| onMounted(() => { | ||||
|     selectAvailableEngines(); | ||||
|     selectAvailableVersions(); | ||||
|     selectDefaults(); | ||||
| }) | ||||
|  | ||||
| function selectAvailableEngines() { | ||||
|     if (props.tool == "xsd") { | ||||
|         engines = ["xalan", "libxml"] | ||||
|     } | ||||
|     else if (props.tool == "xquery") { | ||||
|         engines = ["saxon"] | ||||
|     } | ||||
| } | ||||
|  | ||||
| function selectAvailableVersions() { | ||||
|     if (props.tool == "xquery") | ||||
|         versions = ["3.1"]; | ||||
|     else if (props.tool == "xslt") | ||||
|         versions = ["3.0"]; | ||||
|     else if (props.tool == "xsd") | ||||
|         versions = ["N/A"]; | ||||
| } | ||||
|  | ||||
| function selectDefaults() { | ||||
|     version.value = versions[versions.length - 1]; | ||||
|     engine.value = engines[0]; | ||||
| } | ||||
|  | ||||
| function process() { | ||||
|     var request:Request = prepareRequest(); | ||||
|     fetchRequest(request).then((data) => { | ||||
|         updateOutputField(data); | ||||
|     }) | ||||
| } | ||||
|  | ||||
| function prepareRequest():Request { | ||||
|     var request = new Request(prepareURL(), { | ||||
|         body: prepareRequestBody(), | ||||
|         method: "POST" | ||||
|     }); | ||||
|     return request | ||||
| } | ||||
|  | ||||
| function prepareURL(): string { | ||||
|    const engineEndpoint = engine.value == "libxml" ? "libxml" : "java"; | ||||
|    return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool; | ||||
| } | ||||
|  | ||||
| function prepareRequestBody():string { | ||||
|     var requestBody = JSON.stringify({ | ||||
|         "data": props.xml, | ||||
|         "process": props.query, | ||||
|         "processor": engine.value, | ||||
|         "version": version.value | ||||
|     }); | ||||
|     return requestBody; | ||||
| } | ||||
|  | ||||
| async function fetchRequest(request: Request):Promise<JSON> { | ||||
|     var responseBody = await fetch(request) | ||||
|     .then(response => response.json()) | ||||
|     .then((body) => body); | ||||
|     return responseBody; | ||||
| } | ||||
|  | ||||
| function updateOutputField(data: any) { | ||||
|     result.value = data.result; | ||||
| } | ||||
|  | ||||
| @@ -21,7 +93,19 @@ function parseResult(data: any) { | ||||
|  | ||||
| <template> | ||||
|     <div class="flex flex-col w-full lg:w-1/2 h-full items-center"> | ||||
|         <xmlOutputFieldToolbarComponent :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent> | ||||
|         <div class="flex place-content-between w-full items-center m-2"> | ||||
|             <span class="dark:text-white">Result:</span> | ||||
|             <div class="flex space-x-2"> | ||||
|                 <select v-model="engine" name="engine" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600"> | ||||
|                     <option v-for="engine in engines" :value="engine">{{ engine }}</option> | ||||
|                 </select> | ||||
|                 <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600"> | ||||
|                     <option v-for="version in versions" :value="version">{{ version }}</option> | ||||
|                 </select> | ||||
|                 <button class="tool-button">Clear</button>     | ||||
|                 <button class="tool-button" @click="process">Process</button> | ||||
|             </div> | ||||
|         </div> | ||||
|         <div class="text-field overflow-scroll"> | ||||
|             <pre class="break-words"><code>{{ result }}</code></pre> | ||||
|         </div> | ||||
|   | ||||
| @@ -1,112 +0,0 @@ | ||||
| <script setup lang="ts"> | ||||
| import { onMounted, ref } from 'vue'; | ||||
|  | ||||
| var engines = ["saxon", "xalan", "libxml"]; | ||||
| var versions = ["1.0", "2.0", "3.0", "3.1"]; | ||||
|  | ||||
| const props = defineProps( | ||||
|     { | ||||
|         tool: {type: String, required: true},  | ||||
|         xml: {type: String}, | ||||
|         query: {type: String}, | ||||
|     } | ||||
| ) | ||||
|  | ||||
| const emit = defineEmits(['update:result']) | ||||
|  | ||||
| const engine = ref(''); | ||||
| const version = ref(''); | ||||
|  | ||||
| const isSaxonHidden = ref(false); | ||||
| const isXalanHidden = ref(false); | ||||
| const isLibXMLHidden = ref(false); | ||||
|  | ||||
|  | ||||
| onMounted(() => { | ||||
|     selectAvailableEngines(); | ||||
|     selectAvailableVersions(); | ||||
|     selectDefaults(); | ||||
| }) | ||||
|  | ||||
| function selectAvailableEngines() { | ||||
|     if (props.tool == "xsd") { | ||||
|         engines = ["xalan", "libxml"] | ||||
|     } | ||||
|     else if (props.tool == "xquery") { | ||||
|         engines = ["saxon"] | ||||
|     } | ||||
| } | ||||
|  | ||||
| function selectAvailableVersions() { | ||||
|     if (props.tool == "xquery") | ||||
|         versions = ["3.1"]; | ||||
|     else if (props.tool == "xsd") | ||||
|         versions = ["N/A"]; | ||||
| } | ||||
|  | ||||
| function selectDefaults() { | ||||
|     version.value = versions[versions.length - 1]; | ||||
|     engine.value = engines[0]; | ||||
| } | ||||
|  | ||||
| function process() { | ||||
|     var request:Request = prepareRequest(); | ||||
|     fetchRequest(request).then((data) => { | ||||
|         sendProcessedData(data); | ||||
|     }) | ||||
| } | ||||
|  | ||||
| function prepareRequest():Request { | ||||
|     var request = new Request(prepareURL(), { | ||||
|         body: prepareRequestBody(), | ||||
|         method: "POST" | ||||
|     }); | ||||
|     return request | ||||
| } | ||||
|  | ||||
| function prepareURL(): string { | ||||
|    const engineEndpoint = engine.value == "libxml" ? "libxml" : "java"; | ||||
|    return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool; | ||||
| } | ||||
|  | ||||
| function prepareRequestBody():string { | ||||
|     var requestBody = JSON.stringify({ | ||||
|         "data": props.xml, | ||||
|         "process": props.query, | ||||
|         "processor": engine.value, | ||||
|         "version": version.value | ||||
|     }); | ||||
|     return requestBody; | ||||
| } | ||||
|  | ||||
| async function fetchRequest(request: Request):Promise<JSON> { | ||||
|     var responseBody = await fetch(request) | ||||
|     .then(response => response.json()) | ||||
|     .then((body) => body); | ||||
|     return responseBody; | ||||
| } | ||||
|  | ||||
| function sendProcessedData(data: JSON) { | ||||
|     emit("update:result", data); | ||||
| } | ||||
|  | ||||
|  | ||||
|  | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|     <div class="flex place-content-between w-full items-center m-2"> | ||||
|         <span class="dark:text-white">Result:</span> | ||||
|         <div class="flex space-x-2"> | ||||
|             <select v-model="engine" name="engine" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600"> | ||||
|                 <option v-for="engine in engines" :value="engine">{{ engine }}</option> | ||||
|             </select> | ||||
|             <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600"> | ||||
|                 <option v-for="version in versions" :value="version">{{ version }}</option> | ||||
|             </select> | ||||
|             <button class="tool-button">Clear</button>     | ||||
|             <button class="tool-button" @click="process">Process</button> | ||||
|         </div> | ||||
|          | ||||
|     </div> | ||||
| </template> | ||||
| @@ -1,13 +1,12 @@ | ||||
| <script setup lang="ts"> | ||||
| import InputFormatterComponent from '@/components/formatter/InputFormatterComponent.vue'; | ||||
| import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue'; | ||||
| import InsertDefaultComponent from '@components/xml/InsertDefaultComponent.vue'; | ||||
| import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'; | ||||
| import { ref } from 'vue'; | ||||
|  | ||||
|  | ||||
| const xml = ref(''); | ||||
|  | ||||
| function setTextFieldValue(data: any) { | ||||
| function setTextFieldValue(data: string) { | ||||
|     xml.value = data | ||||
| } | ||||
|  | ||||
| @@ -22,10 +21,10 @@ function format(formattedXml: any) { | ||||
|         <div id="toolbar" class= "flex flex-col gap-4 items-center md:flex-row place-content-between"> | ||||
|             <span class="dark:text-slate-100">XML Formatter</span> | ||||
|             <div class="space-x-2"> | ||||
|                 <InsertDefaultComponent pretty-name="XML" @update:defaultData="(data: any) => setTextFieldValue(data)"></InsertDefaultComponent> | ||||
|                 <InsertTemplateComponent pretty-name="XML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent> | ||||
|                 <XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent> | ||||
|             </div> | ||||
|         </div> | ||||
|         <InputFormatterComponent :inputValue="xml"></InputFormatterComponent> | ||||
|         <textarea name="data" id="data" :value="xml" class="text-field"></textarea> | ||||
|     </div> | ||||
| </template> | ||||
		Reference in New Issue
	
	Block a user