Egg/brown-wall
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Working import mechanism

Browse source
This commit is contained in:
Nox Sluijtman 2023-11-01 17:45:00 +01:00
parent c41f60587b
commit 374238d472
2 changed files with 26 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
brown-wall.html
View file

@ -16,7 +16,6 @@
<input type="file" id="selectFiles" value="Import"/> <input type="file" id="selectFiles" value="Import"/>
<button id="import">Import</button> <button id="import">Import</button>
<textarea id="result" cols="30" rows="10"></textarea>
</main> </main>
</body> </body>
<script src="main.js"></script> <script src="main.js"></script>

51
main.js
View file

@ -1,41 +1,42 @@
"using strict"; "using strict";
const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ], "description":"What it says on the tin." }, { "name": "Genre", "items": [ "FFP", "Jiminy Cockthroat", "しひろ Cockthroat", "Spunk Gargle Weewee" ], "description":"Overal genre of the thinky thing" } ]; // const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ], "description":"What it says on the tin." }, { "name": "Genre", "items": [ "FFP", "Jiminy Cockthroat", "しひろ Cockthroat", "Spunk Gargle Weewee" ], "description":"Overal genre of the thinky thing" } ];
const menuContainer = document.getElementById('menu-container'); function initLists (lists){
const menuContainer = document.getElementById('menu-container');
menus.forEach( menu =>{ menus.forEach( menu =>{
const dropdownMenu = document.createElement('menu'); const dropdownMenu = document.createElement('menu');
const menuTitle = Object.assign(document.createElement('h2'), {innerHTML:menu.name}); const menuTitle = Object.assign(document.createElement('h2'), {innerHTML:menu.name});
const description = Object.assign(document.createElement('p'), {innerHTML:menu.description}); const description = Object.assign(document.createElement('p'), {innerHTML:menu.description});
const dropdownSelect = document.createElement('select'); const dropdownSelect = document.createElement('select');
dropdownMenu.id = menu.name.toLowerCase(); dropdownMenu.id = menu.name.toLowerCase();
dropdownMenu.className = "dropdown-menu"; dropdownMenu.className = "dropdown-menu";
dropdownMenu.appendChild(menuTitle) dropdownMenu.appendChild(menuTitle);
dropdownMenu.appendChild(description) dropdownMenu.appendChild(description);
menuContainer.appendChild(dropdownMenu) menuContainer.appendChild(dropdownMenu);
dropdownMenu.appendChild(dropdownSelect) dropdownMenu.appendChild(dropdownSelect);
menu.items.forEach(item =>{ menu.items.forEach(item =>{
dropdownSelect.append(Object.assign(document.createElement('option'), {id:item.toLowerCase(), innerHTML:item})) dropdownSelect.append(Object.assign(document.createElement('option'), {id:item.toLowerCase(), innerHTML:item}));
}) });
}) });
};
document.getElementById('import').onclick = function() { document.getElementById('import').onclick = function() {
const files = document.getElementById('selectFiles').files; const files = document.getElementById('selectFiles').files;
if (files.length <= 0) { if (files.length <= 0) {
return false; return false;
} }
var fr = new FileReader(); const fr = new FileReader();
fr.onload = function(e) { fr.onload = function(e) {
console.log(e); console.log(e);
var result = JSON.parse(e.target.result); const result = JSON.parse(e.target.result);
var formatted = JSON.stringify(result, null, 2); initLists(JSON.stringify(result, null, 2));
document.getElementById('result').value = formatted;
} }
fr.readAsText(files.item(0)); fr.readAsText(files.item(0));
}; };