 Aaron Parecki
					
					10 years ago
						Aaron Parecki
					
					10 years ago
					
				
				 6 changed files with 334 additions and 34 deletions
			
			
		- 
					55controllers/controllers.php
- 
					51lib/helpers.php
- 
					32public/js/script.js
- 
					15views/dashboard.php
- 
					209views/new-itinerary.php
- 
					6views/partials/header.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,15 @@ | |||
| <div class="narrow"> | |||
|   <?= partial('partials/header') ?>
 | |||
| 
 | |||
|   <ul style="margin-top: 1em;"> | |||
|     <li><a href="/editor">Editor</a></li> | |||
|     <li><a href="/new">Note</a></li> | |||
|     <li><a href="/bookmark">Bookmark</a></li> | |||
|     <li><a href="/favorite">Favorite</a></li> | |||
|     <li><a href="/repost">Repost</a></li> | |||
|     <li><a href="/photo">Photo</a></li> | |||
|     <li><a href="/itinerary">Itinerary</a></li> | |||
|     <li><a href="/email">Email</a></li> | |||
|   </ul> | |||
| 
 | |||
| </div> | |||
| @ -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> | |||
| @ -1,4 +1,4 @@ | |||
| <div class="header"> | |||
|   <img src="/images/quill-logo.png" width="42" height="42"> | |||
|   Quill | |||
| </div> | |||
|   <a href="/dashboard"><img src="/images/quill-logo.png" width="42" height="42"></a> | |||
|   <a href="/dashboard">Quill</a> | |||
| </div> | |||
						Write
						Preview
					
					
					Loading…
					
					Cancel
						Save
					
		Reference in new issue