You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

241 lines
8.1 KiB

4 years ago
  1. <div class="narrow">
  2. <?= partial('partials/header') ?>
  3. <div style="clear: both;" class="notice-pad">
  4. <div class="alert alert-success hidden" id="test_success"><strong>Success! </strong><a href="" id="post_href">View your post</a></div>
  5. <div class="alert alert-danger hidden" id="test_error"><strong>Something went wrong!</strong><br>Your Micropub endpoint indicated that something went wrong creating the post.</div>
  6. </div>
  7. <form role="form" style="margin-top: 20px;" id="note_form">
  8. <h4>Legs</h4>
  9. <div class="form-group" id="itinerary-legs-container">
  10. <div style="display:none;" id="leg-template">
  11. <div class="itinerary-leg">
  12. <input type="hidden" class="template" value="1">
  13. <div class="remove">&times;</div>
  14. <div class="row">
  15. <div class="col-xs-3">
  16. <label>Transit Type</label>
  17. <select class="leg-transit-type form-control">
  18. <option value="air">Air</option>
  19. <option value="train">Train</option>
  20. <option value="bus">Bus</option>
  21. <option value="boat">Boat</option>
  22. <option value="generic">Generic</option>
  23. </select>
  24. </div>
  25. <div class="col-xs-3">
  26. <label>Operator</label>
  27. <input type="text" class="form-control leg-operator" placeholder="Operator" value="">
  28. </div>
  29. <div class="col-xs-3">
  30. <label>Number</label>
  31. <input type="text" class="form-control leg-number" placeholder="Number" value="">
  32. </div>
  33. </div>
  34. <div class="row">
  35. <div class="col-xs-2">
  36. <label>Origin</label>
  37. <input type="text" class="form-control leg-origin" placeholder="Origin" value="">
  38. </div>
  39. <div class="col-xs-9">
  40. <label>Departure</label>
  41. <div class="form-group leg-departure">
  42. <input type="text" class="form-control leg-departure-date date" style="max-width:160px; float:left; margin-right: 4px;" value="">
  43. <input type="text" class="form-control leg-departure-time time" style="max-width:85px; float:left; margin-right: 4px;" value="">
  44. <span><input type="text" class="form-control leg-departure-tz tz" style="max-width:75px;" value=""></span>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="row">
  49. <div class="col-xs-2">
  50. <label>Destination</label>
  51. <input type="text" class="form-control leg-destination" placeholder="Destination" value="">
  52. </div>
  53. <div class="col-xs-9">
  54. <label>Arrival</label>
  55. <div class="form-group leg-arrival">
  56. <input type="text" class="form-control leg-arrival-date date" style="max-width:160px; float:left; margin-right: 4px;" value="">
  57. <input type="text" class="form-control leg-arrival-time time" style="max-width:85px; float:left; margin-right: 4px;" value="">
  58. <span><input type="text" class="form-control leg-arrival-tz tz" style="max-width:75px;" value=""></span>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <button class="btn btn-default" id="btn_add_leg">Add Leg</button>
  66. <div class="form-group" style="margin-top: 18px;">
  67. <label for="note_category">Tags</label>
  68. <input type="text" id="note_category" value="" class="form-control">
  69. </div>
  70. <div style="float: right; margin-top: 6px;">
  71. <button class="btn btn-success" id="btn_post">Post</button>
  72. </div>
  73. </form>
  74. </div>
  75. <style type="text/css">
  76. .itinerary-leg {
  77. margin-bottom: 10px;
  78. padding: 8px 8px;
  79. border-left: 4px #5bc0de solid;
  80. background-color: #f4f8fa;
  81. }
  82. .itinerary-leg .row {
  83. margin-bottom: 10px;
  84. }
  85. .itinerary-leg .remove {
  86. float: right;
  87. margin-right: 10px;
  88. margin-top: 0;
  89. font-size: 20px;
  90. cursor: pointer;
  91. color: #40A9C7;
  92. }
  93. .itinerary-leg .remove:hover {
  94. color: #7ECDE4;
  95. }
  96. </style>
  97. <script>
  98. $(function(){
  99. $("#note_category").tokenfield({
  100. createTokensOnBlur: true,
  101. beautify: true
  102. });
  103. $("#btn_add_leg").click(function(){
  104. add_leg();
  105. return false;
  106. });
  107. function bind_leg_x() {
  108. $(".itinerary-leg .remove").unbind("click").click(function(){
  109. // Don't allow the only leg to be removed. (2 because there is an invisible one as the template)
  110. if($(".itinerary-leg").length > 2) {
  111. $(this).parent().remove();
  112. }
  113. });
  114. }
  115. function timezone_for_airport(code, callback) {
  116. $.getJSON("/airport-info?code="+code, function(data){
  117. callback(data.offset);
  118. });
  119. }
  120. function bind_leg_timezone() {
  121. $(".itinerary-leg .leg-origin").unbind("change").change(function(el){
  122. timezone_for_airport($(this).val(), function(offset){
  123. $(el.target).parents(".itinerary-leg").find(".leg-departure-tz").val(offset);
  124. $(el.target).parents(".itinerary-leg").find(".leg-departure-tz").parent().addClass("has-success");
  125. });
  126. });
  127. $(".itinerary-leg .leg-destination").unbind("change").change(function(el){
  128. timezone_for_airport($(this).val(), function(offset){
  129. $(el.target).parents(".itinerary-leg").find(".leg-arrival-tz").val(offset);
  130. $(el.target).parents(".itinerary-leg").find(".leg-arrival-tz").parent().addClass("has-success");
  131. });
  132. });
  133. }
  134. function add_leg() {
  135. $("#itinerary-legs-container").append($("#leg-template").html());
  136. $(".itinerary-leg:last .template").val(0);
  137. var d = new Date();
  138. $(".itinerary-leg:last .date").val(d.getFullYear()+"-"+zero_pad(d.getMonth()+1)+"-"+zero_pad(d.getDate()));
  139. $(".itinerary-leg:last .time").val(zero_pad(d.getHours())+":"+zero_pad(d.getMinutes())+":00");
  140. $(".itinerary-leg:last .tz").val(tz_seconds_to_offset(d.getTimezoneOffset() * 60 * -1));
  141. /*
  142. $('.itinerary-leg:last .date').datepicker({
  143. 'format': 'yyyy-mm-dd',
  144. 'autoclose': true,
  145. 'todayHighlight': true
  146. });
  147. $('.itinerary-leg:last .time').timepicker({
  148. 'showDuration': true,
  149. 'timeFormat': 'g:ia'
  150. });
  151. $('.itinerary-leg:last').datepair();
  152. */
  153. bind_leg_x();
  154. bind_leg_timezone();
  155. }
  156. add_leg();
  157. $("#btn_post").click(function(){
  158. var itinerary = [];
  159. $(".itinerary-leg").each(function(){
  160. if($(this).find(".template").val() == 1) { return; }
  161. var departure = $(this).find(".leg-departure-date").val()+"T"+$(this).find(".leg-departure-time").val()+$(this).find(".leg-departure-tz").val();
  162. var arrival = $(this).find(".leg-arrival-date").val()+"T"+$(this).find(".leg-arrival-time").val()+$(this).find(".leg-arrival-tz").val();
  163. itinerary.push({
  164. "type": ["h-leg"],
  165. "properties": {
  166. "transit-type": [$(this).find(".leg-transit-type").val()],
  167. "operator": [$(this).find(".leg-operator").val()],
  168. "number": [$(this).find(".leg-number").val()],
  169. "origin": [$(this).find(".leg-origin").val()],
  170. "destination": [$(this).find(".leg-destination").val()],
  171. "departure": [departure],
  172. "arrival": [arrival]
  173. }
  174. });
  175. });
  176. var category = tokenfieldToArray("#note_category");
  177. properties = {
  178. itinerary: itinerary
  179. };
  180. if(category.length > 0) {
  181. properties['category'] = category;
  182. }
  183. $("#btn_post").addClass("loading disabled").text("Working...");
  184. $.post("/micropub/postjson", {
  185. data: JSON.stringify({
  186. "type": ["h-entry"],
  187. "properties": properties
  188. })
  189. }, function(response){
  190. if(response.location != false) {
  191. $("#test_success").removeClass('hidden');
  192. $("#test_error").addClass('hidden');
  193. $("#post_href").attr("href", response.location);
  194. $("#note_form").addClass("hidden");
  195. } else {
  196. $("#test_success").addClass('hidden');
  197. $("#test_error").removeClass('hidden');
  198. $("#btn_post").removeClass("loading disabled").text("Post");
  199. }
  200. });
  201. return false;
  202. });
  203. });
  204. <?= partial('partials/syndication-js') ?>
  205. </script>