Aaron Parecki
9 years ago
4 changed files with 306 additions and 31 deletions
-
27controllers/controllers.php
-
15lib/helpers.php
-
32public/js/script.js
-
209views/new-itinerary.php
@ -0,0 +1,32 @@ |
|||
|
|||
function tz_seconds_to_offset(seconds) { |
|||
var tz_offset = ''; |
|||
var hours = zero_pad(Math.abs(seconds / 60 / 60)); |
|||
var minutes = zero_pad(Math.floor(seconds / 60) % 60); |
|||
return (seconds < 0 ? '-' : '+') + hours + ":" + minutes; |
|||
} |
|||
function zero_pad(num) { |
|||
num = "" + num; |
|||
if(num.length == 1) { |
|||
num = "0" + num; |
|||
} |
|||
return num; |
|||
} |
|||
|
|||
|
|||
$(function(){ |
|||
|
|||
// Set the date from JS
|
|||
var d = new Date(); |
|||
$("#note_date").val(d.getFullYear()+"-"+zero_pad(d.getMonth()+1)+"-"+zero_pad(d.getDate())); |
|||
$("#note_time").val(zero_pad(d.getHours())+":"+zero_pad(d.getMinutes())+":"+zero_pad(d.getSeconds())); |
|||
$("#note_tzoffset").val(tz_seconds_to_offset(d.getTimezoneOffset() * 60 * -1)); |
|||
|
|||
// ctrl-s to save
|
|||
$(window).on('keydown', function(e){ |
|||
if(e.keyCode == 83 && e.ctrlKey){ |
|||
$("#btn_post").click(); |
|||
} |
|||
}); |
|||
|
|||
}) |
|||
@ -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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue