andr3/fyp
1
0
Fork 0
Code Issues 29 Pull Requests Packages Projects 1 Releases Wiki Activity

fix: closes #37

Browse Source
This commit is contained in:
Andre Henriques 2023-10-10 11:10:49 +01:00
parent 8d5f2a829a
commit 1229ad5373
3 changed files with 94 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
views/js/main.js
View File

@ -15,6 +15,13 @@ function tabs() {
elm.classList.remove("selected");
}
child.classList.add("selected");
for (const childElm of child.parentElement.children) {
if (childElm.classList.contains("selected")) {
childElm.classList.remove("selected")
}
}
document.querySelector(`.tabs .content[data-tab="${
child.getAttribute("data-tab")
}"]`)?.classList.add("selected");
@ -41,6 +48,55 @@ function tabs() {
}
}
for (const elm of document.querySelectorAll(".tabs-header")) {
let count = 0;
let selected = 0;
for (const child of elm.children[0].children) {
if (child.tagName == "BUTTON") {
count++;
if (child.classList.contains("selected")) {
selected++;
}
if (!child.getAttribute("data-armed")) {
child.addEventListener("click", () => {
if (!child.classList.contains("selected")) {
for (const elm of child.parentElement.children) {
elm.classList.remove("selected");
}
child.classList.add("selected");
for (const childElm of child.parentElement.parentElement.children) {
if (childElm.classList.contains("selected")) {
childElm.classList.remove("selected")
}
}
document.querySelector(`.tabs-header .content[data-tab="${
child.getAttribute("data-tab")
}"]`)?.classList.add("selected");
}
});
child.setAttribute("data-armed", "true")
}
}
}
if (selected > 1 || selected == 0) {
for (const child of elm.children) {
child.classList.remove("selected");
}
for (const child of elm.children[0].children) {
if (child.tagName == "BUTTON") {
child.classList.add("selected");
document.querySelector(`.tabs .content[data-tab="${
child.getAttribute("data-tab")
}"]`)?.classList.add("selected");
break;
}
}
}
}
}
function load() {
for (const elm of document.querySelectorAll("form > button")) {

26
views/models/edit.html
View File

@ -126,8 +126,9 @@
{{ if eq (len .Classes) 0 }}
TODO CREATE TABLE
{{else}}
<div class="tabs">
<div class="tabs-header">
{{/* Handle the case where there are to many buttons */}}
<div class="header">
{{ range .Classes }}
{{/* TODO Auto Load 1st */}}
<button
@ -135,22 +136,31 @@
hx-target=".content[data-tab='{{ .Name }}']"
hx-swap="innerHTML"
hx-headers='{"REQUEST-TYPE": "html"}'
hx-trigger="click"
class="tab"
data-tab="{{ .Name }}">
{{ .Name }}
</button>
{{ end }}
{{ range .Classes }}
</div>
{{ range $i, $a := .Classes }}
{{ if eq $i 0}}
<div
hx-get="/models/data/list?id={{ .Id }}"
hx-target=".content[data-tab='{{ $a.Name }}']"
hx-swap="innerHTML"
hx-headers='{"REQUEST-TYPE": "html"}'
hx-trigger="load"
class="content"
data-tab="{{ $a.Name }}">
</div>
{{ else }}
<div
class="content"
data-tab="{{ .Name }}"
hx-get="/models/data/list?id={{ .Id }}"
hx-target=".content[data-tab='{{ .Name }}']"
hx-trigger="load"
hx-swap="innerHTML"
hx-headers='{"REQUEST-TYPE": "html"}'>
data-tab="{{ $a.Name }}" >
</div>
{{ end }}
{{ end }}
</div>
{{end}}
{{ end }}

5
views/styles/main.css
View File

@ -391,6 +391,11 @@ table tr td .button {
gap: 0 5px;
}
.tabs-header .header {
display: flex;
overflow-x: scroll;
}
.tabs .content {
display: none;
padding: 5px;