add html tab

This commit is contained in:
2024-06-11 10:39:07 +07:00
parent f825bc1639
commit 2d67b7b723
6 changed files with 428 additions and 0 deletions

View File

@@ -0,0 +1,68 @@
package dev_handlers
import (
breadcrumadmin "cpone/component/breadcrumbadmin"
navbarmenu "cpone/component/navbar"
sidebaruserprofile "cpone/component/sidebar_user_profile"
"cpone/models"
"cpone/services"
"cpone/utils"
dev_detailmcu "cpone/views/dev/mcu"
"github.com/labstack/echo/v4"
"go.uber.org/zap"
)
type DetailMcuServices interface {
GetBreadcrumb(title string) (models.BreadCrumbV1, error)
}
type DetailMcuHandler struct {
DetailMcuServices DetailMcuServices
}
func NewDetailMcuHandler(dmcu DetailMcuServices) *DetailMcuHandler {
return &DetailMcuHandler{
DetailMcuServices: dmcu,
}
}
func (dmcu *DetailMcuHandler) HandleShowDetailMcuScreen(c echo.Context) error {
logger, _ := zap.NewProduction()
title := "PT. Sadhana Abiyasa Sampoerna"
user, err := services.GetUserLogin()
if err != nil {
defer logger.Sync()
logger.Info("Error get user dev", zap.Any("error", err))
return err
}
dataBreadcrumb, err := dmcu.DetailMcuServices.GetBreadcrumb(title)
if err != nil {
defer logger.Sync()
logger.Info("Error breadcrumb dev", zap.Any("error", err))
return err
}
breadcrumb := breadcrumadmin.MainBreadcrumbAdminV1(dataBreadcrumb)
navbaruser := navbarmenu.NavbarWithLogo(user)
sidbaruser := sidebaruserprofile.Navbaruserprofile(user)
content := dev_detailmcu.DetailMcuScreen(
breadcrumb,
)
css := dev_detailmcu.CSSDetailMcu()
js := dev_detailmcu.JSDetailMcu()
view := dev_detailmcu.ShowDetailMcu(
title,
content,
css,
js,
navbaruser,
sidbaruser,
)
return utils.View(c, view)
}

View File

@@ -240,6 +240,10 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
dev.GET("/employeeanalytic/changepage", devEmplAnaHandler.HandlePagination)
dev.GET("/employeeanalytic/filter", devEmplAnaHandler.HandleFilter)
devDetailMcuService := dev_services.NewDetailMcuServices(appStore)
devDetailMcuHandler := dev_handlers.NewDetailMcuHandler(devDetailMcuService)
dev.GET("/detailmcu", devDetailMcuHandler.HandleShowDetailMcuScreen)
// group result
devGRServices := dev_services.NewServicesGroupResult(appStore)
devGRhandlers := dev_handlers.NewGroupResultHandler(devGRServices)

View File

@@ -0,0 +1,37 @@
package dev_services
import (
"cpone/db"
"cpone/models"
)
type DetailMcuServices struct {
DetailMcuStore db.AppStore
}
func NewDetailMcuServices(uStore db.AppStore) *DetailMcuServices {
return &DetailMcuServices{
DetailMcuStore: uStore,
}
}
func (dmcu *DetailMcuServices) GetBreadcrumb(title string) (models.BreadCrumbV1, error) {
breadcrumb := models.BreadCrumbV1{
Title: title,
Item: []models.ItemBreadCrumbV1{
{
Item: "Dashboard",
Url: "/dev/dashboard",
},
{
Item: "Employee Health Medical Analytic",
Url: "/dev/employeeanalytic/",
},
{
Item: title,
Url: "",
},
},
}
return breadcrumb, nil
}

View 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
}
}

View 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
})
}

View 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>
}