Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| lxplan [2026/01/25 02:22] – [js version] ssm2017 | lxplan [2026/01/27 12:47] (current) – [js version] ssm2017 | ||
|---|---|---|---|
| Line 1924: | Line 1924: | ||
| <meta charset=" | <meta charset=" | ||
| <meta name=" | <meta name=" | ||
| - | < | + | < |
| - | <script src=" | + | |
| - | <script src=" | + | |
| < | < | ||
| body { | body { | ||
| Line 1951: | Line 1949: | ||
| button: | button: | ||
| background-color: | 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; | ||
| } | } | ||
| </ | </ | ||
| Line 1957: | Line 1982: | ||
| < | < | ||
| < | < | ||
| - | <div> | + | < |
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | les autres si besoin</ | ||
| + | < | ||
| + | bibliotheque (voir l' | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | <div class=" | ||
| < | < | ||
| < | < | ||
| - | <input type=" | + | <input type=" |
| </ | </ | ||
| - | < | + | < |
| - | <h2>Tests</ | + | <h2>Tester le fichier lxxplot</ |
| - | < | + | < |
| - | < | + | < |
| - | < | + | class=" |
| + | < | ||
| <button onclick=" | <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=" | ||
| + | </ | ||
| </ | </ | ||
| < | < | ||
| - | // Charger le fichier XML sélectionné | + | // declaration des variables |
| - | var xmlContent | + | var xmlInputContent = ""; |
| + | var xmlOutputContent = ""; | ||
| + | var shape = ""; | ||
| var isLxxplot = false; | var isLxxplot = false; | ||
| var hasShape = false; | var hasShape = false; | ||
| var hasGroup = false; | var hasGroup = false; | ||
| + | var filledOptionalFields = undefined; | ||
| + | var filledFields = []; | ||
| var isLxxplotDiv = document.getElementById(" | var isLxxplotDiv = document.getElementById(" | ||
| var hasShapeDiv = document.getElementById(" | var hasShapeDiv = document.getElementById(" | ||
| var hasGroupDiv = 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() { | function loadFile() { | ||
| const fileInput = document.getElementById(' | const fileInput = document.getElementById(' | ||
| Line 1990: | Line 2200: | ||
| const reader = new FileReader(); | const reader = new FileReader(); | ||
| reader.onload = function (e) { | reader.onload = function (e) { | ||
| - | | + | |
| - | | + | |
| - | buildOutput(); | + | |
| - | } | + | |
| }; | }; | ||
| reader.readAsText(file); | reader.readAsText(file); | ||
| } | } | ||
| - | | + | |
| - | isLxxplotDiv.textContent = "Sans avis"; | + | |
| - | hasShapeDiv.textContent = "Sans avis"; | + | |
| - | hasGroupDiv.textContent = "Sans avis"; | + | |
| - | } | + | |
| function runChecks() { | function runChecks() { | ||
| isLxxplot = checkIfValidPath("/ | isLxxplot = checkIfValidPath("/ | ||
| hasShape = checkIfValidPath("/ | hasShape = checkIfValidPath("/ | ||
| + | if (hasShape) { | ||
| + | getShape(); | ||
| + | } | ||
| hasGroup = checkIfValidPath("/ | hasGroup = checkIfValidPath("/ | ||
| return (isLxxplot && hasShape && hasGroup); | return (isLxxplot && hasShape && hasGroup); | ||
| } | } | ||
| - | | + | |
| - | console.log(" | + | |
| - | generateTextFile(xmlContent); | + | |
| - | } | + | |
| function checkIfValidPath(xpathQuery, | function checkIfValidPath(xpathQuery, | ||
| resultDiv = document.getElementById(resultDiv); | 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 { | try { | ||
| // Parser le XML | // Parser le XML | ||
| const parser = new DOMParser(); | const parser = new DOMParser(); | ||
| - | const xmlDoc = parser.parseFromString(xmlContent, " | + | const xmlDoc = parser.parseFromString(xmlInputContent, " |
| // Exécuter la requête XPath | // Exécuter la requête XPath | ||
| Line 2041: | Line 2250: | ||
| // Afficher le résultat | // Afficher le résultat | ||
| if (result.length > 0) { | if (result.length > 0) { | ||
| - | | + | |
| - | return | + | |
| } else { | } else { | ||
| - | | + | |
| - | return | + | |
| } | } | ||
| } catch (e) { | } catch (e) { | ||
| - | | + | |
| - | return | + | return |
| } | } | ||
| } | } | ||
| - | function | + | |
| - | const blob = new Blob([content], { type: "text/plain; | + | |
| - | const link = document.createElement("a"); | + | |
| - | link.href = URL.createObjectURL(blob); | + | // Parser le XML |
| - | | + | |
| - | | + | const xmlDoc = parser.parseFromString(xmlInputContent, "text/xml"); |
| - | link.click(); | + | |
| - | | + | // Exécuter la requête XPath |
| - | | + | |
| + | | ||
| + | | ||
| + | null, | ||
| + | XPathResult.FIRST_ORDERED_NODE_TYPE, | ||
| + | null | ||
| + | | ||
| + | |||
| + | shape = xpathResult.singleNodeValue; | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| } | } | ||
| + | // 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); | ||
| + | } | ||
| </ | </ | ||
| </ | </ | ||