harian.pt 7.04 KB
<html metal:use-macro="load: base.pt">
<div metal:fill-slot="left-menu">
  <link href="/static/css/navbar-fixed-left.css" rel="stylesheet">    
  <div class="nav-side-menu">
    <div class="brand">Eksekutif Summary</div>
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
    <div class="menu-list">
      <ul id="menu-content" class="menu-content collapse out">
        <!--li>
          <a href="#">
            <i class="fa fa-dashboard fa-lg"></i> Executive Summary
          </a>
        </li-->
        <li  data-toggle="collapse" data-target="#pendapatan" class="collapsed active">
          <a href="#"><i class="fa fa-gift fa-lg"></i> Pendapatan <span class="arrow"></span></a>
        </li>
        <ul class="sub-menu collapse" id="pendapatan">
          <li tal:repeat="dat ar_datas"><a href="#" onclick="javascript:hide_other();$('#grid-${dat.id}').show();">${dat.nama}</a></li>
        </ul>
        
        <li data-toggle="collapse" data-target="#belanja" class="collapsed">
          <a href="#"><i class="fa fa-globe fa-lg"></i> Belanja <span class="arrow"></span></a>
        </li>  
        
        <ul class="sub-menu collapse" id="belanja">
          <li tal:repeat="dat ap_datas"><a href="#" onclick="javascript:hide_other();$('#grid-${dat.id}').show();">${dat.nama}</a></li>
        </ul>
       </ul>
    </div>
  </div>
  
</div>
<div metal:fill-slot="scripts">
  <script>
    function formatNumber(num) {
      return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
    };
    
    function hide_other(){
      $('.data').hide();
    };
  </script>
  <style>
    .data {
        margin-top: 10px;
        font-weight: normal;
        text-align: center;
        margin-left: 5px;
        margin-right: 5px;
    }

    @media (min-width: 992px) {
        .latar {
            margin-top:15px;
            margin-left:325px;
            margin-right:10px;
         }
      }
      
  </style>
  <div class="colmd-12">
    <div class="latar">
      <div class="isi">
        <div class="row">
          <div class="col-md-2 header" style="padding-top:5px;">
                <img class="" src="/static/img/logo.png" style="height:80px; width:80px;padding-bottom:5px;">
          </div>
          <div class="col-md-10 judul">
                EKSEKUTIF SUMMARY KEUANGAN DAERAH<br>
                TAHUN ${request.session['tahun']}
          </div>
        </div>
        <div class="data" style="display:none;" tal:repeat="dat ar_datas" id="grid-${dat.id}">
          <!--TITLE-->
          <div class="row">
              <div class="sub-judul">${dat.nama} </div>
              <!-- <div class="sub-judul" tal:condition="request.user.id==1">   -->
                 <!-- <a href="/eis/sipkd/harian/${dat.id}/edit">Edit</a> -->
              <!-- </div> -->
          </div>

          
          <div class="row" style="margin-top:10px;">  <!--hari minggu-->
              <div class="col-md-6">
                <div class="alert alert-success">
                    <h4>&nbsp;</h4>
                    <h4><u>Hari ini</u></h4>
                    <h2>Rp. <span id="hari_${dat.id}"></span></h2>
                    <h4>&nbsp;</h4>
                </div>
              </div>
              <div class="col-md-6">
                  <div class="alert alert-info">
                    <h4>&nbsp;</h4>
                      <h4><u>Bulan ini</u></h4>
                      <h2>Rp. <span id="minggu_${dat.id}">${dat.amt_minggu}</span></h2>
                    <h4>&nbsp;</h4>
                  </div>
              </div>
          </div>
          <div class="row">   <!--bulan tahun-->
              <div class="col-md-6">
                <div class="alert alert-warning">
                    <h4>&nbsp;</h4>
                    <h4><u>s.d Bulan Lalu</u></h4>
                    <h2>Rp. <span id="bulan_${dat.id}">${dat.amt_bulan}</span></h2>
                    <h4>&nbsp;</h4>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="alert alert-danger">
                    <h4>&nbsp;</h4>
                    <h4><u>Tahun ini</u></h4>
                    <h2>Rp. <span id="tahun_${dat.id}">${dat.amt_tahun}</span></h2>
                    <h4>&nbsp;</h4>
                </div>
            </div>
          </div>
          <script>
          $(document).ready(function(){
              $("#hari_${dat.id}").html(formatNumber(${dat.amt_hari}));
              $("#minggu_${dat.id}").html(formatNumber(${dat.amt_minggu}));
              $("#bulan_${dat.id}").html(formatNumber(${dat.amt_bulan}));
              $("#tahun_${dat.id}").html(formatNumber(${dat.amt_tahun}));
          });
          </script>
          
        </div> 
        
        <div class="data" style="display:none;" tal:repeat="dat ap_datas" id="grid-${dat.id}">
          <!--TITLE-->
          <div class="row">
          <div class="col-md-12">
              <div class="alert alert-judul">
                  <h3>${dat.nama}</h3>
              </div>
          </div>
          </div>
              <div class="row">  <!--hari minggu-->
                  <div class="col-md-6">
                    <div class="alert alert-success">
                        <h4>&nbsp;</h4>
                        <h4><u>Hari ini</u></h4>
                        <h2>Rp. <span id="hari_${dat.id}"></span></h2>
                        <h4>&nbsp;</h4>
                    </div>
                  </div>
                  <div class="col-md-6">
                      <div class="alert alert-info">
                        <h4>&nbsp;</h4>
                          <h4><u>Minggu ini</u></h4>
                          <h2>Rp. <span id="minggu_${dat.id}">${dat.amt_minggu}</span></h2>
                        <h4>&nbsp;</h4>
                      </div>
                  </div>
              </div>
              <p>
              <div class="row">   <!--bulan tahun-->
                  <div class="col-md-6">

                    <div class="alert alert-warning">
                        <h4>&nbsp;</h4>
                        <h4><u>Bulan ini</u></h4>
                        <h2>Rp. <span id="bulan_${dat.id}">${dat.amt_bulan}</span></h2>
                        <h4>&nbsp;</h4>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="alert alert-danger">
                        <h4>&nbsp;</h4>
                        <h4><u>Tahun ini</u></h4>
                        <h2>Rp. <span id="tahun_${dat.id}">${dat.amt_tahun}</span></h2>
                        <h4>&nbsp;</h4>
                    </div>
                </div>
              </div>
              <script>
              $(document).ready(function(){
                  $("#hari_${dat.id}").html(formatNumber(${dat.amt_hari}));
                  $("#minggu_${dat.id}").html(formatNumber(${dat.amt_minggu}));
                  $("#bulan_${dat.id}").html(formatNumber(${dat.amt_bulan}));
                  $("#tahun_${dat.id}").html(formatNumber(${dat.amt_tahun}));
              });
              </script>
              
        </div> 
      </div> 
    </div> 
  </div> 
</div>
</html>