Skip to content

aa.gusti / tangsel-base

Go to a project
Commit 456c9d09 by Kunto
Options

mobile view & js include

1 parent 6d8ad63b
Inline Side-by-side
Showing 11 changed files with 190 additions and 122 deletions
tangsel/base/static/admin/img/logos/bapenda.png
tangsel/base/static/admin/img/logos/bapenda.png

5.97 KB | W: | H:

tangsel/base/static/admin/img/logos/bapenda.png

6.32 KB | W: | H:

tangsel/base/static/admin/img/logos/bapenda.png
tangsel/base/static/admin/img/logos/bapenda.png
tangsel/base/static/admin/img/logos/bapenda.png
tangsel/base/static/admin/img/logos/bapenda.png
  • 2-up
  • Swipe
  • Onion skin
tangsel/base/static/admin/js/dashboards/dashboard.js
$(function () {
//
// Carousel
//
$(".counter-carousel").owlCarousel({
loop: true,
margin: 30,
mouseDrag: true,
autoplay: true,
autoplayTimeout: 4000,
autoplaySpeed: 2000,
rtl: true,
nav: false,
dots: false,
responsive: {
0: {
items: 2,
loop: true,
},
576: {
items: 2,
loop: true,
},
768: {
items: 3,
loop: true,
},
1200: {
items: 5,
loop: true,
},
1400: {
items: 6,
loop: true,
},
},
});
});
tangsel/base/static/admin/js/theme/app.init.js
var userSettings = { var userSettings = {
Layout: "vertical", // vertical | horizontal Layout: localStorage.getItem("Layout") || "vertical", // vertical | horizontal
SidebarType: "full", // full | mini-sidebar SidebarType: localStorage.getItem("SidebarType") || "full", // full | mini-sidebar
BoxedLayout: true, // true | false BoxedLayout: localStorage.getItem("BoxedLayout") || "boxed", // true | false
Direction: "ltr", // ltr | rtl Theme: localStorage.getItem("Theme") || "light", // light | dark
Theme: "light", // light | dark cardBorder: localStorage.getItem("cardBorder") || "shadow", // true | false
ColorTheme: "Blue_Theme", // Blue_Theme | Aqua_Theme | Purple_Theme | Green_Theme | Cyan_Theme | Orange_Theme
cardBorder: false, // true | false
}; };
tangsel/base/static/admin/js/theme/app.min.js
...@@ -10,7 +10,6 @@ if (isSidebar.length > 0) { ...@@ -10,7 +10,6 @@ if (isSidebar.length > 0) {
AdminSettings.ManageSidebarType(); AdminSettings.ManageSidebarType();
AdminSettings.ManageBoxedLayout(); AdminSettings.ManageBoxedLayout();
AdminSettings.ManageDarkThemeLayout(); AdminSettings.ManageDarkThemeLayout();
AdminSettings.ManageColorThemeLayout();
AdminSettings.ManageCardLayout(); AdminSettings.ManageCardLayout();
}, },
...@@ -74,14 +73,20 @@ if (isSidebar.length > 0) { ...@@ -74,14 +73,20 @@ if (isSidebar.length > 0) {
// Layout Boxed or Full // Layout Boxed or Full
//**************************** //****************************
ManageBoxedLayout: function () { ManageBoxedLayout: function () {
document.getElementById("boxed-layout").checked = true; const containerFluid = document.querySelectorAll(".container");
// document.getElementById("boxed-layout").checked = true;
switch (settings.BoxedLayout) { switch (settings.BoxedLayout) {
case true: case "boxed":
containerFluid.forEach(function (element) {
element.classList.remove("max-w-full");
});
document.documentElement.setAttribute("data-boxed-layout", "boxed"); document.documentElement.setAttribute("data-boxed-layout", "boxed");
document.getElementById("boxed-layout").checked = true; document.getElementById("boxed-layout").checked = true;
break; break;
case false: case "full":
containerFluid.forEach(function (element) {
element.classList.add("max-w-full");
});
document.documentElement.setAttribute("data-boxed-layout", "full"); document.documentElement.setAttribute("data-boxed-layout", "full");
document.getElementById("full-layout").checked = true; document.getElementById("full-layout").checked = true;
break; break;
...@@ -92,13 +97,13 @@ if (isSidebar.length > 0) { ...@@ -92,13 +97,13 @@ if (isSidebar.length > 0) {
// Card Type // Card Type
//**************************** //****************************
ManageCardLayout: function () { ManageCardLayout: function () {
document.getElementById("card-without-border").checked = true; // document.getElementById("card-without-border").checked = true;
switch (settings.cardBorder) { switch (settings.cardBorder) {
case true: case "border":
document.documentElement.setAttribute("data-card", "border"); document.documentElement.setAttribute("data-card", "border");
document.getElementById("card-with-border").checked = true; document.getElementById("card-with-border").checked = true;
break; break;
case false: case "shadow":
document.documentElement.setAttribute("data-card", "shadow"); document.documentElement.setAttribute("data-card", "shadow");
document.getElementById("card-without-border").checked = true; document.getElementById("card-without-border").checked = true;
break; break;
...@@ -140,19 +145,6 @@ if (isSidebar.length > 0) { ...@@ -140,19 +145,6 @@ if (isSidebar.length > 0) {
); );
} }
}, },
//****************************
// Theme color
//****************************
ManageColorThemeLayout: function () {
const { ColorTheme } = settings;
const colorThemeElement = document.getElementById(ColorTheme);
if (colorThemeElement) {
document.documentElement.setAttribute("data-color-theme", ColorTheme);
colorThemeElement.checked = true;
}
},
}; };
// Initialize settings // Initialize settings
...@@ -177,14 +169,16 @@ if (isSidebar.length > 0) { ...@@ -177,14 +169,16 @@ if (isSidebar.length > 0) {
}); });
this.checked; this.checked;
document.documentElement.setAttribute("data-boxed-layout", "boxed"); document.documentElement.setAttribute("data-boxed-layout", "boxed");
localStorage.setItem("BoxedLayout", "boxed");
}); });
fullLayout.addEventListener("click", function () { fullLayout.addEventListener("click", function () {
containerFluid.forEach(function (element) { containerFluid.forEach(function (element) {
element.classList.add("max-w-full"); element.classList.add("max-w-full");
}); });
document.documentElement.setAttribute("data-boxed-layout", "full");
this.checked; this.checked;
document.documentElement.setAttribute("data-boxed-layout", "full");
localStorage.setItem("BoxedLayout", "full");
}); });
} }
handleBoxedLayout(); handleBoxedLayout();
...@@ -198,11 +192,13 @@ if (isSidebar.length > 0) { ...@@ -198,11 +192,13 @@ if (isSidebar.length > 0) {
verticalLayout.addEventListener("click", function () { verticalLayout.addEventListener("click", function () {
document.documentElement.setAttribute("data-layout", "vertical"); document.documentElement.setAttribute("data-layout", "vertical");
localStorage.setItem("Layout", "vertical");
this.checked; this.checked;
}); });
horizontalLayout.addEventListener("click", function () { horizontalLayout.addEventListener("click", function () {
document.documentElement.setAttribute("data-layout", "horizontal"); document.documentElement.setAttribute("data-layout", "horizontal");
localStorage.setItem("Layout", "horizontal");
this.checked; this.checked;
}); });
} }
...@@ -238,23 +234,27 @@ if (isSidebar.length > 0) { ...@@ -238,23 +234,27 @@ if (isSidebar.length > 0) {
} }
document.querySelectorAll(".dark-layout").forEach((element) => { document.querySelectorAll(".dark-layout").forEach((element) => {
localStorage.setItem("Theme", "dark");
element.addEventListener("click", () => element.addEventListener("click", () =>
setThemeAttributes("dark", "dark-logo", "light-logo", "moon", "sun") setThemeAttributes("dark", "dark-logo", "light-logo", "moon", "sun")
); );
}); });
document.querySelectorAll(".light-layout").forEach((element) => { document.querySelectorAll(".light-layout").forEach((element) => {
localStorage.setItem("Theme", "light");
element.addEventListener("click", () => element.addEventListener("click", () =>
setThemeAttributes("light", "light-logo", "dark-logo", "sun", "moon") setThemeAttributes("light", "light-logo", "dark-logo", "sun", "moon")
); );
}); });
} }
handleTheme(); handleTheme();
//**************************** //****************************
// Theme card with border or shadow // Theme card with border or shadow
//**************************** //****************************
function handleCardLayout() { function handleCardLayout() {
function setCardAttribute(cardType) { function setCardAttribute(cardType) {
localStorage.setItem("cardBorder", cardType);
document.documentElement.setAttribute("data-card", cardType); document.documentElement.setAttribute("data-card", cardType);
} }
...@@ -273,16 +273,19 @@ if (isSidebar.length > 0) { ...@@ -273,16 +273,19 @@ if (isSidebar.length > 0) {
function handleSidebarToggle() { function handleSidebarToggle() {
function setSidebarType(sidebarType) { function setSidebarType(sidebarType) {
document.body.setAttribute("data-sidebartype", sidebarType); document.body.setAttribute("data-sidebartype", sidebarType);
localStorage.setItem("SidebarType", sidebarType);
} }
document document
.getElementById("full-sidebar") .getElementById("full-sidebar")
.addEventListener("click", () => setSidebarType("full")); .addEventListener("click", () => setSidebarType("full"));
document document
.getElementById("mini-sidebar") .getElementById("mini-sidebar")
.addEventListener("click", () => setSidebarType("mini-sidebar")); .addEventListener("click", () => setSidebarType("mini-sidebar"));
} }
handleSidebarToggle(); handleSidebarToggle();
//**************************** //****************************
// Toggle sidebar // Toggle sidebar
//**************************** //****************************
......
tangsel/base/static/admin/js/vendor.min.js
This diff could not be displayed because it is too large.
tangsel/base/views/templates/admin_base.pt
This diff could not be displayed because it is too large.
tangsel/base/views/templates/form.pt
<html metal:use-macro="load: ./base5.pt" <html metal:use-macro="load: ./base5.pt" tal:define="scripts scripts|scripts">
tal:define="scripts scripts|scripts" > <div metal:fill-slot="content">
<div metal:fill-slot="content">
<div class="panel panel-default"> <div class="panel panel-default">
<!-- <div class="panel-heading"> --> <!-- <div class="panel-heading"> -->
<!-- <h3 class="panel-title"><i class="fa fa-fw fa-plus"></i>&nbsp;${request.title}</h3> --> <!-- <h3 class="panel-title"><i class="fa fa-fw fa-plus"></i>&nbsp;${request.title}</h3> -->
<!-- </div> --> <!-- </div> -->
<div class="panel-body"> <div class="panel-body">
<div tal:content="structure form"></div> <div tal:content="structure form"></div>
</div> </div>
</div> </div>
</div> </div>
<div metal:fill-slot="scripts"> <div metal:fill-slot="scripts">
<script> <script>
$(document).ready(function () { $(document).ready(function () {
// $(".read-only").attr("readonly", true); // $(".read-only").attr("readonly", true);
$(".readonly").attr("readonly", true); $(".readonly").attr("readonly", true);
$(".date").attr("readonly", true); $(".date").attr("readonly", true);
// $(".date").datepicker({ // $(".date").datepicker({
// format: 'dd-mm-yyyy' // format: 'dd-mm-yyyy'
// }); // });
${structure:scripts} ${structure:scripts}
}); });
</script> </script>
<div metal:define-slot="scripts"></div> <div metal:define-slot="scripts"></div>
</div> </div>
</html> </html>
tangsel/base/views/templates/form6.pt
<html metal:use-macro="load: ./base5.pt" <html metal:use-macro="load: ./base5.pt" tal:define="scripts scripts|scripts">
tal:define="scripts scripts|scripts" > <div metal:fill-slot="content">
<div metal:fill-slot="content">
<div class="col-md-6 col-md-offset-3"> <div class="col-md-6 col-md-offset-3">
<div class="panel panel-default"> <div class="panel panel-default">
<!-- <div class="panel-heading"> --> <!-- <div class="panel-heading"> -->
<!-- <h3 class="panel-title"><i class="fa fa-fw fa-plus"></i>&nbsp;${request.title}</h3> --> <!-- <h3 class="panel-title"><i class="fa fa-fw fa-plus"></i>&nbsp;${request.title}</h3> -->
<!-- </div> --> <!-- </div> -->
<div class="panel-body"> <div class="panel-body">
<div tal:content="structure form"></div> <div tal:content="structure form"></div>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
<div metal:fill-slot="scripts"> <div metal:fill-slot="scripts">
<script> <script>
$(document).ready(function () { $(document).ready(function () {
// $(".read-only").attr("readonly", true); // $(".read-only").attr("readonly", true);
$(".readonly").attr("readonly", true); $(".readonly").attr("readonly", true);
$(".date").attr("readonly", true); $(".date").attr("readonly", true);
// $(".date").datepicker({ // $(".date").datepicker({
// format: 'dd-mm-yyyy' // format: 'dd-mm-yyyy'
// }); // });
${structure:scripts} ${structure:scripts}
}); });
</script> </script>
<div metal:define-slot="scripts"></div> <div metal:define-slot="scripts"></div>
</div> </div>
</html> </html>
tangsel/pbb/esppt/views/templates/base.pt
...@@ -75,4 +75,112 @@ ...@@ -75,4 +75,112 @@
</div> </div>
</li> </li>
</ul> </ul>
<div
metal:fill-slot="navs-horizontal"
id="topbarnav"
class="flex gap-1 items-center relative"
>
<!-- Dropdown Menu / Multilevel -->
<div
tal:repeat="hmenu get_esppt_menus()"
class="hs-dropdown [--strategy:static] lg:[--strategy:absolute] [--adaptive:none] sm:[--trigger:hover] relative"
>
<a
tal:attributes="href python: home+hmenu['path'] if not hmenu['children'] else 'javascript:void()'; class 'horizontal-menu bg-primary text-white dark:text-white hover:bg-primary hover:text-white' if route_name in hmenu['route_name'] else 'horizontal-menu dark:text-white hover:bg-primary hover:text-white'"
>
<i
tal:condition="hmenu['nama'].strip() == 'E-SPPT Home'"
tal:attributes="class 'ti ti-home text-base' if route_name in hmenu['route_name'] else 'ti ti-home text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'Unduh E-SPPT'"
tal:attributes="class 'ti ti-cloud-down text-base' if route_name in hmenu['route_name'] else 'ti ti-cloud-down text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'My NOP'"
tal:attributes="class 'ti ti-credit-card text-base' if route_name in hmenu['route_name'] else 'ti ti-credit-card text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'My SPPT'"
tal:attributes="class 'ti ti-script text-base' if route_name in hmenu['route_name'] else 'ti ti-script text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'Admin'"
tal:attributes="class 'ti ti-adjustments text-base' if route_name in hmenu['route_name'] else 'ti ti-adjustments text-xl flex-shrink-0'"
></i>
${hmenu['nama']}
<i
tal:condition="hmenu['children']"
class="ti ti-chevron-down ms-auto text-lg"
></i>
</a>
<div
tal:condition="hmenu['children']"
id="${hmenu['nama'].strip()}"
class="horizontal-items hs-dropdown-menu before:absolute left-0 hidden transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0"
>
<a
tal:repeat="hsubmenu hmenu['children']"
class="horizontal-link"
href="${home}${hsubmenu['path']}"
>
<i class="ti ti-circle text-base flex-shrink-0"></i>
<span class="hide-menu flex-shrink-0 text-sm leading-tight"
>${hsubmenu['nama']}</span
>
</a>
</div>
</div>
<div
tal:repeat="hmenu get_base_menus()"
class="hs-dropdown [--strategy:static] lg:[--strategy:absolute] [--adaptive:none] sm:[--trigger:hover] relative"
>
<a
tal:attributes="href python: home+hmenu['path'] if not hmenu['children'] else 'javascript:void()'; class 'horizontal-menu bg-primary text-white dark:text-white hover:bg-primary hover:text-white' if route_name in hmenu['route_name'] else 'horizontal-menu dark:text-white hover:bg-primary hover:text-white'"
>
<i
tal:condition="hmenu['nama'].strip() == 'E-SPPT Home'"
tal:attributes="class 'ti ti-home text-base' if route_name in hmenu['route_name'] else 'ti ti-home text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'Unduh E-SPPT'"
tal:attributes="class 'ti ti-cloud-down text-base' if route_name in hmenu['route_name'] else 'ti ti-cloud-down text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'My NOP'"
tal:attributes="class 'ti ti-credit-card text-base' if route_name in hmenu['route_name'] else 'ti ti-credit-card text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'My SPPT'"
tal:attributes="class 'ti ti-script text-base' if route_name in hmenu['route_name'] else 'ti ti-script text-xl flex-shrink-0'"
></i>
<i
tal:condition="hmenu['nama'].strip() == 'Admin'"
tal:attributes="class 'ti ti-adjustments text-base' if route_name in hmenu['route_name'] else 'ti ti-adjustments text-xl flex-shrink-0'"
></i>
${hmenu['nama']}
<i
tal:condition="hmenu['children']"
class="ti ti-chevron-down ms-auto text-lg"
></i>
</a>
<div
tal:condition="hmenu['children']"
id="${hmenu['nama'].strip()}"
class="horizontal-items hs-dropdown-menu before:absolute left-0 hidden transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0"
>
<a
tal:repeat="hsubmenu hmenu['children']"
class="horizontal-link"
href="${home}${hsubmenu['path']}"
>
<i class="ti ti-circle text-base flex-shrink-0"></i>
<span class="hide-menu flex-shrink-0 text-sm leading-tight"
>${hsubmenu['nama']}</span
>
</a>
</div>
</div>
</div>
</html> </html>
tangsel/pbb/esppt/views/templates/home.pt
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="card bg-lightprimary dark:bg-darkprimary mb-0 overflow-hidden"> <div class="card bg-lightprimary dark:bg-darkprimary mb-0 overflow-hidden">
<div class="card-body pb-12 pt-8"> <div class="card-body pb-12 pt-8">
<div class="grid grid-cols-12"> <div class="grid grid-cols-12">
<div class="lg:col-span-8 md:col-span-8 sm:col-span-12 col-span-12"> <div class="lg:col-span-7 md:col-span-6 sm:col-span-12 col-span-12">
<div class="flex gap-3 items-center mb-7"> <div class="flex gap-3 items-center mb-7">
<div class="rounded-full overflow-hidden"> <div class="rounded-full overflow-hidden">
<img <img
...@@ -19,9 +19,9 @@ ...@@ -19,9 +19,9 @@
> >
</h5> </h5>
</div> </div>
<div class="flex gap-6 items-center"> <div class="gap-6 items-center grid grid-cols-12">
<div <div
class="pe-6 rtl:pe-auto rtl:ps-6 border-e border-[#adb0bb] border-opacity-10 dark:border-darkborder" class="pe-6 md:border-e md:border-[#adb0bb] md:border-opacity-10 dark:md:border-darkborder col-span-12 md:col-span-6 lg:col-span-7"
> >
<h3 class="flex items-start mb-0 text-xl">Fitur Modul:</h3> <h3 class="flex items-start mb-0 text-xl">Fitur Modul:</h3>
<ul class="list-group mt-4"> <ul class="list-group mt-4">
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
</ul> </ul>
</div> </div>
<div class=""> <div class="col-span-12 md:col-span-6 lg:col-span-5">
<div class="lg:col-span-4 md:col-span-6 col-span-12"> <div class="lg:col-span-4 md:col-span-6 col-span-12">
<a href="${home}/pbb/esppt/unduh/add"> <a href="${home}/pbb/esppt/unduh/add">
<div class="card animate-card overflow-hidden"> <div class="card animate-card overflow-hidden">
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="lg:col-span-5 md:col-span-5 sm:col-span-12 col-span-12"> <div class="lg:col-span-5 md:col-span-6 sm:col-span-12 col-span-12">
<div <div
class="sm:absolute relative right-0 rtl:right-auto rtl:left-0 -bottom-8" class="sm:absolute relative right-0 rtl:right-auto rtl:left-0 -bottom-8"
> >
......
tangsel/pbb/esppt/views/unduh.py
...@@ -56,7 +56,8 @@ class ListSchema(colander.Schema): ...@@ -56,7 +56,8 @@ class ListSchema(colander.Schema):
title="Alamat", title="Alamat",
widget=widget.TextInputWidget(), widget=widget.TextInputWidget(),
validator=colander.Length(max=64), validator=colander.Length(max=64),
visible=False) visible=False
)
alamat_2 = colander.SchemaNode( alamat_2 = colander.SchemaNode(
colander.String(), colander.String(),
...@@ -64,7 +65,8 @@ class ListSchema(colander.Schema): ...@@ -64,7 +65,8 @@ class ListSchema(colander.Schema):
missing=colander.drop, missing=colander.drop,
widget=widget.TextInputWidget(), widget=widget.TextInputWidget(),
validator=colander.Length(max=64), validator=colander.Length(max=64),
visible=False) visible=False
)
mobile = colander.SchemaNode( mobile = colander.SchemaNode(
colander.String(), colander.String(),
...@@ -87,7 +89,8 @@ class ListSchema(colander.Schema): ...@@ -87,7 +89,8 @@ class ListSchema(colander.Schema):
widget=widget.FileUploadWidget(mem_tmp_store), widget=widget.FileUploadWidget(mem_tmp_store),
title="Identitas", title="Identitas",
validator=image_validator, validator=image_validator,
visible=False) visible=False
)
class EditSchema(ListSchema): class EditSchema(ListSchema):
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!