add html tab
This commit is contained in:
141
views/dev/mcu/mcudetail.templ
Normal file
141
views/dev/mcu/mcudetail.templ
Normal file
@@ -0,0 +1,141 @@
|
||||
package dev_detailmcu
|
||||
|
||||
import "cpone/layout"
|
||||
|
||||
templ DetailMcuScreen(
|
||||
breadcrumb templ.Component,
|
||||
) {
|
||||
<div class="container-fluid">
|
||||
<div class="row align-item-center mb-10">
|
||||
<div class="col-md-10 col-sm-12 p-0">
|
||||
@breadcrumb
|
||||
</div>
|
||||
</div>
|
||||
<div id="loading-parent" class="rounded">
|
||||
<div id="loading-child" class="rounded bg-transparent">
|
||||
<div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
|
||||
<span class="sr-only">Loading....</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loadingcontent"></div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ CSSDetailMcu() {
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="assets/css/googlefont/poppins.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="assets/css/googlefont/publicsans.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="assets/css/googlefont/roboto.css"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
#div-chart {
|
||||
margin: 40px 10vw 40px 10vw;
|
||||
}
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#title {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
templ JSDetailMcu() {
|
||||
<script>
|
||||
document.addEventListener('htmx:afterSwap', function(event) {
|
||||
// Reinitialize selectpicker after HTMX content swap
|
||||
$('.selectpicker').selectpicker('refresh');
|
||||
});
|
||||
|
||||
document.addEventListener('htmx:beforeRequest', function(event) {
|
||||
console.log("Before Request")
|
||||
console.log(event.detail.xhr)
|
||||
console.log(event.detail.target)
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener('htmx:afterRequest', function(event) {
|
||||
console.log("After Request")
|
||||
console.log(event.detail.xhr)
|
||||
console.log(event.detail.target)
|
||||
});
|
||||
document.addEventListener('htmx:historyCacheError', function(event) {
|
||||
console.log("Error History Cache Error")
|
||||
console.log(event.detail.cause)
|
||||
|
||||
});
|
||||
document.addEventListener('htmx:historyCacheMissError', function(event) {
|
||||
console.log("Error History Cache Miss Error")
|
||||
console.log(event.detail.xhr)
|
||||
console.log(event.detail.path)
|
||||
|
||||
});
|
||||
document.addEventListener('htmx:oobErrorNoTarget', function(event) {
|
||||
console.log("Error OOB No Target")
|
||||
console.log(event.detail.content)
|
||||
});
|
||||
document.addEventListener('htmx:onLoadError', function(event) {
|
||||
console.log("Error On Load")
|
||||
console.log(event.detail.xhr)
|
||||
console.log(event.detail.elt)
|
||||
console.log(event.detail.target)
|
||||
console.log(event.detail.exception)
|
||||
console.log(event.detail.requestConfig)
|
||||
});
|
||||
document.addEventListener('htmx:responseError', function(event) {
|
||||
console.log("Error Response")
|
||||
console.log(event.detail.xhr)
|
||||
console.log(event.detail.elt)
|
||||
console.log(event.detail.requestConfig)
|
||||
});
|
||||
document.addEventListener('htmx:sendError', function(event) {
|
||||
console.log("Error Send Error")
|
||||
console.log(event.detail.xhr)
|
||||
console.log(event.detail.elt)
|
||||
console.log(event.detail.requestConfig)
|
||||
});
|
||||
document.addEventListener('htmx:sseError', function(event) {
|
||||
console.log("Error Sse ")
|
||||
console.log(event.detail.xhr)
|
||||
console.log(event.detail.error)
|
||||
console.log(event.detail.source)
|
||||
});
|
||||
document.addEventListener('htmx:swapError', function(event) {
|
||||
console.log("Error Swap Error")
|
||||
console.log(event.detail.xhr)
|
||||
console.log(event.detail.elt)
|
||||
console.log("Target Swap: "+event.detail.target)
|
||||
console.log(event.detail.requestConfig)
|
||||
});
|
||||
document.addEventListener('htmx:targetError', function(event) {
|
||||
console.log("Error target")
|
||||
console.log(event.detail.elt)
|
||||
console.log("Target ID: "+event.detail.target)
|
||||
});
|
||||
</script>
|
||||
}
|
||||
|
||||
templ ShowDetailMcu(
|
||||
title string,
|
||||
cmp templ.Component,
|
||||
css templ.Component,
|
||||
js templ.Component,
|
||||
navbaruser templ.Component,
|
||||
userprofile templ.Component,
|
||||
) {
|
||||
@layout.EmployeeAnalyticLayout(title, css, js, navbaruser, userprofile) {
|
||||
@cmp
|
||||
}
|
||||
}
|
||||
141
views/dev/mcu/mcudetail_templ.go
Normal file
141
views/dev/mcu/mcudetail_templ.go
Normal file
@@ -0,0 +1,141 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.663
|
||||
package dev_detailmcu
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import "context"
|
||||
import "io"
|
||||
import "bytes"
|
||||
|
||||
import "cpone/layout"
|
||||
|
||||
func DetailMcuScreen(
|
||||
breadcrumb templ.Component,
|
||||
) templ.Component {
|
||||
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
templ_7745c5c3_Buffer = templ.GetBuffer()
|
||||
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"row align-item-center mb-10\"><div class=\"col-md-10 col-sm-12 p-0\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = breadcrumb.Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div id=\"loading-parent\" class=\"rounded\"><div><ul class=\"nav nav-tabs nav-tabs-line\"><li class=\"nav-item\"><a class=\"nav-link active\" data-toggle=\"tab\" href=\"#kt_tab_pane_1\">Peserta</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_2\">Kelainan global</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_3\">Kelainan Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_4\">kelainan Non Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_5\">kelainan Fisik</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_6\">Kesimpulan & Saran</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_7\">Daftar Peserta</a></li></ul></div><div class=\"tab-content mt-5\" id=\"myTabContent\"><div class=\"tab-pane fade show active\" id=\"kt_tab_pane_1\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\">Tab content 1</div><div class=\"tab-pane fade\" id=\"kt_tab_pane_2\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\">Tab content 2</div><div class=\"tab-pane fade\" id=\"kt_tab_pane_3\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_3\">Tab content 4</div><div class=\"tab-pane fade\" id=\"kt_tab_pane_4\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_4\">Tab content 5</div></div><div id=\"loading-child\" class=\"rounded bg-transparent\"><div id=\"loading-spinner\" class=\"spinner-border text-primary d-none\" style=\"width: 3rem; height: 3rem;\" role=\"status\"><span class=\"sr-only\">Loading....</span></div></div></div><div id=\"loadingcontent\"></div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
func CSSDetailMcu() templ.Component {
|
||||
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
templ_7745c5c3_Buffer = templ.GetBuffer()
|
||||
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var2 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var2 == nil {
|
||||
templ_7745c5c3_Var2 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n body {\r\n background-color: white;\r\n }\r\n #div-chart {\r\n margin: 40px 10vw 40px 10vw;\r\n }\r\n .title {\r\n font-size: 20px;\r\n font-weight: bold;\r\n }\r\n #title {\r\n font-weight: 600;\r\n }\r\n </style>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
func JSDetailMcu() templ.Component {
|
||||
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
templ_7745c5c3_Buffer = templ.GetBuffer()
|
||||
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var3 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var3 == nil {
|
||||
templ_7745c5c3_Var3 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\r\n\t\tdocument.addEventListener('htmx:afterSwap', function(event) {\r\n\t\t\t// Reinitialize selectpicker after HTMX content swap\r\n\t\t\t$('.selectpicker').selectpicker('refresh');\r\n\t\t});\r\n \r\n document.addEventListener('htmx:beforeRequest', function(event) {\r\n console.log(\"Before Request\")\r\n\t\t\tconsole.log(event.detail.xhr)\r\n\t\t\tconsole.log(event.detail.target)\r\n \r\n });\r\n\r\n document.addEventListener('htmx:afterRequest', function(event) {\r\n console.log(\"After Request\")\r\n console.log(event.detail.xhr)\r\n\t\t\tconsole.log(event.detail.target)\r\n });\r\n document.addEventListener('htmx:historyCacheError', function(event) {\r\n console.log(\"Error History Cache Error\")\r\n console.log(event.detail.cause)\r\n\t\t\t\r\n });\r\n document.addEventListener('htmx:historyCacheMissError', function(event) {\r\n console.log(\"Error History Cache Miss Error\")\r\n console.log(event.detail.xhr)\r\n console.log(event.detail.path)\r\n\t\t\t\r\n });\r\n document.addEventListener('htmx:oobErrorNoTarget', function(event) {\r\n console.log(\"Error OOB No Target\")\r\n console.log(event.detail.content)\r\n });\r\n document.addEventListener('htmx:onLoadError', function(event) {\r\n console.log(\"Error On Load\")\r\n console.log(event.detail.xhr)\r\n console.log(event.detail.elt)\r\n console.log(event.detail.target)\r\n console.log(event.detail.exception)\r\n console.log(event.detail.requestConfig)\r\n });\r\n document.addEventListener('htmx:responseError', function(event) {\r\n console.log(\"Error Response\")\r\n console.log(event.detail.xhr)\r\n console.log(event.detail.elt)\r\n console.log(event.detail.requestConfig)\r\n });\r\n document.addEventListener('htmx:sendError', function(event) {\r\n console.log(\"Error Send Error\")\r\n console.log(event.detail.xhr)\r\n console.log(event.detail.elt)\r\n console.log(event.detail.requestConfig)\r\n });\r\n document.addEventListener('htmx:sseError', function(event) {\r\n console.log(\"Error Sse \")\r\n console.log(event.detail.xhr)\r\n console.log(event.detail.error)\r\n console.log(event.detail.source)\r\n });\r\n\t\tdocument.addEventListener('htmx:swapError', function(event) {\r\n console.log(\"Error Swap Error\")\r\n console.log(event.detail.xhr)\r\n console.log(event.detail.elt)\r\n console.log(\"Target Swap: \"+event.detail.target)\r\n console.log(event.detail.requestConfig)\r\n });\r\n\t\tdocument.addEventListener('htmx:targetError', function(event) {\r\n console.log(\"Error target\")\r\n console.log(event.detail.elt)\r\n console.log(\"Target ID: \"+event.detail.target)\r\n });\r\n </script>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
func ShowDetailMcu(
|
||||
title string,
|
||||
cmp templ.Component,
|
||||
css templ.Component,
|
||||
js templ.Component,
|
||||
navbaruser templ.Component,
|
||||
userprofile templ.Component,
|
||||
) templ.Component {
|
||||
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
templ_7745c5c3_Buffer = templ.GetBuffer()
|
||||
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var4 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var4 == nil {
|
||||
templ_7745c5c3_Var4 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Var5 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
templ_7745c5c3_Buffer = templ.GetBuffer()
|
||||
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
}
|
||||
templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
templ_7745c5c3_Err = layout.EmployeeAnalyticLayout(title, css, js, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var5), templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
37
views/dev/mcu/tabviewdetailmcu.templ
Normal file
37
views/dev/mcu/tabviewdetailmcu.templ
Normal file
@@ -0,0 +1,37 @@
|
||||
package dev_detailmcu
|
||||
|
||||
templ TabViewDetailMcu(
|
||||
|
||||
) {
|
||||
<div>
|
||||
<ul class="nav nav-tabs nav-tabs-line">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1">Peserta</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2">Kelainan global</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_3">Kelainan Lab</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_4">kelainan Non Lab</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_5">kelainan Fisik</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_6">Kesimpulan & Saran</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_7">Daftar Peserta</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-content mt-5" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="kt_tab_pane_2">Tab content 1</div>
|
||||
<div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel" aria-labelledby="kt_tab_pane_2">Tab content 2</div>
|
||||
<div class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel" aria-labelledby="kt_tab_pane_3">Tab content 4</div>
|
||||
<div class="tab-pane fade" id="kt_tab_pane_4" role="tabpanel" aria-labelledby="kt_tab_pane_4">Tab content 5</div>
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user