harian-ori.pt 4.91 KB
<html metal:use-macro="load: base.pt">
<div metal:fill-slot="left-menu">
  <link href="/static/css/navbar-fixed-left.css" rel="stylesheet">    
  <style>
      body {
          /*background-image: url("static/img/bg1.jpg");*/
      }
      .judul {
          margin-top: 25px;
          color: #777;
          font-size: 30px;
          font-weight: normal;
          padding-bottom:10px;
          padding-top:10px;
          background-color:rgb(205,205,205);
          text-align:center;
          margin-left:5px;
          margin-right:5px;
      }

      @media (min-width: 992px) {
        .judul {
            margin-left:320px;          
        }
      }
      .subjudul {
          margin-top: 0px;
          margin-bottom: 20px;
          font-size: 30px;
          text-align:center;
          color: #777;
          padding-left:0px;          
      }
      @media (min-width: 992px) {
        .subjudul {
            margin-top: 100px;
            font-size: 30px;
            padding-left:320px;
            text-align:center;
        }
      }
      .data {
          margin-top: 25px;
          font-weight: normal;
          text-align:center;
          margin-left:5px;
          margin-right:5px;
      }

      @media (min-width: 992px) {
        .data {
            margin-left:320px;          
        }
      }      
      
      .alert {
          border-radius: 0px !important;
      }
      .alert-judul {
          color: #fff;
          background-color: #6497C9;
          border-color: #5580AA;
      }
      .alert-judul h3 {
          margin-top: 4px !important;
          margin-bottom: 4px !important;
      }
  </style>
  <div class="nav-side-menu" style="display:block;">
    <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 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>
          <ul class="sub-menu collapse" id="pendapatan">
            <li tal:repeat="row ar_datas">
              <a href="#" onclick="javascript:hide_other();$('#grid-${row.id}').show();">${row.nama}</a>
            </li>
          </ul>
        </li>
        <li data-toggle="collapse" data-target="#belanja" class="collapsed active">
          <a href="#"><i class="fa fa-gift fa-lg"></i> Belanja <span class="arrow"></span></a>
          <ul class="sub-menu collapse" id="belanja">
            <li tal:repeat="row ap_datas">
              <a href="#">${row.nama}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="row judul">
    <div class="col-md-2">
        <img class="" src="/static/img/logo.png" style="height:80px; width:80px;padding-bottom:5px;">
    </div>
    <div class="col-md-10">
        EKSEKUTIF SUMMARY PAJAK DAERAH
        <h4>Tahun ${request.session['tahun']}</h4>
    </div>
  </div>  
</div>

<div metal:fill-slot="content">
  <div class="data" style="display:none;" tal:repeat="dat ar_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}">${dat.amt_hari}</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>
  </div>
</div> 
<div metal:fill-slot="scripts">
  <script>
    function hide_other(){
      $('.data').hide();
    };
      
    var bar_chart_options = {
      responsive:true
    };
  </script>
      
</div>
</html>