kegiatan.html

$def with (ctx)
$ kegiatan = ctx.get('kegiatan')
$ pos = ctx.get('pos')
$ petugas = ctx.get('petugas')
$ tg = ctx.get('tgl')
$code:
    haris = [h.title() for h in "sen_sel_rab_kam_jum_sab_min".split('_')]
    bulan = [b.title() for b in "jan_feb_mar_apr_mei_jun_jul_ags_sep_okt_nop_des".split('_')]
$var extra_header:
		<style>
      .foto-thumb {
        border: solid 1px #ddd;
        padding: 5px;
      }
			.img-fluid {
				max-width: 100%;
				height: auto;
			}
			.img-preview {
				max-width: 100%;
				height: auto;
				padding: 5px;
				border: solid 1px #ddd;
			}
		</style>
$var js_foot:
    <script type="text/javascript" src="/static/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="/static/js/MinifyJpegAsync.js"></script>
		<script>
      \$(document).ready(function () {
          var hars = [$:{','.join(["'" + h + "'" for h in haris])}]
          var buls = [$:{','.join(["'" + h + "'" for h in bulan])}]
				\$('select[name="kegiatan"]').change(function () {
					if (\$('input#fotoFile')[0].files && (\$('input#fotoFile')[0].files.length > 0)) {
						\$('input[name="submit"]').removeClass('disabled');
					}
					console.log(this.value);
				});
				\$('#fotoFile').change(function (event){ readURL(event); });
        \$('.gotomonth').datepicker({
            format: 'yyyy-mm-dd',
            startView: "months",
            minViewMode: "months",
            autoclose: true
         }); 
        \$('.gotomonth').on('changeDate', function() {
            window.location = '/adm/bendungan/$pos.table_name?sampling=' + \$(this).datepicker('getFormattedDate');
          });
        \$('.datepicker').on('changeDate', function() {
              var dated = \$(this).datepicker('getDate');
              var wd = dated.getDay() - 1;
              if (wd === -1) { wd = 6 }; 
         });
      });
			let enc_img = '';
			let file_name = '';
			function readURL(event) {
        let f = event.target.files[0];
				file_name = f.name;
        let reader = new FileReader();

        reader.onloadend = (function(theFile){
          return function(e) {
						MinifyJpegAsync.minify(e.target.result, 1280, function(data) { 
							enc_img = "data:image/jpeg;base64," + btoa(data);
							let img = new Image();
							img.src = enc_img;
							document.getElementById('blah').src = enc_img;
							//\$.post('/adm/bendungan/bd_krisak/kegiatan', {data: enc_img, filename: f.name})
							console.log('Hasil proses minify') 
						});
          };
        })(f);
				reader.readAsDataURL(f);
			};
			function go_upload() {
				\$.post('/adm/bendungan/bd_krisak/kegiatan', {data: enc_img, filename: file_name})
				
			}

		</script>
<!-- End -->
<h1>Kegiatan Petugas $pos.cname <a class="btn btn-outline-primary btn-sm" data-toggle="collapse" href="#form-kegiatan"><span class="glyphicon glyphicon-triangle-right"></span>Tambah Kegiatan</a>
</h1>
<div class="container collapse" id="form-kegiatan">
<div class="row">
	<div class="col-md-6 col-xs-12"><h3 style="margin-left: -10px">Tambah Kegiatan</h4>
			<input type="file" name="foto" class="custom-file-input" id="fotoFile">
		<form method="POST" id="formUpload" action="./foto" enctype="multipart/form-data">
    <div class="form-group">
		<div class="custom-file">
			<img id="blah" class="img-fluid" style="width: 100%;" alt=" pra tinjau
      gambar" src="#">
		</div>
		<div v-if="imageData.length > 0"><img class="img-fluid" :src="imageData"></div>
			<label>Keterangan</label>
			<input type="text" name="uraian" size="45" placeholder="Contoh: Kegiatan Apel, Babat Rumput 80%">
    </div><!-- form-group -->
    <div class="form-group">
        <label for="">Tanggal</label>
        <input type="hidden" name="waktu" value="${tg.strftime('%Y/%m/%d')}">
				<p style="margin-left: 10px;" class="datepicker" data-tgl="${tg.isoformat()}">${haris[tg.weekday()]}, ${tg.strftime('%d %b %Y')}</p>
    </div>
		<div class="form-group">
      <label for="">Petugas Kegiatan</label>
      <div style="margin-left: 10px;" class="custom-control">
        <select class="custom-select form-control" name="kegiatan">
          <option value="">-</option>
      $for p in petugas:
          <option value="$p">${p.title()}</option>
      </select>
    </div>
    </div>
		<div class="form-group">
	<input type="button" name="submit" value="upload" onclick="go_upload()" class="btn btn-primary">
		</form>
		</div>
	</div>
	<div class="col-md-6 col-xs-12">Foto</div>

	</div>
</div>
</div>
<div class="container">
<span class="gotomonth" style="color: #18bc9c">${tg.strftime('%b %Y')}</span>
  <table class="table table-bordered table-stripped">
    <thead>
      <tr>
        <th></th>
        $for p in petugas:
           <th>${p.title()}</th>
      </tr>
    </thead>
  </table>
</div>
</div>