forked from esphome/esp-web-tools
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/youseetoo/youseetoo.github.io
- Loading branch information
Showing
5 changed files
with
195 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Part Identifier Constructor</title> | ||
| <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> | ||
|
|
||
| <script> | ||
| const categories = { | ||
| "BAS": { | ||
| "name": "Basic", | ||
| "subcategories": { | ||
| "OPT": { | ||
| "name": "Optical Components", | ||
| "materials": { | ||
| "BEA": "Beamsplitter", | ||
| "FIL": "Filter", | ||
| "LEN": "Lens", | ||
| "MIR": "Mirror", | ||
| "OBJ": "Objective and Eyepieces", | ||
| "PIN": "Pinhole and Iris", | ||
| "SAM": "Samples" | ||
| } | ||
| }, | ||
| "EMC": { | ||
| "name": "Electro-Mechanical Components", | ||
| "materials": { | ||
| "CAM": "Cameras", | ||
| "EMB": "Embedded Devices", | ||
| "LIG": "Light Sources", | ||
| "MOT": "Motors and Drivers", | ||
| "STA": "Stage", | ||
| "WIR": "Wires" | ||
| } | ||
| }, | ||
| "HAB": { | ||
| "name": "Housings and Brackets", | ||
| "materials": { | ||
| "CAS": "Cases", | ||
| "CUB": "Cubes and Combiners", | ||
| "HOL": "Holders", | ||
| "INS": "Inserts" | ||
| } | ||
| }, | ||
| "PAI": { | ||
| "name": "Packaging and Instructions", | ||
| "materials": { | ||
| "ISN": "Instruction", | ||
| "FOA": "Foam", | ||
| "PAC": "Packing Materials" | ||
| } | ||
| }, | ||
| "EMM": { | ||
| "name": "Electro-Mechanical Compounds", | ||
| "materials": { | ||
| "OUC": "oUC2" | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| // Adding Module and Line categories with placeholders for subcategories | ||
| "MOD": { | ||
| "name": "Module", | ||
| "subcategories": { | ||
| // Placeholder for Module subcategories | ||
| // Example: | ||
| // "MOD1": { | ||
| // "name": "Module Type 1", | ||
| // "materials": { | ||
| // "MOD1_MAT1": "Material 1", | ||
| // "MOD1_MAT2": "Material 2" | ||
| // } | ||
| // } | ||
| } | ||
| }, | ||
| "LIN": { | ||
| "name": "Line", | ||
| "subcategories": { | ||
| // Placeholder for Line subcategories | ||
| // Example: | ||
| // "LIN1": { | ||
| // "name": "Line Type 1", | ||
| // "materials": { | ||
| // "LIN1_MAT1": "Material 1", | ||
| // "LIN1_MAT2": "Material 2" | ||
| // } | ||
| // } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| function populateCategories() { | ||
| const categorySelect = document.getElementById('catid'); | ||
| Object.keys(categories).forEach(catId => { | ||
| const option = new Option(categories[catId].name, catId); | ||
| categorySelect.add(option); | ||
| }); | ||
| } | ||
|
|
||
| function updateSubcategories() { | ||
| const catId = document.getElementById('catid').value; | ||
| const subcategorySelect = document.getElementById('scatid'); | ||
| subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>'; | ||
| if (!catId) return; | ||
|
|
||
| const subcategories = categories[catId].subcategories; | ||
| Object.keys(subcategories).forEach(scatId => { | ||
| const option = new Option(subcategories[scatId].name, scatId); | ||
| subcategorySelect.add(option); | ||
| }); | ||
| updateMaterials(); | ||
| } | ||
|
|
||
| function updateMaterials() { | ||
| const catId = document.getElementById('catid').value; | ||
| const scatId = document.getElementById('scatid').value; | ||
| const materialSelect = document.getElementById('mtid'); | ||
| materialSelect.innerHTML = '<option value="">Select Material/Module</option>'; | ||
| if (!catId || !scatId) return; | ||
|
|
||
| const materials = categories[catId].subcategories[scatId].materials; | ||
| Object.keys(materials).forEach(material => { | ||
| const option = new Option(materials[material], material); | ||
| materialSelect.add(option); | ||
| }); | ||
| } | ||
|
|
||
| function generateIdentifier() { | ||
| const catId = document.getElementById('catid').value; | ||
| const scatId = document.getElementById('scatid').value; | ||
| const mtid = document.getElementById('mtid').value; // This now gets the abbreviation | ||
| const cid = document.getElementById('cid').value; | ||
| const mvid = document.getElementById('mvid').value; | ||
| const seqn = document.getElementById('seqn').value; | ||
| const revn = document.getElementById('revn').value; | ||
|
|
||
| const identifier = `${catId}__${scatId}__${mtid}__${cid}__${mvid}__${seqn}__${revn}`; | ||
| document.getElementById('identifierOutput').textContent = `Generated Identifier: ${identifier}`; | ||
| } | ||
|
|
||
| window.onload = function() { | ||
| populateCategories(); | ||
| }; | ||
| </script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="container mt-5"> | ||
| <h2>Part Identifier Constructor</h2> | ||
| <form id="partIdentifierForm" class="row"> | ||
| <div class="form-group col-12 col-md-2"> | ||
| <label for="catid">Category</label> | ||
| <select id="catid" name="catid" class="form-control" onchange="updateSubcategories()"> | ||
| <option value="">Select Category</option> | ||
| </select> | ||
| </div> | ||
| <div class="form-group col-12 col-md-2"> | ||
| <label for="scatid">Subcategory</label> | ||
| <select id="scatid" name="scatid" class="form-control" onchange="updateMaterials()"> | ||
| <option value="">Select Subcategory</option> | ||
| </select> | ||
| </div> | ||
| <div class="form-group col-12 col-md-2"> | ||
| <label for="mtid">Material/Module</label> | ||
| <select id="mtid" name="mtid" class="form-control"> | ||
| <option value="">Select Material/Module</option> | ||
| </select> | ||
| </div> | ||
| <div class="form-group col-12 col-md-1"> | ||
| <label for="cid">Company ID</label> | ||
| <input type="text" id="cid" name="cid" class="form-control"> | ||
| </div> | ||
| <div class="form-group col-12 col-md-1"> | ||
| <label for="mvid">Model/Variant ID</label> | ||
| <input type="text" id="mvid" name="mvid" class="form-control"> | ||
| </div> | ||
| <div class="form-group col-12 col-md-1"> | ||
| <label for="seqn">Seq. Number</label> | ||
| <input type="text" id="seqn" name="seqn" class="form-control"> | ||
| </div> | ||
| <div class="form-group col-12 col-md-1"> | ||
| <label for="revn">Revision No.</label> | ||
| <input type="text" id="revn" name="revn" class="form-control" style="width: 200px;"> | ||
| </div> | ||
| <div class="form-group col-12 col-md-2 d-flex align-items-end"> | ||
| <button type="button" class="btn btn-primary" onclick="generateIdentifier()">Generate Identifier</button> | ||
| </div> | ||
| </form> | ||
| <div id="identifierOutput" class="mt-3">Identifier will be shown here.</div> | ||
| </div> | ||
|
|
||
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> | ||
| </body> | ||
| </html> |