update tampilan pcpd

eispajak/__init__.py

@@ -19,6 +19,8 @@ def includeme(config):
     # APP_CLASS.static_views(config)
     # SPPT_CLASS.route_from_list(config, routes, paket="opensipkd.pbb.esppt")
     APP_CLASS.route_from_csv(config, "eispajak.views")
+    config.add_static_view('eis/static', 'eispajak:static',
+                           cache_max_age=3600)
     config.scan(".")
     print("+", __name__, "includeme class loaded")
 

eispajak/views/templates/pcpd.pt

@@ -41,7 +41,8 @@
   .icon-color {
     color: transparent;
     -webkit-text-stroke-width: 0.5px;
-    -webkit-text-stroke-color: #444a69;
+    -webkit-text-stroke-color: #03c5f8;
+    font-size: 22px;
   }
 
   .top-0 {
@@ -75,23 +76,36 @@
   .main-panel .panel-body .odometer-formatting-mark {
     color: #648baf;
   }
+
+  .icon-rounded {
+    display: block;
+    vertical-align: middle;
+    max-width: 100%;
+    height: auto;
+    padding-right: 10px;
+  }
+  .rounded{
+    border-radius: 7px !important;
+  }
+  .uppercase {
+    text-transform: uppercase !important;
+  }
+  .padding-top-sm { padding-top: .5em; }
 </style>
 
 <div metal:fill-slot="content">
   <div class="row ">
     <div class="col-md-12">
-      <div class="panel panel-default text-center main-panel">
+      <div class="panel panel-default text-center main-panel uppercase">
         <div class="panel-body">
           <h1><b>${title}</b></h1>
-          <div>
+          <div class="padding-top-sm">
             <h5 id="time">Rab, 4 Jun 2025 - 14:11:05</h5>
           </div>
           <h4 style="font-size: 4.0em;">
-            <b>Rp.
-              <h4 class="odometer bold" id="today"></h4>
-            </b>
+            <b>Rp.<h4 class="odometer bold" id="today"></h4></b>
           </h4>
-          <h5><b><span id="trx"></span> Transaksi</b></h5>
+          <h5 class="padding-top-sm"><b><span id="trx"></span> Transaksi</b></h5>
         </div>
       </div>
     </div>
@@ -100,7 +114,9 @@
     <div class="col-md-6">
       <div class="panel panel-default text-center">
         <div class="panel-heading">
-          <h5 class="text-left bold">Total Realisasi s.d Hari Ini
+          <img src="${home}/eis/static/42x42-money-transfer.png" class="icon-rounded" alt="" align="left">
+          <h5 class="text-left bold">
+            Total Realisasi s.d Hari Ini
             <i class="fa fa-info-circle pull-right icon-color"></i>
           </h5>
         </div>
@@ -115,8 +131,9 @@
       </div>
     </div>
     <div class="col-md-6">
-      <div class="panel panel-default">
+      <div class="panel panel-default hide">
         <div class="panel-heading">
+          <img src="${home}/eis/static/42x42-pie-chart.png" class="icon-rounded" alt="" align="left">
           <h5 class="text-left bold">Jumlah Transaksi
             <i class="fa fa-info-circle pull-right icon-color"></i>
           </h5>
@@ -131,7 +148,7 @@
   </div>
   <div class="row ">
     <div class="col-md-2">
-      <select class="form-control" id="rangeType">
+      <select class="form-control rounded" id="rangeType">
         <option value="1">Harian</option>
         <option value="2">Mingguan</option>
         <option value="3">Bulanan</option>
@@ -230,7 +247,7 @@
     var ctx = document.getElementById('chartPie').getContext('2d');
     var canvas = document.getElementById('chartPie');
     canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight / 3.38;
+    canvas.height = window.innerHeight / 3.8;
     const pie_data = {
       labels: [
         'Pajak',
@@ -397,17 +414,20 @@
     addData(amtKumulatifChart, amtKumulatifChartData);
     addData(trxKumulatifChart, trxKumulatifChartData);
   }
+  const formatter = new Intl.DateTimeFormat('id-ID', { dateStyle: 'full', timeStyle: 'medium' });
   $.fn.datarefresh = function () {
     console.log("data_refresh");
     console.log("${url}");
     $.get("${url}", {}, function (data, status) {
       if (status === "success") {
         newData = data;
+        date = new Date(newData.time);
         today.innerHTML = newData.today;
         trx.innerHTML = newData.trx;
         ytd.innerHTML = newData.ytd;
         trxYtd.innerHTML = newData.trxYtd;
-        time.innerHTML = newData.time;
+        time.innerHTML = formatter.format(date);//newData.time;
+        
         time.style.fontWeight = 'bold';
         // removeData(pieChart);
         addData(pieChart, newData.pie);
@@ -419,7 +439,7 @@
       setTimeout(function () {
         console.log("timeout");
         $().datarefresh();
-      }, 15000);
+      }, 300000);
 
     });
     // $().get_realisasi();