templates/backend/base/base.html.twig line 1

Open in your IDE?
  1. <!doctype html>
  2. <html lang="en" >
  3.     <head>
  4.     <style>
  5.    .tooltip {
  6.       --bs-tooltip-bg: #bdc7d7 !important;
  7.       --bs-tooltip-color: #000 !important;
  8.     }
  9.     </style>
  10.         <meta charset="utf-8">
  11.         <meta name="viewport" content="width=device-width, initial-scale=1">
  12.         <title>Dashboard SGN</title>
  13.         <!--favicon-->
  14.         <link rel="icon" href="{{ asset('frontend/img/logo.png') }}" type="image/png">
  15.         <!-- loader -->
  16.         <link href="{{ asset('new_template/css/pace.min.css') }}" rel="stylesheet">
  17.         <script src="{{ asset('new_template/js/pace.min.js') }}"></script>
  19.         <!--plugins-->
  20.         <link href="{{ asset('new_template/plugins/perfect-scrollbar/css/perfect-scrollbar.css') }}" rel="stylesheet"> 
  21.     <link href="{{ asset('new_template/plugins/metismenu/metisMenu.min.css') }}" rel="stylesheet">
  22.         <link href="{{ asset('new_template/plugins/metismenu/mm-vertical.css') }}" rel="stylesheet">
  23.         <link href="{{ asset('new_template/plugins/simplebar/css/simplebar.css') }}" rel="stylesheet">
  25.         <!--bootstrap css-->
  26.         <link href="{{ asset('new_template/css/bootstrap.min.css') }}" rel="stylesheet">
  27.         <link href="{{ asset('new_template/plugins/datatable/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet"/>
  28.     <link rel="stylesheet" href="{{ asset('new_template/css/extra-icons.css') }}">
  29.     <link rel="stylesheet" href="{{ asset('new_template/css/flatpickr.min.css') }}">
  30.     <link href="https://cdn.jsdelivr.net/npm/gridstack@9.2.2/dist/gridstack.min.css" rel="stylesheet"/>
  31.         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
  32.         <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">
  33.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
  35.         <!--main css-->
  36.         <link href="{{ asset('new_template/css/bootstrap-extended.css') }}" rel="stylesheet">
  37.         <link href="{{ asset('new_template/sass/main.css') }}" rel="stylesheet">
  38.         <link href="{{ asset('new_template/sass/dark-theme.css') }}" rel="stylesheet">
  39.         <link href="{{ asset('new_template/sass/blue-theme.css') }}" rel="stylesheet">
  40.         <link href="{{ asset('new_template/sass/semi-dark.css') }}" rel="stylesheet">
  41.         <link href="{{ asset('new_template/sass/bordered-theme.css') }}" rel="stylesheet">
  42.         <link href="{{ asset('new_template/sass/responsive.css') }}" rel="stylesheet">
  43.         <link href="{{ asset('new_template/css/custom-new-template.css') }}" rel="stylesheet">
  44.     <link rel="stylesheet" href="{{ asset('frontend/select2/select2.css') }}">
  45.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  46.       
  47.     {# core dulu #}
  48.         <script src="{{ asset('new_template/js/jquery.min.js') }}"></script>
  49.         <script src="{{ asset('new_template/js/bootstrap.bundle.min.js') }}"></script>
  51.         {# plugins layout #}
  52.         <script src="{{ asset('new_template/plugins/metismenu/metisMenu.min.js') }}"></script>
  53.         <script src="{{ asset('new_template/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
  54.         <script src="{{ asset('new_template/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
  55.         <script src="{{ asset('new_template/plugins/perfect-scrollbar/js/perfect-scrollbar.js') }}"></script>
  56.         <script src="{{ asset('new_template/plugins/simplebar/js/simplebar.min.js') }}"></script>
  58.         {# plugin opsional #}
  59.         <script src="{{ asset('new_template/plugins/apexchart/apexcharts.min.js') }}"></script>
  60.         <script src="{{ asset('new_template/plugins/peity/jquery.peity.min.js') }}"></script>
  61.         <script src="{{ asset('new_template/js/flatpickr.js') }}"></script>
  62.     <script src="{{ asset('frontend/select2/select2.js') }}"></script>
  63.     <script src="https://cdn.jsdelivr.net/npm/gridstack@9.2.2/dist/gridstack-all.min.js"></script>
  65.     <script src="https://cdn.jsdelivr.net/npm/gridstack@9.2.2/dist/gridstack-all.min.js"></script>
  66.     <script src="{{ asset('frontend/assets/plugins/leaflet/leaflet.js') }}"></script>
  67.     <script src="{{ asset('frontend/assets/plugins/leaflet/air.js') }}"></script>
  68.     <script src="{{ asset('frontend/select2/select2.min.js') }}"></script>
  69.     <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  71.         {# js tema umum #}
  72.         <script src="{{ asset('new_template/js/main.js') }}"></script>
  73.     <script src="https://code.highcharts.com/highcharts.js"></script>
  74.     <script src="https://code.highcharts.com/modules/exporting.js"></script>
  75.     <script src="https://code.highcharts.com/modules/export-data.js"></script>
  76.     <script src="https://code.highcharts.com/modules/accessibility.js"></script>
  77.     </head>
  79.     <body>
  80.         <!--start header-->
  81.         {% include 'backend/base/_header.html.twig' %}
  82.         <!--end top header-->
  84.         <!--start sidebar-->
  85.         {% include 'backend/base/_sidebar.html.twig' %}
  86.         <!--end sidebar-->
  88.     <div class="modal fade" id="modal" tabindex="-1" aria-hidden="true">
  89.         <div class="modal-dialog modal-lg modal-dialog-scrollable">
  90.             <div class="modal-content"></div>
  91.         </div>
  92.     </div>
  94.         <!--start main wrapper-->
  95.             <main class="main-wrapper"> 
  96.         <div class="main-content">
  97.           <!--breadcrumb-->
  98.           <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
  99.             {{ kmj_breadcrumb()|raw }}
  100.           </div>
  101.           <!--end breadcrumb-->
  103.           <div class="row"> 
  104.             {% block body %}
  105.             {% endblock %}
  106.           </div>
  107.         </div>
  108.             </main>
  109.             <!--end main wrapper-->
  111.             <!--start switcher-->
  112.             {% include 'backend/base/_theme_switcher.html.twig' %}
  113.             <!--start switcher-->
  115.             {# Safe initializations #}
  116.       <script>
  117.         (function (win, doc, $) {
  118.           function initMetis() {
  119.             var el = doc.getElementById('sidenav');
  120.             if (!el || !win.MetisMenu) return;
  121.             try { if (el.metisMenuObj && el.metisMenuObj.dispose) el.metisMenuObj.dispose(); } catch(e){}
  122.             el.metisMenuObj = new win.MetisMenu(el);
  123.           }
  124.           function initPS() {
  125.             if (!win.PerfectScrollbar) return;
  126.             var nodes = doc.querySelectorAll('.user-list, [data-ps], [data-simplebar="true"]');
  127.             nodes.forEach(function (n) { try { new win.PerfectScrollbar(n); } catch(e){} });
  128.           }
  129.           function initPeity() {
  130.             if (!$ || !$.fn || !$.fn.peity) return;
  131.             $('.data-attributes span').peity('donut');
  132.           }
  133.           doc.addEventListener('DOMContentLoaded', function(){ initMetis(); initPS(); initPeity(); });
  134.           win.addEventListener('load', function(){ initMetis(); initPS(); initPeity(); });
  135.         })(window, document, window.jQuery);
  136.       </script>
  138.       {# Modal loader + dispatch modal:content-ready #}
  139.       <script>
  140.         (function () {
  141.           const modalEl = document.getElementById('modal');
  142.           if (!modalEl) return;
  144.           document.addEventListener('click', function (ev) {
  145.             const trigger = ev.target.closest(
  146.               '.btn-modal,' +
  147.               '[data-bs-toggle="modal"][data-bs-target="#modal"],' +
  148.               '[data-toggle="modal"][data-target="#modal"]'
  149.             );
  150.             if (!trigger) return;
  152.             ev.preventDefault();
  154.             const url = trigger.getAttribute('href') || trigger.dataset.url || trigger.getAttribute('data-url');
  155.             const content = modalEl.querySelector('.modal-content');
  157.             // placeholder loading
  158.             content.innerHTML = '<div class="modal-body p-5 text-center">Loading…</div>';
  160.             // tampilkan modal
  161.             const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
  162.             modal.show();
  164.             if (!url) return;
  166.             fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
  167.               .then(r => r.text())
  168.               .then(html => {
  169.                 content.innerHTML = html;
  171.                 // normalisasi tombol close lama → BS5
  172.                 content.querySelectorAll('[data-dismiss="modal"]').forEach(function (el) {
  173.                   el.setAttribute('data-bs-dismiss', 'modal');
  174.                   el.removeAttribute('data-dismiss');
  175.                 });
  176.                 content.querySelectorAll('.close').forEach(function (oldBtn) {
  177.                   if (oldBtn.tagName === 'BUTTON') {
  178.                     oldBtn.classList.remove('close');
  179.                     oldBtn.classList.add('btn-close');
  180.                     oldBtn.setAttribute('data-bs-dismiss', 'modal');
  181.                     oldBtn.setAttribute('aria-label', 'Close');
  182.                     const x = oldBtn.querySelector('span[aria-hidden="true"]');
  183.                     if (x) x.remove();
  184.                   } else {
  185.                     const btn = document.createElement('button');
  186.                     btn.type = 'button';
  187.                     btn.className = 'btn-close';
  188.                     btn.setAttribute('data-bs-dismiss', 'modal');
  189.                     btn.setAttribute('aria-label', 'Close');
  190.                     oldBtn.replaceWith(btn);
  191.                   }
  192.                 });
  194.                 // Re-init Select2 (scoped ke modal)
  195.                 if (window.jQuery && jQuery.fn.select2) {
  196.                   jQuery(content).find('.select12').select2({
  197.                     allowClear: true,
  198.                     width: 'resolve',
  199.                     dropdownParent: jQuery(modalEl)
  200.                   });
  201.                 }
  203.                 content.dispatchEvent(new CustomEvent('modal:content-ready', { bubbles: true }));
  204.               })
  205.               .catch(() => {
  206.                 content.innerHTML = '<div class="modal-body text-danger p-4">Gagal memuat konten.</div>';
  207.               });
  208.           });
  210.           // dukung penutup modal lama
  211.           modalEl.addEventListener('click', function (e) {
  212.             const legacyClose = e.target.closest('[data-dismiss="modal"], .close');
  213.             if (!legacyClose) return;
  214.             const inst = bootstrap.Modal.getInstance(modalEl) || bootstrap.Modal.getOrCreateInstance(modalEl);
  215.             inst.hide();
  216.           });
  217.         })();
  218.       </script>
  220.       <script>
  221.         document.addEventListener("DOMContentLoaded", function(){
  222.           var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  223.           var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  224.             return new bootstrap.Tooltip(tooltipTriggerEl)
  225.           })
  226.         });
  227.       </script>
  229.       <script>
  230.         // inject URL dari Symfony ke JS global (kalau dipakai di explore-data.js)
  231.         window.EXPLORE_ROUTES = {
  232.           getColumn: "{{ path('explore_data_get_column') }}",
  233.           getColumnTgrafik: "{{ path('t_grafik_get_column') }}"
  234.         };
  235.       </script>
  236.       {# <script>
  237.           $(".datepicker").flatpickr();
  239.           $(".time-picker").flatpickr({
  240.               enableTime: true,
  241.               noCalendar: true,
  242.               dateFormat: "Y-m-d H:i",
  243.             });
  245.           $(".date-time").flatpickr({
  246.               enableTime: true,
  247.               dateFormat: "Y-m-d H:i",
  248.           });
  250.           $(".date-format").flatpickr({
  251.             altInput: true,
  252.             altFormat: "F j, Y",
  253.             dateFormat: "Y-m-d",
  254.           });
  256.           $(".date-range").flatpickr({
  257.             mode: "range",
  258.             altInput: true,
  259.             altFormat: "F j, Y",
  260.             dateFormat: "Y-m-d",
  261.           });
  263.           $(".date-inline").flatpickr({
  264.             inline: true,
  265.             altInput: true,
  266.             altFormat: "F j, Y",
  267.             dateFormat: "Y-m-d",
  268.           });
  269.         </script> #}
  271.       <script>
  272.         let __postingDates = null;
  273.         function getPostingDates() {
  274.           if (__postingDates) return Promise.resolve(__postingDates);
  275.           return fetch('{{ path('dashboard_dates') }}')
  276.             .then(r => r.json())
  277.             .then(d => (__postingDates = d))
  278.             .catch(() => (__postingDates = []));
  279.         }
  281.         function initScopedPickers(rootEl) {
  282.           const root = rootEl || document;
  284.           // kalau root berada di dalam modal → pakai modal sebagai appendTo
  285.           // kalau bukan modal → jangan set appendTo (biarkan default)
  286.           const modalEl = (root instanceof Element) ? root.closest('.modal') : null;
  287.           const useAppendTo = !!modalEl;
  289.           // helper utk menyisipkan appendTo hanya jika di modal
  290.           const withAppend = (opts) => useAppendTo ? Object.assign(opts, { appendTo: modalEl }) : opts;
  292.           // DATE ONLY
  293.           root.querySelectorAll('.datepicker').forEach(el => {
  294.             if (el._flatpickr) return;
  295.             getPostingDates().then(dates => {
  296.               flatpickr(el, withAppend({
  297.                 dateFormat: 'Y-m-d',
  298.                 onDayCreate: function(dObj, dStr, fp, dayElem) {
  299.                   const ymd = dayElem.dateObj.toLocaleDateString('en-CA');
  300.                   if (Array.isArray(dates) && dates.includes(ymd)) {
  301.                     dayElem.classList.add('has-data');
  302.                     dayElem.title = 'Ada data posting';
  303.                   }
  304.                 }
  305.               }));
  306.             });
  307.           });
  309.           // TIME ONLY
  310.           root.querySelectorAll('.time-picker').forEach(el => {
  311.             if (el._flatpickr) return;
  312.             flatpickr(el, withAppend({
  313.               enableTime: true,
  314.               noCalendar: true,
  315.               dateFormat: 'Y-m-d H:i'
  316.             }));
  317.           });
  319.           // DATE TIME
  320.           root.querySelectorAll('.date-time').forEach(el => {
  321.             if (el._flatpickr) return;
  322.             flatpickr(el, withAppend({
  323.               enableTime: true,
  324.               dateFormat: 'Y-m-d H:i'
  325.             }));
  326.           });
  328.           // DATE with alt display
  329.           root.querySelectorAll('.date-format').forEach(el => {
  330.             if (el._flatpickr) return;
  331.             flatpickr(el, withAppend({
  332.               altInput: true,
  333.               altFormat: 'F j, Y',
  334.               dateFormat: 'Y-m-d'
  335.             }));
  336.           });
  338.           // RANGE
  339.           root.querySelectorAll('.date-range').forEach(el => {
  340.             if (el._flatpickr) return;
  341.             flatpickr(el, withAppend({
  342.               mode: 'range',
  343.               altInput: true,
  344.               altFormat: 'F j, Y',
  345.               dateFormat: 'Y-m-d'
  346.             }));
  347.           });
  349.           // INLINE
  350.           root.querySelectorAll('.date-inline').forEach(el => {
  351.             if (el._flatpickr) return;
  352.             flatpickr(el, withAppend({
  353.               inline: true,
  354.               altInput: true,
  355.               altFormat: 'F j, Y',
  356.               dateFormat: 'Y-m-d'
  357.             }));
  358.           });
  359.         }
  361.         // INIT DI HALAMAN UTAMA
  362.         document.addEventListener('DOMContentLoaded', function() {
  363.           initScopedPickers(document);
  364.         });
  366.         const globalModal = document.getElementById('modal');
  367.         if (globalModal) {
  368.           globalModal.addEventListener('modal:content-ready', function (ev) {
  369.             const content = ev.target; // .modal-content
  370.             initScopedPickers(content);
  371.           });
  372.         }
  373.       </script>
  376.       {# Script spesifik aplikasi #}
  377.       <script src="{{ asset('new_template/js/explore-data.js') }}"></script>
  378.       <script src="{{ asset('new_template/js/t-grafik.js') }}"></script>
  379.       <script src="{{ asset('new_template/js/modal-new.js') }}"></script>
  381.       {% block page_scripts %}{% endblock %}
  382.     </body>
  383. </html>