Skip to content

Commit

Permalink
feat(adminpanel): breakout html into individual reusable components
Browse files Browse the repository at this point in the history
  • Loading branch information
coal-rock committed Oct 4, 2024
1 parent e5e6fb0 commit 1e5d9a5
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 144 deletions.
107 changes: 103 additions & 4 deletions internal/templates/page.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,110 @@

</head>

<body class="min-h-screen bg-base-200">
{{ end }}
{{ end }}

{{ define "footer" }}
</body>
{{ define "footer" }}

</html>
{{ end }}

{{ define "drawerSide" }}
<div class="drawer-side">
<label for="sidebar" class="drawer-overlay"></label>
<ul class="menu w-60 min-h-screen overflow-y-scroll bg-base-100 text-base-content">
<!-- Sidebar content here -->

<li>
<div>
<h1 class="text-lg font-bold">{{.admin.Config.Name }}</h1>
</div>
</li>

<li class="hover:bg-transparent p-2">
<label class="flex input input-bordered input-xs w-full p-0 px-2">
<input placeholder="Begin typing to search..." class="m-auto" />
</label>
</li>

{{ range .apps }}
<li>
<details open>
<summary>
<a href="{{ .app.GetFullLink }}">{{ .app.DisplayName }}</a>
</summary>
<ul>
{{ range .models }}
{{ if .permissions.Read }}
<li>
<details open>
<summary>
<a href="{{ .model.GetFullLink }}">{{ .model.DisplayName }}</a>
</summary>
<ul>
<li>
<a href="{{ .model.GetFullLink }}">View</a>
{{ if .permissions.Create }}<a href="{{ .model.GetFullAddLink }}">Add</a>{{
end
}}
</li>
</ul>
</details>
</li>
{{ end }}
{{ end }}
</ul>
</details>
</li>
{{ end }}

</ul>
</div>
{{ end }}


{{ define "navBar" }}


<div class="navbar bg-base-300">
<div class="navbar-start">
<h1 class="font-semibold text-xl hidden lg:block">Go Advanced Admin</h1>

<!-- Button to open the drawer -->
<label for="sidebar" class="btn btn-primary drawer-button lg:hidden"></label>
</div>

<div class="navbar-center lg:hidden">
<h1 class="font-semibold text-xl">Go Advanced Admin</h1>
</div>

<div class="navbar-end text-sm">
{{ range .navBarItems -}}
<div>
{{- safeHTML .HTML -}}
</div>
{{- if .NavBarAppendSlash -}}
<a class="whitespace-pre"> / </a>
{{- end -}}
{{- end }}

<!-- theme swap -->
<label class="swap swap-rotate pl-2">
<!-- this hidden checkbox controls the state -->
<input type="checkbox" class="theme-controller" value="synthwave" />

<!-- sun icon -->
<svg class="swap-off h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
</svg>

<!-- moon icon -->
<svg class="swap-on h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
</svg>
</label>
</div>
</div>

{{ end }}
192 changes: 52 additions & 140 deletions internal/templates/root.html
Original file line number Diff line number Diff line change
@@ -1,154 +1,66 @@
{{ template "header" }}
<div class="drawer lg:drawer-open">
<input id="sidebar" type="checkbox" class="drawer-toggle" />
<div class="drawer-content min-h-full bg-base-200">
<!-- Navbar -->
<div class="navbar bg-base-300">
<div class="navbar-start">
<h1 class="font-semibold text-xl hidden lg:block">Go Advanced Admin</h1>

<!-- Button to open the drawer -->
<label for="sidebar" class="btn btn-primary drawer-button lg:hidden"></label>
<body class="min-h-screen bg-base-200">
<div class="drawer lg:drawer-open">
<input id="sidebar" type="checkbox" class="drawer-toggle" />
<div class="drawer-content min-h-full bg-base-200">
<!-- Navbar -->
{{ template "navBar" . }}
<!-- Path Bar -->
<div class="bg-base-100 w-full h-10">
<p class="p-2"><a href="{{ .model.App.Panel.GetFullLink }}">Home</a> > <a
href="{{ .model.App.GetFullLink }}">{{ .model.App.DisplayName }}</a> > {{ .model.DisplayName }}
</p>
</div>

<div class="navbar-center lg:hidden">
<h1 class="font-semibold text-xl">Go Advanced Admin</h1>
</div>

<div class="navbar-end text-sm">
{{ range .navBarItems -}}
<div>
{{- safeHTML .HTML -}}
</div>
{{- if .NavBarAppendSlash -}}
<a class="whitespace-pre"> / </a>
{{- end -}}
{{- end }}

<!-- theme swap -->
<label class="swap swap-rotate pl-2">
<!-- this hidden checkbox controls the state -->
<input type="checkbox" class="theme-controller" value="synthwave" />

<!-- sun icon -->
<svg class="swap-off h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
</svg>

<!-- moon icon -->
<svg class="swap-on h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
</svg>
</label>
</div>
</div>

<!-- Path Bar -->
<div class="bg-base-100 w-full h-10">
<p class="p-2"><a href="{{ .model.App.Panel.GetFullLink }}">Home</a> > <a
href="{{ .model.App.GetFullLink }}">{{ .model.App.DisplayName }}</a> > {{ .model.DisplayName }}</p>
</div>

<div class="bg-base-200 m-4">
<h1>Applications:</h1>

{{ range .apps }}
<div class="card bg-base-100 w-96 shadow-xl m-4">
<div class="card-body p-6">
<h2 href="{{ .app.GetFullLink }}" class="card-title text-sm">{{ .app.DisplayName }}</h2>

<div class="overflow-x-auto">
<table class="table">
<tbody>
{{ range .models }}
{{ if .permissions.Read }}
<tr>
<td>
<a href="{{.model.GetFullLink}}" class="link">{{.model.DisplayName}}</a>
</td>

<td class="m-0 p-0">
<a href="{{.model.GetFullLink}}" class="link text-right">View</a>
</td>

{{ if.permissions.Create }}
<td class="m-0 p-0">
<a href="{{.model.GetFullAddLink}}" class="link text-right">Add</a>
</td>
{{ else }}
<td>
<p class="text-right m-0 p-0">Add</p>
</td>
<div class="bg-base-200 m-4">
<h1>Applications:</h1>

{{ range .apps }}
<div class="card bg-base-100 w-96 shadow-xl m-4">
<div class="card-body p-6">
<h2 href="{{ .app.GetFullLink }}" class="card-title text-sm">{{ .app.DisplayName }}</h2>

<div class="overflow-x-auto">
<table class="table">
<tbody>
{{ range .models }}
{{ if .permissions.Read }}
<tr>
<td>
<a href="{{.model.GetFullLink}}" class="link">{{.model.DisplayName}}</a>
</td>

<td class="m-0 p-0">
<a href="{{.model.GetFullLink}}" class="link text-right">View</a>
</td>

{{ if.permissions.Create }}
<td class="m-0 p-0">
<a href="{{.model.GetFullAddLink}}" class="link text-right">Add</a>
</td>
{{ else }}
<td>
<p class="text-right m-0 p-0">Add</p>
</td>
{{ end }}
</tr>
{{ end }}
</tr>
{{ end }}
{{ end }}
</tbody>
</table>
</div>
{{ end }}
</tbody>
</table>
</div>


</div>
</div>
</div>
{{ end }}
{{ end }}


</div>
</div>
</div>

<!-- Sidebar -->
<div class="drawer-side">
<label for="sidebar" class="drawer-overlay"></label>
<ul class="menu w-60 min-h-screen overflow-y-scroll bg-base-100 text-base-content">
<!-- Sidebar content here -->

<li>
<div>
<h1 class="text-lg font-bold">{{.admin.Config.Name }}</h1>
</div>
</li>

<li class="hover:bg-transparent p-2">
<label class="flex input input-bordered input-xs w-full p-0 px-2">
<input placeholder="Begin typing to search..." class="m-auto" />
</label>
</li>

{{ range .apps }}
<li>
<details open>
<summary>
<a href="{{ .app.GetFullLink }}">{{ .app.DisplayName }}</a>
</summary>
<ul>
{{ range .models }}
{{ if .permissions.Read }}
<li>
<details open>
<summary>
<a href="{{ .model.GetFullLink }}">{{ .model.DisplayName }}</a>
</summary>
<ul>
<li>
<a href="{{ .model.GetFullLink }}">View</a>
{{ if .permissions.Create }}<a href="{{ .model.GetFullAddLink }}">Add</a>{{ end
}}
</li>
</ul>
</details>
</li>
{{ end }}
{{ end }}
</ul>
</details>
</li>
{{ end }}


</ul>
{{ template "drawerSide" . }}
</div>

</div>
</body>
{{ template "footer" }}
Empty file added internal/templates/sidebar.html
Empty file.

0 comments on commit 1e5d9a5

Please sign in to comment.