Files
backend/resources/views/rmto-preview/pages/road-maintenance-map.blade.php
2024-02-01 09:53:53 +00:00

581 lines
17 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>پروژه نگهداری راه ها </title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
<!-- IRANSans Font -->
<link rel="stylesheet" href="../dist/css/fontiran.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Leaflet -->
<link rel="stylesheet" href="../dist/css/leaflet.css">
<link rel="stylesheet" href="../dist/css/MarkerCluster.css">
<link rel="stylesheet" href="../dist/css/MarkerCluster.Default.css">
<!-- ChartJS -->
<link rel="stylesheet" href="../plugins/chart.js/Chart.min.css">
<link rel="stylesheet" href="../plugins/bootstrap-slider/css/bootstrap-slider.min.css" />
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/adminlte.css">
<link rel="stylesheet" href="../dist/css/footer.css" />
<style>
.pin-marker {
position: relative;
width: 45px;
height: 71px;
font-family: "IRANSans";
}
.pin-marker.pin-move>.map-pin-marker {
transform: scale(0.75);
}
.pin-marker.pin-set>.map-pin-marker>.pin-title-circle {
background-color: #009900;
}
.pin-marker.pin-move>.pin-main-shadow {
transform: scale(1.35);
}
.map-pin-marker {
position: relative;
width: 45px;
height: 65px;
z-index: 10;
transform-origin: 22.5px 0;
transition: transform 0.2s;
}
.map-pin-marker>.pin-main-circle {
position: absolute;
width: 45px;
height: 45px;
left: 0;
background-color: rgba(22, 67, 88, 1);
border-radius: 50%;
z-index: 12;
}
.map-pin-marker>.pin-white-circle {
position: absolute;
width: 39px;
height: 39px;
left: 3px;
top: 3px;
background-color: #ffffff;
border-radius: 50%;
z-index: 13;
}
.map-pin-marker>.pin-title-circle {
position: absolute;
width: 35px;
height: 35px;
left: 5px;
top: 5px;
background-color: rgba(22, 67, 88, 1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 14;
transition: background-color 0.3s;
}
.map-pin-marker>.pin-title-circle>.title-circle-text {
line-height: 1;
font-size: 10px;
color: #ffffff;
font-weight: 600;
z-index: 15;
}
.map-pin-marker>.pin-main-line {
position: absolute;
width: 5px;
height: 25px;
z-index: 11;
background-color: #000000;
top: 40px;
left: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.pin-marker>.pin-main-shadow {
position: absolute;
width: 11px;
height: 11px;
left: 17px;
top: 58px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
transition: transform 0.2s;
}
.pin-marker>.pin-main-shadow>.shadow-dot {
position: relative;
width: 1px;
height: 1px;
left: 0;
top: 0;
background-color: #000000;
border-radius: 50%;
z-index: 10;
}
.map-latlng-input-row {
position: absolute;
bottom: -11px;
z-index: 1000;
width: 240px;
left: 5px;
}
.map-latlng-form {
margin-bottom: 0;
}
.map-latlng-input {
background-color: rgba(255, 255, 255, 0.8);
}
.map-latlng-label {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 0.25rem;
padding: 3px 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border: 1px solid #ced4da;
color: #000000;
border-bottom: 0;
margin: 0;
}
.map-latlng-first-input {
border-radius: 0;
font-size: 12px;
color: #009900;
}
.map-latlng-first-input::placeholder {
font-size: 10px;
}
.map-latlng-sec-input {
border-top-right-radius: 0;
border-top-left-radius: 0;
font-size: 12px;
color: #009900;
}
.map-latlng-sec-input::placeholder {
font-size: 10px;
}
.leaflet-div-icon {
background: transparent !important;
border: none !important;
}
.tablepopup {
font-size: 9px;
}
label:not(.form-check-label):not(.custom-file-label) {
font-weight: 400;
font-size: 11px;
}
.modalformtonazh {
font-size: 12px;
margin-top: 6px;
}
.modalformkilo {
font-size: 12px;
}
.headerproject {
font-size: 12px;
}
.file-input-modal {
background-color: #ffffff;
border: 1px solid #ced4da;
border-radius: 0.25rem;
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}
.file-input-modal-container {
width: 100%;
}
.file-input-modal {
justify-content: center;
font-size: 11px;
display: flex;
align-items: center;
width: 100%;
height: 94px;
cursor: pointer;
text-align: center;
border: 1px solid #ced4da;
border-radius: 0.25rem;
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}
.file-input {
display: none;
}
.zoomimage {
height: 100%;
width: 100%;
transition: transform .2s;
}
.slider-selection,
.slider-handle,
.slider-tick.in-selection {
background: #007bff !important;
}
.slideroverlay {
display: none;
text-align: right;
direction: rtl;
position: fixed;
z-index: 1051;
padding-top: 77px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.slideroverlay>.upload-confirm {
z-index: 50;
display: block;
position: absolute;
background: transparent;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.slideroverlay>.modal-content {
background-color: #ffffff;
border-radius: 7px;
margin: auto;
padding: 20px 1.5% 1px 1.5%;
border: 1px solid #888;
width: max-content;
position: relative;
z-index: 51;
}
.slideroverlay>.modal-content>.close {
position: absolute;
text-align: center;
top: 3px;
right: 5px;
color: #979797;
}
.slideroverlay>.modal-content>.close::before {
content: "\00d7";
font-size: 22px;
position: absolute;
}
.slideroverlay>.modal-content>.close:hover,
.slideroverlay>.modal-content>.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.slideroverlay>.modal-content>.slideshow .mySlides {
display: none;
}
.slideroverlay>.modal-content>.slideshow img {
/* vertical-align: middle;
width: 100%;
height: auto;
opacity: 1;
max-height: 500px;
max-width: 100%; */
vertical-align: middle;
width: auto;
height: auto;
opacity: 1;
max-height: 500px;
max-width: 100%;
margin: 0 auto;
display: flex;
}
.slideroverlay>.modal-content>.slideshow .slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.slideroverlay>.modal-content>.slideshow .prev,
.slideroverlay>.modal-content>.slideshow .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: rgba(0, 0, 0, 0.4);
}
.slideroverlay>.modal-content>.slideshow .next {
right: 0;
border-radius: 0px 3px 3px 0;
}
.slideroverlay>.modal-content>.slideshow .prev {
left: 0;
border-radius: 3px 0 0 3px;
}
.slideroverlay>.modal-content>.slideshow .prev:hover,
.slideroverlay>.modal-content>.slideshow .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.slideroverlay>.modal-content>.slideshow .text {
color: #f2f2f2;
background-color: rgba(0, 0, 0, 0.8);
padding: 10px 15px;
position: absolute;
bottom: -3px;
width: 100%;
text-align: center;
font-family: "IRANSans";
font-size: 12px;
}
.slideroverlay>.modal-content>.slideshow .numbertext {
color: #f2f2f2;
font-size: 14px;
padding: 8px 12px;
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
border-radius: 3px;
}
.slideroverlay>.modal-content>.slideshow #slideshow-dot {
margin-top: 15px !important;
margin-bottom: 10px;
direction: ltr;
}
.slideroverlay>.modal-content>.slideshow .dot {
cursor: pointer;
height: 12px;
width: 12px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.slideroverlay>.modal-content>.slideshow .active,
.slideroverlay>.modal-content>.slideshow .dot:hover {
background-color: #717171;
}
.slideroverlay>.modal-content>.slideshow .fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
.showpicbutt {
color: white;
background-color: #0051cd;
/* background-color: #286893 !important;
border: #286893 !important; */
}
.footer-new-style {
background-color: #fff;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 11;
left: 0px;
font-family: "IRANSansFaNum";
font-size: 10px;
font-weight: 700;
}
.king-size-nav {
/* background-color: #2c343f !important;
padding: 5px 10px 0px 10px !important; */
position: fixed !important;
z-index: 11 !important;
width: 100% !important;
}
.dropdown {
float: right;
overflow: visible !important;
direction: rtl;
}
</style>
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed sidebar-collapse starter-project-page">
<div class="wrapper">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="starter-content">
<!-- TOP MENU -->
@include('layouts.header')
<!-- END TOP MENU -->
<!-- <div class="list-project-items"></div> -->
<!-- MAP -->
<!-- <div class="pin-container">
<img id="org-pin" src="../dist/images/origin.png" width="55" height="75">
</div>
<div class="pin-container">
<img id="dest-pin" src="../dist/images/destination.png" width="55" height="75"
style="display: none;">
</div> -->
<div class="map-box">
<div id="map" class="map"></div>
<!-- this will show our spinner -->
<div hidden id="layer-spinner" class="spinner"></div>
</div>
<!-- END MAP -->
<div id="slideroverlay" class="slideroverlay">
<div class="camera-overlay"></div>
<!-- Modal content -->
<div class="modal-content">
<span class="close"></span>
<div class="slideshow">
<div id="slideshow-slide" class="slideshow-container">
<a class="prev">&#10095;</a>
<a class="next">&#10094;</a>
</div>
<br />
<div id="slideshow-dot" style="text-align: center;"></div>
</div>
</div>
</div>
<div class="modal fade" id="updatemodal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title"> بروزرسانی </h4>
<button type="button" class="close" data-dismiss="modal">
&times;
</button>
</div>
<!-- Modal body -->
<div class="modal-body" style="overflow: hidden;">
<form id="form-update" style="width: 100%;">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-prev" id="reverse"
style="font-size: 12px;">
انصراف</button>
<!-- <button type="button" class="btn btn-primary btn-next">ثبت</button> -->
<button type="button" class="btn btn-danger btn-applyChangeCancel"
style="display: none">انصراف</button>
<button type="button" class="btn btn-primary btn-applyChange" id="submitlatlng"
style="font-size: 12px;">ثبت
</button>
</div>
</div>
</div>
</div>
<!--END VERTICAL MENU -->
<div class="footer_licences" style="display: none;">
<span class="witelContent"> تمامی حقوق این وبسایت متعلق به مرکز داده کاوی حمل و نقل و مدیریت
زیرساخت های
سازمان راهداری و حمل و نقل جاده ای می باشد | </span>
<span class="witelContentYear">1398</span>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
</div>
@include('layouts.footer')
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Leaflet -->
<script src="../dist/js/leaflet.js"></script>
<script src="../dist/js/leaflet.markercluster.js"></script>
<script src="../dist/js/leaflet-routing-machine.js"></script>
<script src="../dist/js/leaflet-routing-machine.js"></script>
<script src="../plugins/moment/moment.min.js"></script>
<script src="../dist/js/jalali-moment.browser.js"></script>
<script src="../dist/js/static.js"></script>
<!-- ChartJS -->
<script src="../plugins/chart.js/Chart.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
<script src="../plugins/sweetalert2/sweetalert2.all.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>
<!-- PAGE SCRIPTS -->
<script src="../dist/js/road-maintenance-map.js?v=0.46"></script>
</body>
</html>