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.

255 lines
9.1 KiB

6 years ago
6 years ago
  1. <div class="narrow">
  2. <?= partial('partials/header') ?>
  3. <div style="clear: both;">
  4. <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>
  5. <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>
  6. </div>
  7. <form role="form" style="margin-top: 20px;" id="note_form">
  8. <div class="form-group" style="margin-top: 18px;">
  9. <label>Event Name</label>
  10. <input type="text" class="form-control" id="event_name" placeholder="" value="">
  11. </div>
  12. <div class="form-group" style="margin-top: 18px;">
  13. <label>Location</label>
  14. <input type="text" class="form-control" id="event_location" placeholder="" value="">
  15. <span class="help-block" id="location_preview"></span>
  16. </div>
  17. <div id="map" class="hidden" style="width: 100%; height: 180px; border-radius: 4px; border: 1px #ccc solid;"></div>
  18. <div class="form-group" id="start_date" style="margin-top: 18px;">
  19. <label>Start Date/Time</label>
  20. <div class="form-group">
  21. <input type="text" class="form-control date" placeholder="<?= date('Y-m-d') ?>" value="" style="max-width: 40%; margin-right: 4px; float: left;">
  22. <input type="text" class="form-control time" placeholder="14:30" value="" style="max-width: 40%; margin-right: 4px; float: left;">
  23. <input type="text" class="form-control timezone" placeholder="-08:00" style="max-width: 15%;">
  24. </div>
  25. </div>
  26. <div class="form-group" id="end_date" style="margin-top: 18px;">
  27. <label>End Date/Time (Optional)</label>
  28. <div class="form-group">
  29. <input type="text" class="form-control date" placeholder="<?= date('Y-m-d') ?>" value="" style="max-width: 40%; margin-right: 4px; float: left;">
  30. <input type="text" class="form-control time" placeholder="14:30" value="" style="max-width: 40%; margin-right: 4px; float: left;">
  31. <input type="text" class="form-control timezone" placeholder="-08:00" style="max-width: 15%;">
  32. </div>
  33. </div>
  34. <div class="form-group" style="margin-top: 18px;">
  35. <label for="note_category">Tags</label>
  36. <input type="text" id="note_category" value="" class="form-control">
  37. </div>
  38. <div style="float: right; margin-top: 6px;">
  39. <button class="btn btn-success" id="btn_post">Post</button>
  40. </div>
  41. </form>
  42. </div>
  43. <link rel="stylesheet" href="/libs/bootstrap-typeahead/typeahead.css">
  44. <script src="/libs/bootstrap-typeahead/typeahead.min.js"></script>
  45. <?php if(Config::$googleMapsAPIKey): ?>
  46. <script src="https://maps.googleapis.com/maps/api/js?key=<?= Config::$googleMapsAPIKey ?>&libraries=places"></script>
  47. <?php endif ?>
  48. <script>
  49. <?php if(Config::$googleMapsAPIKey): ?>
  50. var map = new google.maps.Map(document.getElementById('map'), {
  51. center: new google.maps.LatLng(-45,122),
  52. zoom: 15
  53. });
  54. <?php else: ?>
  55. var map = null;
  56. <?php endif ?>
  57. var d = new Date();
  58. var tzOffset = tz_seconds_to_offset(d.getTimezoneOffset() * 60 * -1);
  59. var selectedPlace;
  60. if(map) {
  61. var gservice = new google.maps.places.AutocompleteService();
  62. var gplaces = new google.maps.places.PlacesService(map);
  63. var selectedPlacePin;
  64. }
  65. $(function(){
  66. // Start the event timezone offset in the browser's timezone
  67. $("#start_date .timezone").attr("placeholder", tzOffset);
  68. $("#end_date .timezone").attr("placeholder", tzOffset);
  69. // As soon as a time is entered, move the placeholder offset to the value
  70. $("#start_date .time").on("keydown", function(){
  71. $("#start_date .timezone").val($("#start_date .timezone").attr("placeholder"));
  72. });
  73. $("#end_date .time").on("keydown", function(){
  74. $("#end_date .timezone").val($("#end_date .timezone").attr("placeholder"));
  75. });
  76. if(map) {
  77. $("#event_location").typeahead({
  78. minLength: 3,
  79. highlight: true
  80. }, {
  81. limit: 5,
  82. async: true,
  83. source: function(query, sync, async) {
  84. gservice.getPlacePredictions({ input: query }, function(predictions, status) {
  85. if (status == google.maps.places.PlacesServiceStatus.OK) {
  86. async(predictions);
  87. }
  88. });
  89. },
  90. display: function(item) {
  91. return item.description;
  92. },
  93. templates: {
  94. suggestion: function(item) {
  95. return '<span>'+item.description+'</span>';
  96. }
  97. }
  98. }).bind('typeahead:select', function(ev, suggestion) {
  99. gplaces.getDetails({
  100. placeId: suggestion.place_id,
  101. fields: ["geometry", "name", "address_component", "url", "utc_offset"]
  102. }, function(result, status) {
  103. if(status != google.maps.places.PlacesServiceStatus.OK) {
  104. alert('Cannot find address');
  105. return;
  106. }
  107. console.log(result);
  108. map.setCenter(result.geometry.location);
  109. if(selectedPlacePin) {
  110. selectedPlacePin.setMap(null);
  111. selectedPlacePin = null;
  112. }
  113. selectedPlacePin = new google.maps.Marker({
  114. position: result.geometry.location,
  115. map: map
  116. });
  117. selectedPlace = {
  118. type: ["h-card"],
  119. properties: {
  120. name: [result.name],
  121. latitude: [result.geometry.location.lat()],
  122. longitude: [result.geometry.location.lng()],
  123. }
  124. };
  125. address = '';
  126. locality = '';
  127. region = '';
  128. country = '';
  129. for(var i in result.address_components) {
  130. if(result.address_components[i].types.includes('street_number')) {
  131. address += ' '+result.address_components[i].short_name;
  132. }
  133. if(result.address_components[i].types.includes('route')) {
  134. address += ' '+result.address_components[i].short_name;
  135. }
  136. if(result.address_components[i].types.includes('locality')) {
  137. locality = result.address_components[i].long_name;
  138. }
  139. if(result.address_components[i].types.includes('administrative_area_level_1')) {
  140. region = result.address_components[i].long_name;
  141. }
  142. if(result.address_components[i].types.includes('country')) {
  143. country = result.address_components[i].short_name;
  144. }
  145. }
  146. if(address) {
  147. selectedPlace['properties']['street-address'] = [address.trim()];
  148. }
  149. if(locality) {
  150. selectedPlace['properties']['locality'] = [locality];
  151. }
  152. if(region) {
  153. selectedPlace['properties']['region'] = [region];
  154. }
  155. if(country) {
  156. selectedPlace['properties']['country-name'] = [country];
  157. }
  158. if(result.utc_offset) {
  159. tzOffset = tz_seconds_to_offset(result.utc_offset * 60);
  160. $("#start_date .timezone").attr("placeholder", tzOffset);
  161. $("#end_date .timezone").attr("placeholder", tzOffset);
  162. if($("#start_date .timezone").val()) {
  163. $("#start_date .timezone").val($("#start_date .timezone").attr("placeholder"));
  164. }
  165. if($("#end_date .timezone").val()) {
  166. $("#end_date .timezone").val($("#end_date .timezone").attr("placeholder"));
  167. }
  168. }
  169. $("#map").removeClass("hidden");
  170. $("#location_preview").text('');
  171. });
  172. });
  173. }
  174. });
  175. $("#note_category").tokenfield({
  176. createTokensOnBlur: true,
  177. beautify: true
  178. });
  179. $("#btn_post").click(function(){
  180. var event_start = $("#start_date .date").val();
  181. if($("#start_date .time").val()) {
  182. event_start += "T"+$("#start_date .time").val()+$("#start_date .timezone").val();
  183. }
  184. var event_end;
  185. if($("#end_date .date").val()) {
  186. event_end = $("#end_date .date").val();
  187. if($("#end_date .time").val()) {
  188. event_end += "T"+$("#end_date .time").val()+$("#end_date .timezone").val();
  189. }
  190. }
  191. var properties = {
  192. name: [$("#event_name").val()],
  193. start: [event_start],
  194. location: (selectedPlace ? selectedPlace : $("#event_location").val()),
  195. category: tokenfieldToArray("#note_category")
  196. };
  197. if(event_end) {
  198. properties.end = event_end;
  199. }
  200. $.post("/micropub/postjson", {
  201. data: JSON.stringify({
  202. "type": ["h-event"],
  203. "properties": properties
  204. })
  205. }, function(response){
  206. if(response.location != false) {
  207. $("#test_success").removeClass('hidden');
  208. $("#test_error").addClass('hidden');
  209. $("#post_href").attr("href", response.location);
  210. $("#note_form").slideUp(200, function(){
  211. $(window).scrollTop($("#test_success").position().top);
  212. });
  213. } else {
  214. $("#test_success").addClass('hidden');
  215. $("#test_error").removeClass('hidden');
  216. }
  217. });
  218. return false;
  219. });
  220. </script>