IMMREX7
@extends('schools.school_layout')
@section('content')
<div id="map" style="height: 600px;"></div>
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card">
<div class="header">
<h2><strong>@if(isset($route))Edit @else Add @endif</strong>Route</h2>
</div>
<div class="body">
@if(isset($route))
{!! Form::model( $route, ['route' => ['routes.update', $route->idRoute], 'method' => 'put','class'=>'form-horizontal'] ) !!}
@else
{!! Form::open(['url' => 'school/routes','class'=>'form-horizontal','files'=>true]) !!}
@endif
<div class="row clearfix">
<div class="col-sm-2 form-control-label required">
<label for="classname">Route Name</label>
</div>
<div class="col-sm-4">
<div class="form-group">
{!! Form::text('routeName',null,['class' => 'form-control','required'=>'required']) !!}
@if ($errors->has('routeName'))
<label id="minmaxlength-error" class="error" for="minmaxlength">
<strong>{{ $errors->first('routeName') }}</strong>
</label>
@endif
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-2 form-control-label required">
<label for="classname">Trip Start Time</label>
</div>
<div class="col-sm-4">
<div class="form-group">
{!! Form::text('start_time',null,['class' => 'form-control timepicker','required'=>'required']) !!}
@if ($errors->has('start_time'))
<label id="minmaxlength-error" class="error" for="minmaxlength">
<strong>{{ $errors->first('start_time') }}</strong>
</label>
@endif
</div>
</div>
<div class="col-sm-2 form-control-label required">
<label for="classname">Trip End Time</label>
</div>
<div class="col-sm-4">
<div class="form-group">
{!! Form::text('end_time',null,['class' => 'form-control timepicker','required'=>'required']) !!}
@if ($errors->has('end_time'))
<label id="minmaxlength-error" class="error" for="minmaxlength">
<strong>{{ $errors->first('end_time') }}</strong>
</label>
@endif
</div>
</div>
</div>
<p><b>On return / After School</b></p>
<div class="row clearfix">
<div class="col-sm-2 form-control-label required">
<label for="classname">Trip Start Time</label>
</div>
<div class="col-sm-4">
<div class="form-group">
{!! Form::text('return_start',null,['class' => 'form-control timepicker','required'=>'required']) !!}
@if ($errors->has('return_start'))
<label id="minmaxlength-error" class="error" for="minmaxlength">
<strong>{{ $errors->first('return_start') }}</strong>
</label>
@endif
</div>
</div>
<div class="col-sm-2 form-control-label required">
<label for="classname">Trip End Time</label>
</div>
<div class="col-sm-4">
<div class="form-group">
{!! Form::text('return_end',null,['class' => 'form-control timepicker','required'=>'required']) !!}
@if ($errors->has('return_end'))
<label id="minmaxlength-error" class="error" for="minmaxlength">
<strong>{{ $errors->first('return_end') }}</strong>
</label>
@endif
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-2 form-control-label">
<label for="classname">Stop Name</label>
</div>
<div class="col-sm-4">
<div class="form-group">
{!! Form::text('stopName',null,['class' => 'form-control','id' =>'stopName']) !!}
@if ($errors->has('stopName'))
<label id="minmaxlength-error" class="error" for="minmaxlength">
<strong>{{ $errors->first('stopName') }}</strong>
</label>
@endif
</div>
</div>
</div>
<div class="row clearfix">
<table class="table">
<thead>
<tr>
<th></th>
<th>Stop Name</th>
<th>Latitude</th>
<th>Longitude</th>
<th></th>
</tr>
</thead>
<tbody id="optional_list">
@if(isset($route))
<?php $j =1;?>
@foreach($route->stops as $var)
<tr>
<td class="sno">{{$j}}</td>
<td>
{!! Form::text('routes['.$j.'][stopName]',$var->stopName,['class' => 'form-control autocomplete','required'=>'required']) !!}
<input type="hidden" name="routes[{{$j}}][idStop]" value="{{$var->idStop}}">
</td>
<td>
{!! Form::text('routes['.$j.'][latitude]',$var->latitude,['class' => 'form-control' ,'readonly' => 'readonly']) !!}
</td>
<td>
{!! Form::text('routes['.$j.'][longitude]',$var->longitude,['class' => 'form-control','readonly' => 'readonly']) !!}
</td>
<td style="text-align:right;vertical-align: middle;"><input type="button" class="btn btn-sm btn-danger" value="Delete" data-id="{{$j}}" id="remove_row"></td>
</tr>
<?php $j++ ; ?>
@endforeach
@endif
</tbody>
</table>
</div>
<div class="row clearfix">
<div class="col-sm-8 offset-sm-2">
@if(isset($route))
{!! Form::submit('UPDATE',['class' => 'btn btn-raised btn-primary btn-round waves-effect']) !!}
@else
{!! Form::submit('SAVE',['class' => 'btn btn-raised btn-primary btn-round waves-effect']) !!}
@endif
{!! Form::close() !!}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12">
<div class="card">
<div class="header">
<h2><strong>List Of Routes</strong></h2>
</div>
<div class="body table-responsive">
<table class="table table-bordered table-striped table-hover js-basic-example dataTable">
<thead>
<tr>
<th>S.NO.</th>
<th>Route Name</th>
<th>Stops</th>
<th>Action</th>
</tr>
</thead>
<tbody id="optional_list">
<?php $i = 1; ?>
@foreach($routes as $var)
<tr>
<td>{{ $i }}</td>
<td>{{$var->routeName}}</td>
<td>
@foreach($var->stops as $value)
<span> {{$value->stopName }}</span>,<br>
@endforeach
</td>
<td>
<a href='{{url('/school/routes/'.$var->idRoute.'/edit')}}' class="btn btn-raised btn-info waves-effect btn-round"><i class="fa fa-edit"></i>Edit</a>
<button class="btn btn-raised btn-danger waves-effect btn-round js-sweetalert" data-id="{{$var->idRoute}}" data-type="confirm">DELETE</button>
</td>
</tr>
<?php $i++; ?>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
@stop
@section('script')
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "AIzaSyA-e05D-p1SyTgAKH9_8yxyjjzJrAa-AcE",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
let markers = [];
async function initMap() {
// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
const { Autocomplete } = await google.maps.importLibrary("places");
const map = new Map(document.getElementById("map"), {
center: { lat: 28.7041, lng: 77.1025 },
zoom: 14,
mapId: "4504f8b37365c3d0",
});
const input = document.getElementById("stopName");
const options = {
componentRestrictions: { country: "in" },
fields: ["formatted_address", "geometry", "name"],
strictBounds: false,
};
const autocomplete = new Autocomplete(input, options);
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry || !place.geometry.location) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
const infoWindow = new InfoWindow();
const draggableMarker = new AdvancedMarkerElement({
map,
position: { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() },
gmpDraggable: true,
title: place.name,
});
markers.push(draggableMarker);
draggableMarker.addListener("dragend", (event) => {
const position = draggableMarker.position;
console.log(position);
console.log(event);
infoWindow.close();
infoWindow.setContent(
`${place.name}`,
);
infoWindow.open(draggableMarker.map, draggableMarker);
addPlaces()
});
addPlaces();
map.setCenter({lat:place.geometry.location.lat(), lng:place.geometry.location.lng()});
document.getElementById("stopName").value = "";
});
/*
*/
@if(isset($route))
<?php $p = 1;?>
@foreach($route->stops as $var)
const infoWindow_{{$p}} = new InfoWindow();
const draggableMarker_{{$p}} = new AdvancedMarkerElement({
map,
position: { lat: {{$var->latitude}}, lng: {{$var->longitude}}},
gmpDraggable: true,
title: "{{$var->stopName}}",
});
markers.push(draggableMarker_{{$p}});
addMarker("{{$var->stopName}}",draggableMarker_{{$p}},infoWindow_{{$p}})
infoWindow_{{$p}}.setContent(
`{{$var->stopName}}`,
);
infoWindow_{{$p}}.open(draggableMarker_{{$p}}.map, draggableMarker_{{$p}});
<?php $p++;?>
@endforeach
addPlaces();
const position = markers[markers.length -1].position;
map.setCenter({lat: position.lat, lng: position.lng});
@endif
}
function addMarker(place,draggableMarker,infoWindow){
draggableMarker.addListener("dragend", (event) => {
const position = draggableMarker.position;
console.log(position);
console.log(event);
infoWindow.close();
infoWindow.setContent(
`${place}`,
);
infoWindow.open(draggableMarker.map, draggableMarker);
addPlaces()
});
}
initMap();
function addPlaces(){
$("#optional_list").empty();
var i = 1;
for (k = 0; k < markers.length; ++k) {
if(markers[k].map == null) continue;
const position = markers[k].position;
console.log(position);
var markup = '<tr><td class="sno">'+i+'</td>\
<td><input class="form-control" type="text" id="place_'+i+'" name="routes['+i+'][stopName]" required="required" value="'+markers[k].title+'"></td>\n\
\n\ <td><input class="form-control" type="text" id="lng_'+i+'" name="routes['+i+'][latitude]" value="'+position.lat+'" readonly></td>\n\
\n\ <td><input class="form-control" type="text" id="lat_'+i+'" name="routes['+i+'][longitude]" value="'+position.lng+'" required="required" readonly></td>\n\
<td style="text-align:right;vertical-align: middle;"><input type="button" class="btn btn-sm btn-danger" value="Delete" data-id="'+i+'" id="remove_row"></td></tr>';
i++;
$("#optional_list").append(markup);
}
//remove marker
$('#optional_list').on('click', 'input[type="button"]', function () {
for (var i = markers.length - 1; i >= 0; --i) {
if($('#place_'+$(this).data('id')).val() != undefined){
if (markers[i].title == $('#place_'+$(this).data('id')).val()) {
markers[i].map = null;
break;
}
}
}
$(this).closest('tr').remove();
});
}
$(document).on('click', '.js-sweetalert', function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
e.preventDefault();
var id = $(this).data('id');
swal({
title: "Are you sure?",
text: "Are You sure you want to delete this Route with all stops!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: true
},
function() {
// console.log('here');
$.ajax({
type: "DELETE",
url: "{{url('/school/routes/')}}" +"/"+id,
data: {id:id}
})
.done(function(data) {
swal({
title: "Deleted",
text: "Route has been successfully deleted",
type: "success"
},function() {
window.location.href = "{{url('/school/routes')}}";
});
})
.error(function(data) {
swal("Oops", "We couldn't connect to the server!", "error");
});
return false;
});
});
$(function(){
$('.timepicker').bootstrapMaterialDatePicker({
format: 'HH:mm',
clearButton: true,
date: false
});
});
</script>
@stop
Copyright © 2021 -