@extends('layouts.main')
@section('content')
@push('head')
<title>{{ __('System Settings')}} | {{ __('PT KAI ERMS')}}</title>
<link rel="stylesheet" href="{{ asset('plugins/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/jquery-minicolors/jquery.minicolors.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/jquery-ui/jquery-ui.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2/dist/css/select2.min.css') }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<style>
.kriteria1 {
background-color: rgb(0,173,0);
}
.kriteria2 {
background-color: rgb(245,256,0);
}
.kriteria3 {
background-color: rgb(203,0,0);
}
.kriteria4 {
background-color: rgb(150,0,0);
}
body {
margin-top: 40px;
margin-left: 40px;
}
table {
border: none;
}
.vertical {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 5px;
position: absolute;
bottom: 0;
left: 0;
margin-left: 150px;
margin-bottom: 120px;
transform-origin: 0 0;
transform: rotate(270deg);
}
.horizontal {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 5px;
padding-top: 50px;
text-align: center;
}
</style>
@endpush
<div class="col-md-12">
<div class="card card-primary card-tabs">
@include('include.tab-erm')
<div class="card-body">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="form-inline">
<label for="">Skala Penilaian Risiko :</label>
<select class="form-control ml-3" name="skala" id="skala" style="width:60px;">
<option value="" selected disabled></option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<!-- <label for="" class="pl-3">Dari Tanggal :</label>
<input type="date" class="form-control ml-2">
<label for="" class="pl-3">Sampai Tanggal :</label>
<input type="date" class="form-control ml-2"> -->
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<table class="mx-auto" id="tblMain" border="1">
@php
$criteria = App\Models\Criteria::all();
@endphp
@foreach ($criteria as $item)
<tr>
@php
$matrix = json_decode( $item->matrix ,);
// dd( $item->matrix,$matrix );
@endphp
@foreach ($matrix as $key => $value)
<td id="box1" class="m-2" width="120" height="120" style="text-align:center;background:{{$value->color}}">{{ $value->level }}</td>
@endforeach
</tr>
@endforeach
<label for="" class="float-left">Kemungkinan :</label><br/>
<ol class="pl-3 pt-2" id="formKemungkinan">
<li>
<div class="form-group ml-2">
<input type="text" class="form-control" placeholder="Pilih skala dahulu..." readonly>
</div>
</li>
</ol>
</div>
<div class="col-md-4">
<label for="" class="float-left">Dampak :</label><br/>
<ol class="pl-3 pt-2" id="formDampak">
<li>
<div class="form-group ml-2">
<input type="text" class="form-control" placeholder="Pilih skala dahulu..." readonly>
</div>
</li>
</ol>
</div>
<div class="col-md-4">
<label for="" class="float-left">Level Resiko :</label><br/>
<ol class="pl-3 pt-2" id="levelRisiko">
</ol>
<button type="button" class="btn btn-danger float-right" id="removeLevel"><i class="ik ik-trash-2"></i></button>
<button class="btn btn-primary" style="margin-left: 25px;" data-toggle="modal" data-target="#modalLevel" id="btnLevel"><i class="fa fa-plus"></i></button>
</div>
<!-- <table id="myHeade" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>
<p>Dampak (Picklist RCSA 7)</p>
</td>
<td>
<p>Kemungkinan (Picklist RCSA 8)</p>
</td>
<td>
<p>Level Resiko</p>
</td>
<td></td>
</tr>
</thead>
<tboddy>
<tr>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">1</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Minor" aria-label="Minor" aria-describedby="basic-addon1">
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">1</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Hampir Tidak Mungkin" aria-label="Hampir Tidak Mungkin" aria-describedby="basic-addon1">
</div>
</td>
<td>
<div class="input-group mb-3">
<p id="p1" onclick="q1Function()" style="color:#FFFFFF"; class="form-control kriteria1">Rendah</p>
</div>
</td>
<td>
<p id="q1" class="form-control"></p>
</td>
</tr>
<tr>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">2</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Kurang Signifikan" aria-label="Kurang Signifikan" aria-describedby="basic-addon1">
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">2</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Kemungkinan Sangat Kecil" aria-label="Kemungkinan Sangat Kecil" aria-describedby="basic-addon1">
</div>
</td>
<td>
<div class="input-group mb-3">
<p id="p2" onclick="q2Function()" style="color:#000000"; class="form-control kriteria2">Sedang</p>
</div>
</td>
<td>
<p id="q2" class="form-control"></p>
</td>
</tr>
<tr>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">3</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Sedang" aria-label="Sedang" aria-describedby="basic-addon1">
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">3</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Kemungkinan Kecil" aria-label="Kemungkinan Kecil" aria-describedby="basic-addon1">
</div>
</td>
<td>
<div class="input-group mb-3">
<p id="p3" onclick="q3Function()" style="color:#FFFFFF"; class="form-control kriteria3">Tinggi</p>
</div>
</td>
<td>
<p id="q3" class="form-control"></p>
</td>
</tr>
<tr>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">4</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Signifikan" aria-label="Signifikan" aria-describedby="basic-addon1">
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">4</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Kemungkinan Besar" aria-label="Kemungkinan Besar" aria-describedby="basic-addon1">
</div>
</td>
<td>
<div class="input-group mb-3">
<p id="p4" onclick="q4Function()" style="color:#FFFFFF"; class="form-control kriteria4">Extreme</p>
</div>
</td>
<td>
<p id="q4" class="form-control"></p>
</td>
<td>
<div class="input-group mb-3">
<button class="form-control">
<i class="fa fa-plus"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">5</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Sangat Signifikan" aria-label="Sangat Signifikan" aria-describedby="basic-addon1">
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">5</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Kemungkinan Sangat Besar" aria-label="Kemungkinan Sangat Besar" aria-describedby="basic-addon1">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">6</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Extreme" aria-label="Extreme" aria-describedby="basic-addon1">
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">6</span>
</div>
<input type="text" size="28" class="form-control" placeholder="Hampir Pasti" aria-label="Hampir Pasti" aria-describedby="basic-addon1">
</div>
</td>
<td>
</td>
</tr>
</tboddy>
</table> -->
</div>
</div>
<div class="card-body">
<div class="row">
<!-- <p id="matrix"> -->
<div class="col-md-12">
<h3 class="vertical">KEMUNGKINAN (LIKELIHOOD)</h3>
<table class="mx-auto" id="tblMain" border="1">
<tbody>
<tr>
<td width="75" height="75" style="text-align:center">NULL</td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
</tr>
<tr>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
</tr>
<tr>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
</tr>
<tr>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
</tr>
<tr>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
</tr>
<tr>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
<td width="75" height="75" style="text-align:center"></td>
</tr>
</tbody>
</table>
<h3 class="horizontal">DAMPAK (IMPACT)</h3>
</div>
</div>
</div>
<div class="card-footer">
<div>
<button type="button" class="btn btn-primary float-right">Simpan</button>
<button onclick="resetTbl()" type="button" class="btn btn-secondary float-right mr-2">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalLevel" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Tambah Level</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label for="" class="float-left">Level Risiko :</label><br>
<input type="text" id="level" class="form-control" value=""><br>
<label for="" class="float-left">Warna Level Risiko :</label><br>
<input type="hidden" id="warna" class="demo" value="#27d187">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
<button type="button" onclick="tambahLevel(this)" class="btn btn-primary" data-dismiss="modal">Tambah</button>
</div>
</div>
</div>
</div>
@push('script')
<script>
function resetTbl() {
document.getElementById("q1").innerHTML = "";
document.getElementById("q2").innerHTML = "";
document.getElementById("q3").innerHTML = "";
document.getElementById("q4").innerHTML = "";
var tbl = document.getElementById("tblMain");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++) {
var prow = j + 1;
var pcol = i + 1;
tbl.rows[i].cells[j].innerHTML = prow.toString() + pcol.toString();
tbl.rows[i].cells[j].style.backgroundColor = "#FFFFFF"
tbl.rows[i].cells[j].style.color = "black";
}
}
}
}
</script>
<script>
var tbl = document.getElementById("tblMain");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () { getval(this); };
}
}
function getval(cel) {
// alert(cel.innerHTML);
if (document.getElementById("q1").innerHTML == "√") {
cel.innerHTML = "Rendah";
cel.style.color = "#FFFFFF";
cel.style.backgroundColor = "rgb(0,173,0)";
}
else if (document.getElementById("q2").innerHTML == "√") {
// alert(cel.innerHTML);
cel.style.color = "#000000";
cel.innerHTML = "Sedang";
cel.style.backgroundColor = "rgb(245,256,0)";
}
else if (document.getElementById("q3").innerHTML == "√") {
// alert(cel.innerHTML);
cel.style.color = "#FFFFFF";
cel.innerHTML = "Tinggi";
cel.style.backgroundColor = "rgb(203,0,0)";
}
else if (document.getElementById("q4").innerHTML == "√") {
// alert(cel.innerHTML);
cel.style.color = "#FFFFFF";
cel.innerHTML = "Extreme";
cel.style.backgroundColor = "rgb(150,0,0)";
}
}
</script>
<script>
function q1Function(element) {
$('#w1').addClass('bg-primary');
}
function q2Function() {
document.getElementById("q1").innerHTML = "";
document.getElementById("q2").innerHTML = "";
document.getElementById("q3").innerHTML = "";
document.getElementById("q4").innerHTML = "";
document.getElementById("q2").innerHTML = "√";
}
function q3Function() {
document.getElementById("q1").innerHTML = "";
document.getElementById("q2").innerHTML = "";
document.getElementById("q3").innerHTML = "";
document.getElementById("q4").innerHTML = "";
document.getElementById("q3").innerHTML = "√";
}
function q4Function() {
document.getElementById("q1").innerHTML = "";
document.getElementById("q2").innerHTML = "";
document.getElementById("q3").innerHTML = "";
document.getElementById("q4").innerHTML = "";
document.getElementById("q4").innerHTML = "√";
}
</script>
<script>
$(function(){
$("#btnLevel").hide();
$("#removeLevel").hide();
$('#skala').click(function(){
var skala = $('#skala').val();
$("#btnLevel").show();
$("#formKemungkinan").empty();
$("#formDampak").empty();
$("#tblMain").empty();
var i;
var b;
for(i = 1; i <= skala; i++){
$("#formKemungkinan").append("<li class='mb-2'><div class='form-group ml-2'><input type='text' class='form-control' name='kemungkinan[]' id='kemungkinan" + i +"'></div></li>");
$("#formDampak").append("<li class='mb-2'><div class='form-group ml-2'><input type='text' class='form-control' name='dampak[]' id='dampak" + i +"'></div></li>");
$("#tblMain").append("<tr>");
for(b = 1; b <=skala; b++){
if(skala == 4){
$("#tblMain").append("<td id='box"+ b +"' class='bg-secondary m-2' width='120' height='120' style='text-align:center'></td>");
}else if(skala == 5){
$("#tblMain").append("<td id='box"+ b +"' class='bg-secondary m-2' width='100' height='100' style='text-align:center'></td>");
}else{
$("#tblMain").append("<td id='box"+ b +"' class='bg-secondary m-2' width='80' height='80' style='text-align:center'></td>");
}
}
$("#tblMain").append("</tr>");
}
});
});
</script>
<script>
function tambahLevel(element) {
var level = $('#level').val();
var warna = $('#warna').val();
var skala = $('#skala').val();
var notFind = $("#levelRisiko").not($('input[name^="fieldLevel[]"]'));
if(notFind){
$("#levelRisiko").append("<li class='mb-3'><input type='text' class='form-control text-center text-white font-weight-bold ml-2' style='background-color:"+ warna +";' id='fieldLevel' name='fieldLevel[]' value='"+ level +"' readonly></li>");
}else{
var li = $('input[name^="fieldLevel[]"]').length;
console.log(li);
if(li < skala){
var last = $('input[id^="fieldLevel"]:last');
var num = (parseInt(last.prop("id").match(/\d+/g), 10 ) || 0 )+1;
//$("#levelRisiko").append("<li class='mb-2'><input type='text' class='form-control ml-2' style='background-color:"+ warna +";' name='fieldLevel[]' value='"+ level +"' readonly></li>");
var newLevel = last.appendTo('#levelRisiko').prop('id', 'fieldLevel'+num );
}else{
alert('Jumlah level risiko sudah maksimal.');
}
}
}
</script>
<script src="{{ asset('plugins/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
<script src="{{ asset('plugins/moment/moment.js') }}"></script>
<script src="{{ asset('plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') }}"></script>
<script src="{{ asset('plugins/jquery-minicolors/jquery.minicolors.min.js') }}"></script>
<script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script>
<script src="{{ asset('js/form-picker.js') }}"></script>
@endpush
@endsection
Comments