Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| lxplan [2026/01/19 19:26] – removed sxh ssm2017 | lxplan [2026/01/27 12:47] (current) – [js version] ssm2017 | ||
|---|---|---|---|
| Line 1914: | Line 1914: | ||
| app = XMLExtractorApp(root) | app = XMLExtractorApp(root) | ||
| root.mainloop() | root.mainloop() | ||
| + | </ | ||
| + | |||
| + | ==== js version ==== | ||
| + | <code javascript> | ||
| + | < | ||
| + | <html lang=" | ||
| + | |||
| + | < | ||
| + | <meta charset=" | ||
| + | <meta name=" | ||
| + | < | ||
| + | < | ||
| + | body { | ||
| + | font-family: | ||
| + | margin: 20px; | ||
| + | line-height: | ||
| + | } | ||
| + | |||
| + | textarea { | ||
| + | width: 100%; | ||
| + | height: 200px; | ||
| + | margin: 10px 0; | ||
| + | } | ||
| + | |||
| + | button { | ||
| + | padding: 8px 16px; | ||
| + | background-color: | ||
| + | color: white; | ||
| + | border: none; | ||
| + | border-radius: | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | button: | ||
| + | background-color: | ||
| + | } | ||
| + | |||
| + | .test-result> | ||
| + | font-weight: | ||
| + | padding: 5px; | ||
| + | } | ||
| + | |||
| + | .valid { | ||
| + | color: white; | ||
| + | background-color: | ||
| + | } | ||
| + | |||
| + | .invalid { | ||
| + | color: white; | ||
| + | background-color: | ||
| + | } | ||
| + | |||
| + | .no-answer { | ||
| + | color: black; | ||
| + | background-color: | ||
| + | } | ||
| + | |||
| + | .container { | ||
| + | border: 1px solid black; | ||
| + | border-radius: | ||
| + | margin: 5px; | ||
| + | padding: 10px; | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | < | ||
| + | <div class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <ul> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | les autres si besoin</ | ||
| + | < | ||
| + | bibliotheque (voir l' | ||
| + | </ul> | ||
| + | </p> | ||
| + | </ | ||
| + | </ | ||
| + | <div class=" | ||
| + | < | ||
| + | < | ||
| + | <input type=" | ||
| + | </ | ||
| + | <div class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | class=" | ||
| + | < | ||
| + | <button onclick=" | ||
| + | </ | ||
| + | <div id=" | ||
| + | < | ||
| + | <div class=" | ||
| + | <div id=" | ||
| + | < | ||
| + | <div> | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | <div> | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | <div> | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | <div> | ||
| + | <label for=" | ||
| + | <select id=" | ||
| + | <option value=""> | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | <div id=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | Cliquer içi pour editer les champs optionnels | ||
| + | </ | ||
| + | <div id=" | ||
| + | </ | ||
| + | </ | ||
| + | <button id=" | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | // declaration des variables | ||
| + | var xmlInputContent = ""; | ||
| + | var xmlOutputContent = ""; | ||
| + | var shape = ""; | ||
| + | var isLxxplot = false; | ||
| + | var hasShape = false; | ||
| + | var hasGroup = false; | ||
| + | var filledOptionalFields = undefined; | ||
| + | var filledFields = []; | ||
| + | var isLxxplotDiv = document.getElementById(" | ||
| + | var hasShapeDiv = document.getElementById(" | ||
| + | var hasGroupDiv = document.getElementById(" | ||
| + | var dataFields = document.getElementById(" | ||
| + | var dataTypeSelect = document.getElementById(' | ||
| + | var dynamicFields = document.getElementById(' | ||
| + | |||
| + | // Tableau des options de la liste de sélection | ||
| + | const selectOptions = [ | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | ]; | ||
| + | |||
| + | // Tableau des champs disponibles | ||
| + | const availableFields = [ | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | { id: " | ||
| + | ]; | ||
| + | |||
| + | // reinitialise les resultats du test de fichier | ||
| + | function resetChecks() { | ||
| + | let content = '< | ||
| + | isLxxplotDiv.innerHTML = content; | ||
| + | hasShapeDiv.innerHTML = content; | ||
| + | hasGroupDiv.innerHTML = content; | ||
| + | dataFields.hidden = true; | ||
| + | } | ||
| + | |||
| + | // action quand le document est bien chargé | ||
| + | document.addEventListener(' | ||
| + | resetChecks(); | ||
| + | fillSelectOptions(); | ||
| + | }); | ||
| + | |||
| + | // Remplit la liste déroulante de type d' | ||
| + | function fillSelectOptions() { | ||
| + | dataTypeSelect.innerHTML = '< | ||
| + | selectOptions.forEach((option) => { | ||
| + | const optElement = document.createElement(" | ||
| + | optElement.value = option.id; | ||
| + | optElement.textContent = option.label; | ||
| + | dataTypeSelect.appendChild(optElement); | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | // ecoute si le type d' | ||
| + | dataTypeSelect.addEventListener(" | ||
| + | const selectedOptionId = dataTypeSelect.value; | ||
| + | displayDynamicFields(selectedOptionId); | ||
| + | }); | ||
| + | |||
| + | // Affiche les champs optionnels en fonction du type d' | ||
| + | function displayDynamicFields(selectedOptionId) { | ||
| + | dynamicFields.innerHTML = "";// | ||
| + | |||
| + | // Trouve l' | ||
| + | const selectedOption = selectOptions.find((option) => option.id === selectedOptionId); | ||
| + | |||
| + | if (!selectedOption || !selectedOption.fields) return; | ||
| + | |||
| + | // Récupère les IDs des champs à afficher | ||
| + | const fieldIds = selectedOption.fields.split(";" | ||
| + | |||
| + | // Affiche chaque champ | ||
| + | fieldIds.forEach((fieldId) => { | ||
| + | |||
| + | const field = availableFields.find((f) => f.id === fieldId); | ||
| + | |||
| + | if (field) { | ||
| + | const fieldDiv = document.createElement(" | ||
| + | fieldDiv.innerHTML = ` | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | `; | ||
| + | dynamicFields.appendChild(fieldDiv); | ||
| + | } | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | // charge le fichier lxxplot | ||
| + | function loadFile() { | ||
| + | const fileInput = document.getElementById(' | ||
| + | const file = fileInput.files[0]; | ||
| + | if (!file) { | ||
| + | alert(" | ||
| + | return; | ||
| + | } | ||
| + | |||
| + | const reader = new FileReader(); | ||
| + | reader.onload = function (e) { | ||
| + | xmlInputContent = e.target.result; | ||
| + | dataFields.hidden = !runChecks(); | ||
| + | }; | ||
| + | reader.readAsText(file); | ||
| + | } | ||
| + | |||
| + | // verifie le contenu du fichier lxxplot | ||
| + | function runChecks() { | ||
| + | isLxxplot = checkIfValidPath("/ | ||
| + | hasShape = checkIfValidPath("/ | ||
| + | if (hasShape) { | ||
| + | getShape(); | ||
| + | } | ||
| + | hasGroup = checkIfValidPath("/ | ||
| + | return (isLxxplot && hasShape && hasGroup); | ||
| + | } | ||
| + | |||
| + | // petit utilitaire pour tester le contenu du fichier lxxplot | ||
| + | function checkIfValidPath(xpathQuery, | ||
| + | resultDiv = document.getElementById(resultDiv); | ||
| + | let status = parseXml(xpathQuery).status; | ||
| + | resultDiv.innerHTML = status ? '< | ||
| + | return status; | ||
| + | } | ||
| + | |||
| + | // petit utilitaire permettant de tester le xml du fichier lxxplot | ||
| + | function parseXml(xpathQuery) { | ||
| + | try { | ||
| + | // Parser le XML | ||
| + | const parser = new DOMParser(); | ||
| + | const xmlDoc = parser.parseFromString(xmlInputContent, | ||
| + | |||
| + | // Exécuter la requête XPath | ||
| + | const xpathResult = document.evaluate( | ||
| + | xpathQuery, | ||
| + | xmlDoc, | ||
| + | null, | ||
| + | XPathResult.ANY_TYPE, | ||
| + | null | ||
| + | ); | ||
| + | |||
| + | let result = []; | ||
| + | let node = xpathResult.iterateNext(); | ||
| + | while (node) { | ||
| + | result.push(node.textContent); | ||
| + | node = xpathResult.iterateNext(); | ||
| + | } | ||
| + | |||
| + | // Afficher le résultat | ||
| + | if (result.length > 0) { | ||
| + | return { " | ||
| + | } else { | ||
| + | return { " | ||
| + | } | ||
| + | } catch (e) { | ||
| + | console.error(" | ||
| + | return { " | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // reuperer la shape depuis le fichier lxxplot | ||
| + | function getShape() { | ||
| + | try { | ||
| + | // Parser le XML | ||
| + | const parser = new DOMParser(); | ||
| + | const xmlDoc = parser.parseFromString(xmlInputContent, | ||
| + | |||
| + | // Exécuter la requête XPath | ||
| + | const xpathResult = document.evaluate( | ||
| + | "/ | ||
| + | xmlDoc, | ||
| + | null, | ||
| + | XPathResult.FIRST_ORDERED_NODE_TYPE, | ||
| + | null | ||
| + | ); | ||
| + | |||
| + | shape = xpathResult.singleNodeValue; | ||
| + | } catch (e) { | ||
| + | console.error(" | ||
| + | return { " | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // action quand on appuie sur le bouton "creer la librairie" | ||
| + | function buildOutput() { | ||
| + | if (checkFilledFields()) { | ||
| + | buildXmlOutput(); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // verifier que les champs soient bien remplis | ||
| + | function checkFilledFields() { | ||
| + | filledFields = []; | ||
| + | getFilledChildren(' | ||
| + | if (Object.keys(filledFields).length < 3 || dataTypeSelect.value === '' | ||
| + | alert(" | ||
| + | return false; | ||
| + | } | ||
| + | getFilledChildren(' | ||
| + | return true; | ||
| + | } | ||
| + | |||
| + | function getFilledChildren(id) { | ||
| + | // recupere les champs | ||
| + | const divElement = document.getElementById(id); | ||
| + | const inputNodes = divElement.getElementsByTagName(' | ||
| + | |||
| + | // teste les champs un par un | ||
| + | for (let i = 0; i < inputNodes.length; | ||
| + | if (inputNodes[i].value.trim() !== '' | ||
| + | filledFields.push({ " | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // fabrique le fichier de sortie et l' | ||
| + | function buildXmlOutput() { | ||
| + | // creation du document xml | ||
| + | const xmlDoc = new DOMParser().parseFromString('< | ||
| + | const root = xmlDoc.documentElement; | ||
| + | |||
| + | // creation des elements basiques | ||
| + | const kentryElement = xmlDoc.createElement(' | ||
| + | const customElement = xmlDoc.createElement(" | ||
| + | const symbolElement = xmlDoc.createElement(" | ||
| + | const groupElement = xmlDoc.createElement(" | ||
| + | const kindElement = xmlDoc.createElement(" | ||
| + | kindElement.textContent = dataTypeSelect.value; | ||
| + | |||
| + | // ajout des elements basiques dans l' | ||
| + | groupElement.appendChild(shape); | ||
| + | symbolElement.appendChild(groupElement); | ||
| + | customElement.appendChild(symbolElement); | ||
| + | kentryElement.appendChild(kindElement); | ||
| + | |||
| + | // ajout de chaque champ rempli | ||
| + | filledFields.forEach((item) => { | ||
| + | const newItem = xmlDoc.createElement(item.id); | ||
| + | newItem.textContent = item.value; | ||
| + | kentryElement.appendChild(newItem); | ||
| + | }); | ||
| + | |||
| + | kentryElement.appendChild(customElement); | ||
| + | root.appendChild(kentryElement); | ||
| + | |||
| + | // conversion en chaine de characteres | ||
| + | const xmlString = "<? | ||
| + | console.log(xmlString); | ||
| + | |||
| + | // creation fichier | ||
| + | const blob = new Blob([xmlString], | ||
| + | const url = URL.createObjectURL(blob); | ||
| + | |||
| + | // envoi du fichier | ||
| + | const a = document.createElement(' | ||
| + | a.href = url; | ||
| + | a.download = ' | ||
| + | a.click(); | ||
| + | |||
| + | // nettoyage | ||
| + | URL.revokeObjectURL(url); | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | </ | ||
| </ | </ | ||