TKK_E32211938/camera.php

<?php
	require_once("config.php");
	require_once("login-status.php");

	$table = $prefix.'camera_config';
	$table_foto = $prefix.'foto';
	$table_foto_auto = $prefix.'foto_auto';
  
	// monitor data
	$query_data = $conn->query("SELECT * FROM $table ORDER BY `id` DESC LIMIT 1");
  
	$row_data = mysqli_fetch_assoc($query_data);
	$camera_mode = $row_data['otomatis'];
  
	// monitor foto manual
	$query_foto = $conn->query("SELECT * FROM $table_foto ORDER BY `timestamp` DESC LIMIT 1");
  
	$row_foto = mysqli_fetch_assoc($query_foto);
  
	// monitor foto auto
	$query_foto_auto = $conn->query("SELECT * FROM $table_foto_auto ORDER BY `timestamp` DESC LIMIT 1");
  
	$row_foto_auto = mysqli_fetch_assoc($query_foto_auto);
?>

<div class="container">
  <div class="card mb-3">
    <div class="card-header text-start">
      <div class="row">
		<div class="col-2 form-check" style="margin-left:15px">
			<input type="radio" class="form-check-input" id="radio1" name="camera-mode" value="1" <?php if($camera_mode == '1') echo "checked"; ?>>Otomatis
			<label class="form-check-label" for="radio1"></label>
		</div>
		<div class="col form-check">
			<input type="radio" class="form-check-input" id="radio2" name="camera-mode" value="0" <?php if($camera_mode == '0') echo "checked"; ?>>Manual
			<label class="form-check-label" for="radio2"></label>
		</div>
	  </div>
    </div>
    <div class="card-body">
		<div id="time-set" <?php if($camera_mode == '0') echo 'style="display:none"'; ?>>
			<div class="row" style="margin-bottom:10px">
				<div class="col-4"></div>
				<div class="col-4 card border-success">
					<?php echo $row_data['otomatis_set']; ?>
				</div>
				<div class="col-4"></div>
			</div>
			<select style="width:100px;" id="jam">
				<option value="">Jam</option>
				<option value="00">00</option>
				<?php 
					for($i=1; $i<=23; $i++)
					{
						if(strlen($i)<2) $i = '0'.$i;
				?>
				<option value="<?php echo $i;?>"><?php echo $i;?></option>
				<?php
					}
				?> 
			</select>
			<select style="width:100px;" id="menit">
				<option value="">Menit</option>
				<?php 
					for($i=0; $i<=59; $i++)
					{
						if(strlen($i)<2) $i = '0'.$i;
				?>
				<option value="<?php echo $i;?>"><?php echo $i;?></option>
				<?php
					}
				?>
			</select>
			<select style="width:100px;" id="detik">
				<option value="">Detik</option>
				<?php 
					for($i=0; $i<=59; $i++)
					{
						if(strlen($i)<2) $i = '0'.$i;
				?>
				<option value="<?php echo $i;?>"><?php echo $i;?></option>
				<?php
					}
				?>
			</select>
			<button class="btn btn-sm btn-outline-primary" id="simpan">Simpan</button>
      	</div>
		<div id="manual" <?php if($camera_mode == '1') echo 'style="display:none"'; ?>>
		<button class="btn btn-sm btn-outline-primary" id="take-picture" style="font-size: 32px;">&nbsp;<i class='bx bx-camera'></i>&nbsp;</button>
      	</div>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header text-start">
      <h5>Hasil Foto</h5>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-6" id="photo" <?php if($camera_mode == '1') echo 'style="display:none"'; ?>>
          <div class="card border-success">
            <img src="images/kamera/<?php if($row_data['status_kamera']==0) echo $row_foto['filename']; else echo 'blank.jpg'; ?>">
          </div>
        </div>
        <div class="col-md-6" id="photo-auto" <?php if($camera_mode == '0') echo 'style="display:none"'; ?>>
          <div class="card border-success">
            <img src="images/kamera/<?php echo $row_foto_auto['filename']; ?>">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
	$(document).ready(function () {
		$('#modal-loading').modal({
			backdrop: 'static',
			keyboard: false
		})
	});

	$('input:radio[name="camera-mode"]').change(function(){
        if($(this).val() == '1')
		{
			$('#time-set').show();
			$('#manual').hide();
			$('#photo').hide();
			$('#photo-auto').show();
		   $.ajax({ 
				url: 'camera-set.php',
				data: {'camera-mode':1},
				type: 'POST',
				success: function() {
					window.location.reload();
				}
			});
		} else if($(this).val() == '0')
		{
			$('#time-set').hide();
			$('#manual').show();
			$('#photo').show();
			$('#photo-auto').hide();
			$.ajax({ 
				url: 'camera-set.php',
				data: {'camera-mode':0},
				type: 'POST',
				success: function() {
					window.location.reload();
				}
			});
		}
	});

	$("#simpan").on("click", function() {
		let jam = $("#jam").val();
		let menit = $("#menit").val();
		let detik = $("#detik").val();
		let waktu = jam + ':' + menit + ':' + detik;
		if(jam.length<1 || menit.length<1 || detik.length<1) {
			alert('Pilih Jam Menit Detik terlebih dahulu');
			return false;
		}
		$.ajax({ 
			url: 'camera-set.php',
			data: {'otomatis-set':waktu},
			type: 'POST',
			success: function() {
				window.location.reload();
			}
		});
	});

	$("#take-picture").on("click", function() {
		$('#modal-loading').modal('show');
		$.ajax({ 
			url: 'camera-set.php',
			data: {'status-kamera':1},
			type: 'POST',
			success: function() {
				setTimeout(() => { window.location.reload(); }, 10000);
			}
		});
	});

</script>