home.pt 7.09 KB
<html metal:use-macro="load: base.pt">
<div metal:fill-slot="content">
  <link rel="stylesheet" type="text/css" media="screen"
        href="${home}/pbbm/static/css/home.css">
  <!--?  <link rel="stylesheet" type="text/css" media="screen"-->
  <!--?        href="${home}/static/css/osipkd.css">-->
  <style type="text/css">
    html, body {
      overflow-x: hidden;
    }

    .container {
      height: 100%;
    }

    .fixed-navigation nav {
      overflow-x: hidden;
      overflow-y: scroll;
      padding-bottom: 0px;
    }

    .fixed-navigation nav > ul {
      height: auto;
    }

    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: rgba(181, 181, 181, 0.7);
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }
  </style>
  <div id="content">

    <div class="well">
      <div class="clearfix"></div>

      <center>
        <div class="col-md-12">
          <div class="alert alert-judul">
            <h1 class="alert alert-info">REALISASI PAJAK BUMI DAN BANGUNAN P2 TAHUN ${request.session['tahun']}</h1>
          </div>
        </div>

        <div class="col-md-8 col-md-offset-2">
          <!--Kecmatan-->
          <div class="row">
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon" id="label-kecamatan">Kecamatan</span>
                <select id="kecamatan" name="kecamatan" class="form-control">
                  <option value="000" selected>--SEMUA--</option>
                  <tal:block tal:repeat="kecamatan kecamatans">
                    <option tal:condition="kecamatan.kd_kecamatan != request.session['kd_kecamatan']"
                         tal:attributes="value kecamatan.kd_kecamatan"
                         tal:content="kecamatan.nm_kecamatan">
                    </option>
                    <option tal:condition="kecamatan.kd_kecamatan == request.session['kd_kecamatan']"
                         tal:attributes="value kecamatan.kd_kecamatan"
                         tal:content="kecamatan.nm_kecamatan"
                        selected>
                    </option>
                  </tal:block>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon" id="label-kelurahan">Kelurahan</span>
                <select id="kelurahan" name="kelurahan" class="form-control">
                  <option value="000" selected>--SEMUA--</option>
                  <tal:block tal:repeat="kelurahan kelurahans">
                    <option tal:condition="kelurahan.kd_kelurahan  !=  request.session['kd_kelurahan']"
                         tal:attributes="value kelurahan.kd_kelurahan"
                         tal:content="kelurahan.nm_kelurahan">
                    </option>
                    <option tal:condition="kelurahan.kd_kelurahan  ==  request.session['kd_kelurahan']"
                         tal:attributes="value kelurahan.kd_kelurahan"
                         tal:content="kelurahan.nm_kelurahan"
                        selected>
                    </option>
                  </tal:block>
                </select>
              </div>
            </div>
          </div>

          <!--hari minggu-->
          <div class="row">
            <div class="col-md-6">
              <div class="alert alert-success">
                <h4><u>Hari ini</u></h4>
                <h2>Rp. <span id="hari">...</span></h2>
              </div>
            </div>
            <div class="col-md-6">
              <div class="alert alert-info">
                <h4><u>Minggu ini</u></h4>
                <h2>Rp. <span id="minggu">...</span></h2>
              </div>
            </div>
          </div>
          <!--bulan tahun-->
          <div class="row">
            <div class="col-md-6">
              <div class="alert alert-warning">
                <h4><u>Bulan ini</u></h4>
                <h2>Rp. <span id="bulan">...</span></h2>
              </div>
            </div>
            <div class="col-md-6">
              <div class="alert alert-danger">
                <h4><u>Tahun ini</u></h4>
                <h2>Rp. <span id="tahun">...</span></h2>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="alert alert-judul">
                <h1 class="page-title txt-color-blueDark">KELOMPOK</h1>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="alert alert-success">
                <h4><u>Ketatapan ${request.session['tahun']}</u></h4>
                <h2>Rp. <span id="ketetapan">...</span></h2>
              </div>
            </div>
            <div class="col-md-6">
              <div class="alert alert-info">
                <h4><u>Realisasi ${request.session['tahun']}</u></h4>
                <h2>Rp. <span id="realisasi">...</span></h2>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="alert alert-warning">
                <h4><u>Realisasi Piutang</u></h4>
                <h2>Rp. <span id="piutang">...</span></h2>
              </div>
            </div>
            <div class="col-md-6">
              <div class="alert alert-danger">
                <h4><u>Pendapatan Denda</u></h4>
                <h2>Rp. <span id="denda">...</span></h2>
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>

      </center>
    </div>
  </div>
</div>

<div metal:fill-slot="scripts">
  <script>
    $(document).ready(function () {
      $.ajax({
        type: "POST",
        url: "${home}/pbbm/dashboard/act",
        success: function (html) {
          console.log(html);
          if (html.success == true) {
            $("#hari").html(html.hari.toLocaleString());
            $("#minggu").html(html.minggu.toLocaleString());
            $("#bulan").html(html.bulan.toLocaleString());
            $("#tahun").html(html.tahun.toLocaleString());
            $("#ketetapan").html(html.ketetapan.toLocaleString());
            $("#realisasi").html(html.realisasi.toLocaleString());
            $("#piutang").html(html.piutang.toLocaleString());
            $("#denda").html(html.denda.toLocaleString());
          }
        },
        beforeSend: function () {
        }
      });

      $("#kecamatan, #kelurahan").change(function () {
        console.log("kecamatan");
        var kd_kecamatan = $("#kecamatan").val();
        var kd_kelurahan = $("#kelurahan").val();
        window.location = "${home}/pbbm?kd_kecamatan=" + kd_kecamatan + "&kd_kelurahan=" + kd_kelurahan;
      });

    });
  </script>

</div>
</html>