Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revision | |||
| lxplan [2026/01/25 18:11] – [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> | + | < |
| < | < | ||
| - | < | + | < |
| < | < | ||
| <ul> | <ul> | ||
| Line 1974: | Line 1999: | ||
| </ | </ | ||
| </ | </ | ||
| - | <div> | + | < |
| < | < | ||
| < | < | ||
| - | <input type=" | + | <input type=" |
| </ | </ | ||
| - | < | + | < |
| - | <h2>Tests</ | + | <h2>Tester le fichier lxxplot</ |
| - | < | + | < |
| - | < | + | < |
| - | < | + | class=" |
| + | < | ||
| <button onclick=" | <button onclick=" | ||
| </ | </ | ||
| - | <div id="data_fields"> | + | <div id="dataFields" |
| - | < | + | < |
| <div class=" | <div class=" | ||
| - | <select id=" | ||
| - | <option value=""> | ||
| - | </ | ||
| - | |||
| <div id=" | <div id=" | ||
| + | < | ||
| <div> | <div> | ||
| <label for=" | <label for=" | ||
| <input type=" | <input type=" | ||
| </ | </ | ||
| - | < | + | <div> |
| + | | ||
| <input type=" | <input type=" | ||
| </ | </ | ||
| - | < | + | <div> |
| + | | ||
| <input type=" | <input type=" | ||
| + | </ | ||
| + | <div> | ||
| + | <label for=" | ||
| + | <select id=" | ||
| + | <option value=""> | ||
| + | </ | ||
| </ | </ | ||
| </ | </ | ||
| - | <details> | + | <div id=" |
| - | <summary> | + | <h3> |
| - | Cliquer pour editer les champs optionnels | + | <details> |
| - | </ | + | |
| - | <div id=" | + | |
| - | </ | + | </ |
| - | + | <div id=" | |
| - | <button id=" | + | </ |
| + | </ | ||
| + | <button id=" | ||
| </ | </ | ||
| </ | </ | ||
| < | < | ||
| - | // Charger le fichier XML sélectionné | + | // declaration des variables |
| var xmlInputContent = ""; | var xmlInputContent = ""; | ||
| var xmlOutputContent = ""; | var xmlOutputContent = ""; | ||
| Line 2024: | Line 2057: | ||
| 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 dataTypeSelect = document.getElementById(' | ||
| var dynamicFields = document.getElementById(' | var dynamicFields = document.getElementById(' | ||
| - | document.addEventListener(' | ||
| - | fillSelectOptions(); | ||
| - | }); | ||
| // Tableau des options de la liste de sélection | // Tableau des options de la liste de sélection | ||
| const selectOptions = [ | const selectOptions = [ | ||
| - | { id: "ers;eko", label: " | + | { id: " |
| - | { id: "zers;Zoom Leko", label: "Zoom Leko / ERS", fields: " | + | { id: " |
| - | { id: "fres;Fresnel", label: " | + | { id: " |
| { id: " | { id: " | ||
| { id: " | { id: " | ||
| Line 2051: | Line 2084: | ||
| { id: " | { id: " | ||
| { id: " | { id: " | ||
| - | { id: "cmers;Color Mixing Leko", label: "Color Mixing Leko / ERS", fields: " | + | { id: " |
| - | { id: " | + | { id: " |
| { id: " | { id: " | ||
| { id: " | { id: " | ||
| Line 2096: | Line 2129: | ||
| ]; | ]; | ||
| + | // 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 2107: | Line 2201: | ||
| reader.onload = function (e) { | reader.onload = function (e) { | ||
| xmlInputContent = e.target.result; | xmlInputContent = e.target.result; | ||
| - | runChecks(); | + | |
| - | /*if (runChecks()) { | + | |
| - | 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); | ||
| } | } | ||
| - | | + | // petit utilitaire pour tester le contenu du fichier lxxplot |
| - | console.log(" | + | |
| - | buildXmlOutput(); | + | |
| - | | + | |
| - | } | + | |
| - | + | ||
| - | function buildXmlOutput() { | + | |
| - | // 1. Create a new XML document | + | |
| - | const xml = new DOMParser().parseFromString('< | + | |
| - | const root = xml.documentElement; | + | |
| - | + | ||
| - | // 2. Create and append elements | + | |
| - | const kentryElement = xml.createElement(' | + | |
| - | const kindElement = xml.createElement(" | + | |
| - | kindElement.textContent = " | + | |
| - | const nameElement = xml.createElement(" | + | |
| - | const fnameElement = xml.createElement(" | + | |
| - | const idElement = xml.createElement(" | + | |
| - | const customElement = xml.createElement(" | + | |
| - | const symbolElement = xml.createElement(" | + | |
| - | const groupElement = xml.createElement(" | + | |
| - | const shapeElement = xml.createElement(" | + | |
| - | shapeElement.textContent = shape; | + | |
| - | + | ||
| - | groupElement.appendChild(shapeElement); | + | |
| - | symbolElement.appendChild(groupElement); | + | |
| - | customElement.appendChild(symbolElement); | + | |
| - | kentryElement.appendChild(kindElement); | + | |
| - | kentryElement.appendChild(nameElement); | + | |
| - | kentryElement.appendChild(fnameElement); | + | |
| - | kentryElement.appendChild(idElement); | + | |
| - | kentryElement.appendChild(symbolElement); | + | |
| - | root.appendChild(kentryElement); | + | |
| - | + | ||
| - | // 3. Serialize to string | + | |
| - | const xmlString = new XMLSerializer().serializeToString(xml); | + | |
| - | + | ||
| - | // 4. Create a Blob and URL for download | + | |
| - | const blob = new Blob([xmlString], | + | |
| - | const url = URL.createObjectURL(blob); | + | |
| - | + | ||
| - | // 5. Trigger download | + | |
| - | const a = document.createElement(' | + | |
| - | a.href = url; | + | |
| - | a.download = ' | + | |
| - | a.click(); | + | |
| - | + | ||
| - | // Clean up | + | |
| - | URL.revokeObjectURL(url); | + | |
| - | } | + | |
| - | + | ||
| function checkIfValidPath(xpathQuery, | function checkIfValidPath(xpathQuery, | ||
| resultDiv = document.getElementById(resultDiv); | resultDiv = document.getElementById(resultDiv); | ||
| - | | + | |
| - | | + | resultDiv.innerHTML = status ? '< |
| - | shape = parseXml("/ | + | |
| } | } | ||
| + | // petit utilitaire permettant de tester le xml du fichier lxxplot | ||
| function parseXml(xpathQuery) { | function parseXml(xpathQuery) { | ||
| try { | try { | ||
| Line 2211: | Line 2250: | ||
| // Afficher le résultat | // Afficher le résultat | ||
| if (result.length > 0) { | if (result.length > 0) { | ||
| - | return {" | + | return { " |
| } else { | } else { | ||
| - | return {" | + | return { " |
| } | } | ||
| } catch (e) { | } catch (e) { | ||
| - | | + | console.error(" |
| - | | + | return { " |
| - | return {" | + | |
| } | } | ||
| } | } | ||
| - | function | + | |
| - | /*const blob = new Blob([content], { type: " | + | |
| - | const link = document.createElement("a"); | + | |
| - | | + | // Parser le XML |
| - | link.download = filename; | + | |
| - | | + | const xmlDoc = parser.parseFromString(xmlInputContent, " |
| - | link.click(); | + | |
| - | | + | // Exécuter la requête XPath |
| - | URL.revokeObjectURL(link.href);*/ | + | |
| - | const blob = new Blob([content], | + | |
| - | const url = URL.createObjectURL(blob); | + | |
| - | const a = document.createElement(' | + | |
| - | a.href = url; | + | XPathResult.FIRST_ORDERED_NODE_TYPE, |
| - | a.download = ' | + | |
| - | a.click(); | + | |
| - | URL.revokeObjectURL(url); | + | |
| + | shape = xpathResult.singleNodeValue; | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| } | } | ||
| - | // Remplit | + | // action quand on appuie sur le bouton " |
| - | function | + | function |
| - | | + | |
| - | dataTypeSelect.innerHTML = '< | + | |
| - | selectOptions.forEach((option) => { | + | } |
| - | | + | |
| - | optElement.value = option.id; | + | |
| - | optElement.textContent = option.label; | + | |
| - | dataTypeSelect.appendChild(optElement); | + | |
| - | }); | + | |
| } | } | ||
| - | | + | |
| - | | + | function checkFilledFields() { |
| - | | + | |
| - | }); | + | |
| - | // Affiche les champs dynamiques en fonction de l'option sélectionnée | + | if (Object.keys(filledFields).length < 3 || dataTypeSelect.value === '') { |
| - | | + | alert("Les 4 champs obligatoires doivent être remplis." |
| - | dynamicFields.innerHTML = "" | + | return false; |
| + | | ||
| + | getFilledChildren(' | ||
| + | return true; | ||
| + | } | ||
| - | | + | function getFilledChildren(id) { |
| - | const selectedOption | + | |
| + | const divElement | ||
| + | const inputNodes | ||
| - | if (!selectedOption || !selectedOption.fields) return; | + | |
| + | for (let i = 0; i < inputNodes.length; | ||
| + | | ||
| + | filledFields.push({ " | ||
| + | } | ||
| + | } | ||
| + | } | ||
| - | | + | |
| - | const fieldIds | + | function buildXmlOutput() { |
| + | // creation du document xml | ||
| + | const xmlDoc | ||
| + | const root = xmlDoc.documentElement; | ||
| - | // Affiche chaque champ | + | // creation des elements basiques |
| - | | + | |
| + | const customElement = xmlDoc.createElement(" | ||
| + | const symbolElement | ||
| + | const groupElement = xmlDoc.createElement(" | ||
| + | const kindElement = xmlDoc.createElement(" | ||
| + | kindElement.textContent = dataTypeSelect.value; | ||
| - | const field = availableFields.find((f) => f.id === fieldId); | + | // ajout des elements basiques dans l' |
| + | groupElement.appendChild(shape); | ||
| + | symbolElement.appendChild(groupElement); | ||
| + | customElement.appendChild(symbolElement); | ||
| + | kentryElement.appendChild(kindElement); | ||
| - | if (field) { | + | // ajout de chaque champ rempli |
| - | const fieldDiv | + | filledFields.forEach((item) => { |
| - | | + | const newItem |
| - | <label for=" | + | |
| - | <input type=" | + | |
| - | `; | + | |
| - | | + | |
| - | } | + | |
| }); | }); | ||
| - | } | ||
| + | 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); | ||
| + | } | ||
| </ | </ | ||
| </ | </ | ||