diff options
Diffstat (limited to 'views/new-itinerary.php')
| -rw-r--r-- | views/new-itinerary.php | 209 |
1 files changed, 209 insertions, 0 deletions
diff --git a/views/new-itinerary.php b/views/new-itinerary.php new file mode 100644 index 0000000..8d8811c --- /dev/null +++ b/views/new-itinerary.php @@ -0,0 +1,209 @@ +<div class="narrow"> + <?= partial('partials/header') ?> + + <div style="clear: both;"> + <div class="alert alert-success hidden" id="test_success"><strong>Success! We found a Location header in the response!</strong><br>Your post should be on your website now!<br><a href="" id="post_href">View your post</a></div> + <div class="alert alert-danger hidden" id="test_error"><strong>Your endpoint did not return a Location header.</strong><br>See <a href="/creating-a-micropub-endpoint">Creating a Micropub Endpoint</a> for more information.</div> + </div> + + <form role="form" style="margin-top: 20px;" id="note_form"> + + <h4>Legs</h4> + <div class="form-group" id="itinerary-legs-container"> + <div style="display:none;" id="leg-template"> + <div class="itinerary-leg"> + <input type="hidden" class="template" value="1"> + <div class="remove">×</div> + <div class="row"> + <div class="col-xs-3"> + <label>Transit Type</label> + <select class="leg-transit-type form-control"> + <option value="air">Air</option> + <option value="train">Train</option> + <option value="bus">Bus</option> + <option value="boat">Boat</option> + <option value="generic">Generic</option> + </select> + </div> + <div class="col-xs-3"> + <label>Operator</label> + <input type="text" class="form-control leg-operator" placeholder="Operator" value=""> + </div> + <div class="col-xs-3"> + <label>Number</label> + <input type="text" class="form-control leg-number" placeholder="Number" value=""> + </div> + </div> + <div class="row"> + <div class="col-xs-2"> + <label>Origin</label> + <input type="text" class="form-control leg-origin" placeholder="Origin" value=""> + </div> + <div class="col-xs-9"> + <label>Departure</label> + <div class="form-group leg-departure"> + <input type="text" class="form-control leg-departure-date date" style="max-width:160px; float:left; margin-right: 4px;" value=""> + <input type="text" class="form-control leg-departure-time time" style="max-width:85px; float:left; margin-right: 4px;" value=""> + <input type="text" class="form-control leg-departure-tz tz" style="max-width:75px;" value=""> + </div> + </div> + </div> + <div class="row"> + <div class="col-xs-2"> + <label>Destination</label> + <input type="text" class="form-control leg-destination" placeholder="Destination" value=""> + </div> + <div class="col-xs-9"> + <label>Arrival</label> + <div class="form-group leg-arrival"> + <input type="text" class="form-control leg-arrival-date date" style="max-width:160px; float:left; margin-right: 4px;" value=""> + <input type="text" class="form-control leg-arrival-time time" style="max-width:85px; float:left; margin-right: 4px;" value=""> + <input type="text" class="form-control leg-arrival-tz tz" style="max-width:75px;" value=""> + </div> + </div> + </div> + </div> + </div> + </div> + <button class="btn btn-default" id="btn_add_leg">Add Leg</button> + + <div class="form-group" style="margin-top: 18px;"> + <label for="note_category">Tags (comma-separated)</label> + <input type="text" id="note_category" value="" class="form-control"> + </div> + + <div style="float: right; margin-top: 6px;"> + <button class="btn btn-success" id="btn_post">Post</button> + </div> + + </form> + +</div> + + + +<style type="text/css"> +.itinerary-leg { + margin-bottom: 10px; + padding: 8px 8px; + border-left: 4px #5bc0de solid; + background-color: #f4f8fa; +} +.itinerary-leg .row { + margin-bottom: 10px; +} +.itinerary-leg .remove { + float: right; + margin-right: 10px; + margin-top: 0; + font-size: 20px; + cursor: pointer; + color: #40A9C7; +} +.itinerary-leg .remove:hover { + color: #7ECDE4; +} +</style> + +<script src="/js/script.js"></script> +<script> +$(function(){ + + $("#btn_add_leg").click(function(){ + add_leg(); + return false; + }); + + function bind_leg_x() { + $(".itinerary-leg .remove").unbind("click").click(function(){ + // Don't allow the only leg to be removed. (2 because there is an invisible one as the template) + if($(".itinerary-leg").length > 2) { + $(this).parent().remove(); + } + }); + } + + function add_leg() { + $("#itinerary-legs-container").append($("#leg-template").html()); + + $(".itinerary-leg:last .template").val(0); + var d = new Date(); + $(".itinerary-leg:last .date").val(d.getFullYear()+"-"+zero_pad(d.getMonth()+1)+"-"+zero_pad(d.getDate())); + $(".itinerary-leg:last .time").val(zero_pad(d.getHours())+":"+zero_pad(d.getMinutes())+":00"); + $(".itinerary-leg:last .tz").val(tz_seconds_to_offset(d.getTimezoneOffset() * 60 * -1)); + + /* + $('.itinerary-leg:last .date').datepicker({ + 'format': 'yyyy-mm-dd', + 'autoclose': true, + 'todayHighlight': true + }); + + $('.itinerary-leg:last .time').timepicker({ + 'showDuration': true, + 'timeFormat': 'g:ia' + }); + + $('.itinerary-leg:last').datepair(); + */ + + bind_leg_x(); + } + + add_leg(); + + $("#btn_post").click(function(){ + + var itinerary = []; + + $(".itinerary-leg").each(function(){ + if($(this).find(".template").val() == 1) { return; } + + var departure = $(this).find(".leg-departure-date").val()+"T"+$(this).find(".leg-departure-time").val()+$(this).find(".leg-departure-tz").val(); + var arrival = $(this).find(".leg-arrival-date").val()+"T"+$(this).find(".leg-arrival-time").val()+$(this).find(".leg-arrival-tz").val(); + + itinerary.push({ + "type": "h-leg", + "properties": { + "transit-type": $(this).find(".leg-transit-type").val(), + "operator": $(this).find(".leg-operator").val(), + "number": $(this).find(".leg-number").val(), + "origin": $(this).find(".leg-origin").val(), + "destination": $(this).find(".leg-destination").val(), + "departure": departure, + "arrival": arrival + } + }); + }); + + var category = $("#note_category").val().split(/[, ]+/) + + $.post("/itinerary", { + data: JSON.stringify({ + "type": "h-entry", + "properties": { + "itinerary": itinerary, + "category": category + } + }) + }, function(data){ + var response = JSON.parse(data); + + if(response.location != false) { + $("#test_success").removeClass('hidden'); + $("#test_error").addClass('hidden'); + $("#post_href").attr("href", response.location); + } else { + $("#test_success").addClass('hidden'); + $("#test_error").removeClass('hidden'); + } + + }); + return false; + }); + +}); + +<?= partial('partials/syndication-js') ?> + +</script> |