AECC database project.

fix(components)!: Renamed include-thingamabob.

Renamed `include-thingamabob` to `x-include`. All components will use the
`x-...` prefix.

+76 -2
+74
index.html
··· 1 + <!DOCTYPE html> 2 + <html> 3 + <head> 4 + <link rel="icon" type="image/png" href="/~diego.estrada1/CCOM/4027/db/assets/favicon-96x96.png" sizes="96x96" /> 5 + <link rel="icon" type="image/svg+xml" href="/~diego.estrada1/CCOM/4027/db/assets/favicon.svg" /> 6 + <link rel="shortcut icon" href="/~diego.estrada1/CCOM/4027/db/assets/favicon.ico" /> 7 + <link rel="apple-touch-icon" sizes="180x180" href="/~diego.estrada1/CCOM/4027/db/assets/apple-touch-icon.png" /> 8 + <meta name="apple-mobile-web-app-title" content="AECC DB" /> 9 + <link rel="manifest" href="/~diego.estrada1/CCOM/4027/db/assets/site.webmanifest" /> 10 + <meta charset="UTF-8"> 11 + </head> 12 + <body> 13 + <script src="lib/components.js"></script> 14 + <h1> 15 + Welcome to AECC DB! 16 + </h1> 17 + 18 + What would you like to work with? 19 + <br /> 20 + 21 + <div id="buttons" style="width:120ch;"> 22 + <button onclick="hide('buttons'); activity();">Activities</button> 23 + <button onclick="hide('buttons'); activity_transaction();">Activity Transactions</button> 24 + <button onclick="hide('buttons'); board_member();">Board Members</button> 25 + <button onclick="hide('buttons'); member();">Members</button> 26 + <button onclick="next('productFunctionality');">Products</button> 27 + <button onclick="hide('buttons'); transaction();">Transactions</button> 28 + </div> 29 + 30 + <x-include src="product.html"></x-include> 31 + 32 + <x-include src="/~diego.estrada1/css.html"></x-include> 33 + 34 + <footer> 35 + <div style="height:50px"></div> 36 + <button onclick="restart()">Restart?</button> 37 + </footer> 38 + </body> 39 + <script> 40 + var last = 'buttons'; 41 + const show = i => document.getElementById(i).hidden = false; 42 + const hide = i => document.getElementById(i).hidden = true; 43 + function next(i) { 44 + hide(last); 45 + last = i; 46 + show(i); 47 + }; 48 + function restart() { 49 + show('buttons'); 50 + hide(last); 51 + last = 'buttons'; 52 + }; 53 + 54 + function table_filter() { 55 + var filter = tableFilter.value.toUpperCase(); 56 + 57 + var trs = resultsTable.getElementsByTagName("tr"); 58 + 59 + for (var i = 1; i < trs.length; i++) { 60 + trs[i].style.display = "none"; 61 + tds = trs[i].getElementsByTagName("td"); 62 + for (var j = 0; j < tds.length; j++) { 63 + td = tds[j]; 64 + if (td) { 65 + td_text = td.textContent || td.innerText; 66 + if (td_text.toUpperCase().indexOf(filter) > -1) { 67 + trs[i].style.display = ""; 68 + } 69 + } 70 + } 71 + } 72 + } 73 + </script> 74 + </html>
+2 -2
lib/components.js
··· 1 - class includeThingamabob extends HTMLElement { 1 + class includeHTML extends HTMLElement { 2 2 connectedCallback() { 3 3 const src = this.getAttribute("src"); 4 4 fetch(src).then(response => response.text()).then(data => this.outerHTML = data); 5 5 } 6 6 } 7 7 8 - customElements.define("include-thingamabob", includeThingamabob); 8 + customElements.define("x-include", includeHTML);