first draft of case addresses and itineraries
This commit is contained in:
@ -0,0 +1,76 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block body %}
|
||||
{{ block('nav', 'internal/libs/nav.html.twig') }}
|
||||
|
||||
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
|
||||
{{ block('topnav', 'internal/libs/top-nav.html.twig') }}
|
||||
|
||||
<section>
|
||||
|
||||
<div class="card card-plain">
|
||||
<div class="card-header">
|
||||
<h4 class="font-weight-bolder">Add Address</h4>
|
||||
<p class="mb-0"></p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="container">
|
||||
{{ form_errors(form) }}
|
||||
|
||||
{{ form_start(form) }}
|
||||
<div class="row">
|
||||
<div class='col'>
|
||||
<div class='input-group input-group-outline mb-3'>
|
||||
<label for='address_form_name' class='form-label'>Name</label>
|
||||
<input type='text' name='{{ field_name(form.name) }}' id='address_form_nameame' class='form-control' required='required'/>
|
||||
</div>
|
||||
|
||||
<div class='input-group input-group-outline mb-3'>
|
||||
{% for c in cases %}
|
||||
<div>
|
||||
<input type='checkbox' name='cases[]' id='{{ c.id }}' value='{{ c.id }}'/>
|
||||
<label for='{{ c.id }}' style='margin:5px'>{{ c.caseName }}</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class='col'>
|
||||
<div class='input-group input-group-outline mb-3'>
|
||||
<label for='address_form_address' class='form-label'>Address</label>
|
||||
<input type='text' name='{{ field_name(form.address) }}' id='address_form_address' class='form-control'/>
|
||||
</div>
|
||||
|
||||
<div class='input-group input-group-outline mb-3'>
|
||||
<label for='address_form_city' class='form-label'>City</label>
|
||||
<input type='text' name='{{ field_name(form.city) }}' id='address_form_city' class='form-control'/>
|
||||
</div>
|
||||
|
||||
<div class='input-group input-group-outline mb-3'>
|
||||
<label for='address_form_state'></label>
|
||||
<select name='{{ field_name(form.state) }}' id='address_form_state' class='form-control'>
|
||||
<option value=''>-- Select State --</option>
|
||||
|
||||
{% for s in enum('App\\Enums\\State').cases() %}
|
||||
<option value='{{ s.value }}'>{{ s.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class='input-group input-group-outline mb-3'>
|
||||
<label for='address_form_zip' class='form-label'>Zip</label>
|
||||
<input type='text' name='{{ field_name(form.zip) }}' id='address_form_zip' class='form-control'/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-lg bg-gradient-dark btn-lg w-100 mt-4 mb-0">Save Address</button>
|
||||
</div>
|
||||
</div>
|
||||
{{ form_end(form) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{% endblock %}
|
||||
@ -0,0 +1,76 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block body %}
|
||||
{{ block('nav', 'internal/libs/nav.html.twig') }}
|
||||
|
||||
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
|
||||
{{ block('topnav', 'internal/libs/top-nav.html.twig') }}
|
||||
|
||||
<section>
|
||||
|
||||
<div class="card card-plain">
|
||||
<div class="card-header">
|
||||
<h4 class="font-weight-bolder">Edit Address</h4>
|
||||
<p class="mb-0">{{ location.name }}</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="container">
|
||||
{{ form_start(form) }}
|
||||
|
||||
{{ form_errors(form) }}
|
||||
<div class="row">
|
||||
<div class='col'>
|
||||
<div class='input-group input-group-outline mb-3 is-filled'>
|
||||
<label for='address_form_name' class='form-label'>Name</label>
|
||||
<input type='text' name='{{ field_name(form.name) }}' id='address_form_nameame' value='{{ field_value(form.name) }}' class='form-control' required='required'/>
|
||||
</div>
|
||||
|
||||
<div class='input-group input-group-outline mb-3'>
|
||||
{% for c in cases %}
|
||||
<div>
|
||||
<input type='checkbox' name='cases[]' id='{{ c.id }}' value='{{ c.id }}' {% for id in inCases %} {% if c.id == id %} checked='checked' {% endif %} {% endfor %}/>
|
||||
<label for='{{ c.id }}' style='margin:5px'>{{ c.caseName }}</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class='col'>
|
||||
<div class='input-group input-group-outline mb-3 is-filled'>
|
||||
<label for='address_form_address' class='form-label'>Address</label>
|
||||
<input type='text' name='{{ field_name(form.address) }}' id='address_form_address' value='{{ field_value(form.address) }}' class='form-control'/>
|
||||
</div>
|
||||
|
||||
<div class='input-group input-group-outline mb-3 is-filled'>
|
||||
<label for='address_form_city' class='form-label'>City</label>
|
||||
<input type='text' name='{{ field_name(form.city) }}' id='address_form_city' value='{{ field_value(form.city) }}' class='form-control'/>
|
||||
</div>
|
||||
|
||||
<div class='input-group input-group-outline mb-3'>
|
||||
<label for='address_form_state'></label>
|
||||
<select name='{{ field_name(form.state) }}' id='address_form_state' class='form-control'>
|
||||
<option value=''>-- Select State --</option>
|
||||
|
||||
{% for s in enum('App\\Enums\\State').cases() %}
|
||||
<option value='{{ s.value }}' {% if s.value == location.state.value %} selected='selected' {% endif %}>{{ s.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class='input-group input-group-outline mb-3 is-filled'>
|
||||
<label for='address_form_zip' class='form-label'>Zip</label>
|
||||
<input type='text' name='{{ field_name(form.zip) }}' id='address_form_zip' value='{{ field_value(form.zip) }}' class='form-control'/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-lg bg-gradient-dark btn-lg w-100 mt-4 mb-0">Save Address</button>
|
||||
</div>
|
||||
</div>
|
||||
{{ form_end(form) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{% endblock %}
|
||||
149
templates/internal/cases/addresses/list-case-addresses.html.twig
Normal file
149
templates/internal/cases/addresses/list-case-addresses.html.twig
Normal file
@ -0,0 +1,149 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block body %}
|
||||
{{ block('nav', 'internal/libs/nav.html.twig') }}
|
||||
|
||||
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
|
||||
{{ block('topnav', 'internal/libs/top-nav.html.twig') }}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card my-4">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="d-flex justify-content-between bg-gradient-dark shadow-dark border-radius-lg pt-4 pb-3 ps-3 p-2">
|
||||
<div>
|
||||
<h6 class="text-white text-capitalize ps-3">Case Address List</h6>
|
||||
</div>
|
||||
<div>
|
||||
<form action='{{ path('app_map_itinerary') }}' method='post' id='map-form' style='display:inline;'>
|
||||
<input type='hidden' name='caseId' id='caseId'/>
|
||||
<input type='hidden' name='caseDate' id='caseDate'/>
|
||||
<button type='button' class='btn bg-gradient-info btn-block mb-3' id='map-itinerary'>Map Itinerary</button>
|
||||
</form>
|
||||
<button type='button' class='btn bg-gradient-success btn-block mb-3' id='create-itinerary'>Create Itinerary</button>
|
||||
<button type="button" class="btn btn-block btn-light mb-3" onclick="window.open('{{ path('app_case_add_address') }}', '_self')">Add Address</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body px-0 pb-2">
|
||||
<div class=''>
|
||||
Filters:
|
||||
<select id='case-filter'>
|
||||
<option value=''>-- Select --</option>
|
||||
|
||||
{% for c in cases %}
|
||||
<option value='{{ c.id }}'>{{ c.caseName }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type='date' id='date-filter'/>
|
||||
</div>
|
||||
<div class="table-responsive p-0">
|
||||
<table class="table align-items-center mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Address</th>
|
||||
<th class='text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7'>Lat/Lon</th>
|
||||
<th class="text-secondary opacity-7"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id='addressList'>
|
||||
{% for l in addresses %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class='d-flex px-2 py-1'>
|
||||
<div class='d-flex flex-column justify-content-center'>
|
||||
<h6 class='mb-0 text-small'>
|
||||
{{ l.name }}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td title=''>
|
||||
{{ l.getFormattedAddress()|raw }}
|
||||
</td>
|
||||
<td class='align-middle text-center text-xs'>
|
||||
{{ l.lat }}/{{ l.lon }}
|
||||
</td>
|
||||
<td class='align-middle'>
|
||||
<a href='{{ path('app_case_edit_address', {id: l.id}) }}' title='Edit Location'>
|
||||
<i class="material-symbols-rounded opacity-5">edit</i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='modal fade' id='exampleModalMessage' tabindex='-1' role='dialog' aria-labelledby='exampleModalMessageTitle'>
|
||||
<div class='modal-dialog modal-dialog-centered' role='document'>
|
||||
<div class='modal-content'>
|
||||
<div class="modal-header">
|
||||
<h6 class="modal-title font-weight-normal" id="exampleModalLabel">Add Itinerary</h6>
|
||||
<button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class='modal-body'>
|
||||
<form>
|
||||
<div class='input-group input-group-outline my-3'>
|
||||
<input type='date' id='date' class='form-control'/>
|
||||
</div>
|
||||
|
||||
<div class='input-group input-group-outline my-3'>
|
||||
<select name="origin" id='origin' class='form-control'>
|
||||
<option value=''>-- Origin --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class='input-group input-group-outline my-3'>
|
||||
<input type='time' name='departure' id='departure'/>
|
||||
</div>
|
||||
<div class='input-group input-group-outline my-3'>
|
||||
<select name='destination' id='destination' class='form-control'>
|
||||
<option value=''>-- Destination --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class='input-group input-group-outline my-3'>
|
||||
<input type='time' name='arrival' id='arrival'/>
|
||||
</div>
|
||||
|
||||
<div class='input-group input-group-outline my-3'>
|
||||
<input type='checkbox' name='case-mileage' id='case-mileage' value='1'/>
|
||||
<label for='case-mileage' style='padding:5px;'>Case Mileage</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class='modal-footer'>
|
||||
<button type='button' id='close-modal' class='btn bg-gradient-secondary' data-bs-dismiss='modal'>Close</button>
|
||||
<button type='button' id='add-location-to-itinerary' class='btn bg-gradient-primary'>Add Location</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script type='module'>
|
||||
import $ from "{{ asset('vendor/jquery/jquery.index.js') }}";
|
||||
import * as notify from "{{ asset('vendor/notify.js/notify.js.index.js') }}";
|
||||
|
||||
import {filterAddressesByCase} from '{{ asset("js/app/filter.js") }}';
|
||||
import {createItinerary, addLocationToItinerary, openMap} from '{{ asset("js/app/itinerary.js") }}';
|
||||
window.$ = $;
|
||||
|
||||
$(function () {
|
||||
document.getElementById('case-filter').addEventListener('change', filterAddressesByCase);
|
||||
document.getElementById('create-itinerary').addEventListener('click', createItinerary);
|
||||
document.getElementById('add-location-to-itinerary').addEventListener('click', addLocationToItinerary);
|
||||
document.getElementById('map-itinerary').addEventListener('click', openMap);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
20
templates/internal/cases/itinerary/map.html.twig
Normal file
20
templates/internal/cases/itinerary/map.html.twig
Normal file
@ -0,0 +1,20 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block body %}
|
||||
{{ block('nav', 'internal/libs/nav.html.twig') }}
|
||||
|
||||
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
|
||||
{{ block('topnav', 'internal/libs/top-nav.html.twig') }}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
<div>
|
||||
Totals:
|
||||
{{ total_distance }}
|
||||
/
|
||||
{{ total_duration }}
|
||||
</div>
|
||||
{{ ux_map(map, {style: 'height: 600px', 'data-controller': 'my-map'}) }}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user