{"id":13857,"date":"2024-09-25T11:55:19","date_gmt":"2024-09-25T08:55:19","guid":{"rendered":"https:\/\/studios.aalto.fi\/?page_id=13857"},"modified":"2024-09-25T17:38:11","modified_gmt":"2024-09-25T14:38:11","slug":"course-space-bookings-demo","status":"publish","type":"page","link":"https:\/\/studios.aalto.fi\/sv\/course-space-bookings-demo\/","title":{"rendered":"Course space bookings demo"},"content":{"rendered":"\n<style>\n\n#courseFilter\n{\n  font-size: 1.1rem;\n  padding: 0.5rem 0.5rem;\n  margin-bottom: 0.5rem;\n  border: 0.5px solid rgb(128,128,128);\n  border-radius: 8px;\n}\n\n#courseFilterResults\n{\n  margin: 0;\n  padding: 1rem;\n  border: 0.5px solid rgb(128,128,128);\n  border-radius: 8px;\n  max-height: 320px;\n  overflow: scroll;\n  opacity:0\n}\n\n#courseFilterResults.shown\n{\n  opacity: 1;\n}\n\n#courseFilterResults li\n{\n  border-bottom: 0.5px solid rgb(128,128,128);\n  font-size: 1rem;\n  padding: 0.2rem 0.5rem;\n  margin: 0;\n  margin-top: 0.2rem !important;\n  cursor: pointer;\n  list-style-type: none;\n}\n\n#courseFilterResults li:first-child\n{\n  padding-top: 0;\n  margin-top: 0 !important;\n\n}\n\n#courseFilterResults li:last-child\n{\n  border-bottom: 0.5px solid transparent;\n}\n\n.calendar-container\n{\n  min-height: 750.5px;\n  max-height: 760px;\n}\n\n<\/style>\n\n\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function()\n{\n\twindow.courseNames = []\n\n\t\/\/ Get a list of course names\n\tfetchCourseNames()\n\n\t\/\/ Init a search handler\n\tconst debouncedSearch = debounce( searchCourses, 300 )\n\tdocument.getElementById( 'courseFilter' ).addEventListener( 'input', debouncedSearch )\n\n\t\/\/ Get a list of course names and store simply in window\n\tfunction fetchCourseNames()\n\t{\n\t\tfetch( 'https:\/\/studios.aalto.fi\/calendar-data-demo\/calendar-data-demo-json.json' )\n\t\t\t.then(response =>\n\t\t\t\t{\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\tthrow new Error( 'Network response was not ok' )\n\t\t\t\t}\n\t\t\t\treturn response.json()\n\t\t\t})\n\t\t\t.then( data =>\n\t\t\t{\n\t\t\t\twindow.courseNames = data\n\t\t\t} )\n\t\t\t.catch( error =>\n\t\t\t{\n\t\t\t\tconsole.error( 'There was a problem with the fetch operation:', error )\n\t\t\t} )\n\t}\n\n\t\/\/ Function to handle input and search\n\tfunction searchCourses ()\n\t{\n\t\tconst input = document.getElementById( 'courseFilter' ).value\n\t\tconst resultContainer = document.getElementById( 'courseFilterResults' )\n\n\t\t\/\/ Clear results if input is cleared\n\t\tif ( input.length === 0 )\n\t\t{\n\t\t\tresultContainer.innerHTML = ''\n\t\t\tresultContainer.classList.remove( 'shown' );\n\t\t\treturn\n\t\t}\n\n\t\t\/\/ Only search if input length is 3 or more\n\t\tif ( input.length < 3 )\n\t\t{\n\t\t\tresultContainer.classList.remove( 'shown' );\n\t\t\treturn\n\t\t}\n\n\t\tresultContainer.classList.add( 'shown' );\n\n\t\t\/\/ Filter courses that match the input\n\t\tconst filteredCourses = window.courseNames.filter( course =>\n\t\t\tcourse.name.toLowerCase().includes( input.toLowerCase() )\n\t\t)\n\n\t\t\/\/ Clear previous results\n\t\tresultContainer.innerHTML = ''\n\n\t\t\/\/ Display filtered results as list items\n\t\tfilteredCourses.forEach( course =>\n\t\t{\n\t\t\tconst listItem = document.createElement( 'li' )\n\n\t\t\tlistItem.textContent = course.name\n\n\t\t\tlistItem.addEventListener( 'click', () =>\n\t\t\t{\n\t\t\t\tlet feedRequest = 'https:\/\/takeout.new.webstudio.aalto.fi\/getcoursecalendar.php?course=' + course.name\n\n\t\t\t\tdocument.getElementById( 'courseFilter' ).value=''\n\t\t\t\tresultContainer.innerHTML = ''\n\t\t\t\tresultContainer.classList.remove( 'shown' )\n\n\t\t\t\tdocument.querySelector( '.calendar-container' ).innerHTML = 'Loading calendar\u2026'\n\n\t\t\t\tupdateCalendar( feedRequest )\n\t\t\t})\n\n\t\t\tresultContainer.appendChild( listItem )\n\t\t})\n\t}\n\n\tfunction debounce ( func, delay )\n\t{\n\t\tlet timer\n\t\treturn function ( ...args )\n\t\t{\n\t\t\tclearTimeout( timer )\n\t\t\ttimer = setTimeout( () => func.apply( this, args ), delay )\n\t\t}\n\t}\n\n\tfunction updateCalendar( feed )\n\t{\n\t\tvar xhr = new XMLHttpRequest()\n\n\t\tvar ajaxUrl = '\/wp-admin\/admin-ajax.php';\n\n\t\txhr.open('POST', ajaxUrl, true);\n\n\t\txhr.setRequestHeader('Content-Type', 'application\/x-www-form-urlencoded')\n\n\t\txhr.onreadystatechange = function()\n\t\t{\n\t\t\tif ( xhr.readyState === 4 && xhr.status === 200 )\n\t\t\t{\n\t\t\t\tvar response = xhr.responseText\n\n\t\t\t\tdocument.querySelector( '.calendar-container' ).innerHTML = response\n\n\t\t\t\tif ( typeof r34ics_ajax_init === 'function' )\n\t\t\t\t{\n\t\t\t\t\tr34ics_ajax_init(); \/\/ This function reinitializes the calendar\n\t\t\t\t}\n\n\t\t\t}\n\t\t};\n\n\t\txhr.send( 'action=update_calendar_feed&feed_url=' + encodeURIComponent( feed ) )\n\t}\n\n} )\n<\/script>\n\n\n\n<div class=\"wp-block-columns as-default-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column as-default-columns-main-content is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>This page demonstrates an iCalendar feed from Takeout, which combines booking events from both Takeout and ASIO into one feed, based on one course.<\/p>\n\n\n\n<p>Search for a course using its name or number:<\/p>\n\n\n\n<div><input id=\"courseFilter\" placeholder=\"Type here\u2026\"><\/div>\n<ul id=\"courseFilterResults\"><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column as-default-columns-sidebar is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:33.33%\">\n<div class=\"wp-block-group aalto-studios-card-empty has-small-font-size has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h5 class=\"wp-block-heading\">More info<\/h5>\n\n\n\n<p>Contact us at <a href=\"mailto:webstudio@aalto.fi\">webstudio@aalto.fi <\/a>for more.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:11px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group calendar-container is-layout-flow wp-block-group-is-layout-flow\"><div class=\"r34ics-ajax-container loading\" id=\"r69dd061d2aa6ca0\" data-view=\"month\" data-view-is-list-style=\"0\" data-view-is-list-long=\"0\" data-args=\"cb212801925ea97ea4e57a37c46b01192e26ed7b\" data-js-args=\"{&quot;debug&quot;:null}\">&nbsp;<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This page demonstrates an iCalendar feed from Takeout, which combines booking events from both Takeout and ASIO into one feed, based on one course.<\/p>\n","protected":false},"author":1,"featured_media":8774,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-page-with-no-featured-image","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"facilitycategories":[],"productcategories":[],"class_list":["post-13857","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"mb":[],"mfb_rest_fields":["title"],"_links":{"self":[{"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/pages\/13857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/comments?post=13857"}],"version-history":[{"count":58,"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/pages\/13857\/revisions"}],"predecessor-version":[{"id":13945,"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/pages\/13857\/revisions\/13945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/media\/8774"}],"wp:attachment":[{"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/media?parent=13857"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/tags?post=13857"},{"taxonomy":"facilitycategories","embeddable":true,"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/facilitycategories?post=13857"},{"taxonomy":"productcategories","embeddable":true,"href":"https:\/\/studios.aalto.fi\/sv\/wp-json\/wp\/v2\/productcategories?post=13857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}