Skip to content

Instantly share code, notes, and snippets.

@seanmtracey

seanmtracey/node-red-pwa-example.json

Created September 30, 2019 18:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save seanmtracey/29221ef224f97f6ae1ed84f547f6122e to your computer and use it in GitHub Desktop.
Save seanmtracey/29221ef224f97f6ae1ed84f547f6122e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
node-red-pwa-example.json
[{"id":"657d785c.a755d8","type":"http in","z":"d7f421c3.87cf2","name":"","url":"/cinelist","method":"get","upload":false,"swaggerDoc":"","x":250,"y":240,"wires":[["683f655.3cdba9c"]]},{"id":"c8db0462.894fd8","type":"http response","z":"d7f421c3.87cf2","name":"","statusCode":"","headers":{},"x":860,"y":180,"wires":[]},{"id":"66fc158.8d674ec","type":"template","z":"d7f421c3.87cf2","name":"HTML / CSS","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\">\n\t<title>CineList</title>\n\t<link rel=\"shortcut icon\" href=\"https://cinelist-public-dev.herokuapp.com/favicon.png\">\n\t<style>\n\n @charset \"UTF-8\";\n /* CSS Document */\n\n *{\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n box-sizing: border-box;\n }\n\n .inactive, [data-is-loading=false], [data-visible=false]{\n display: none !important;\n }\n\n .working{\n position: fixed;\n top: 0;\n left: 0;\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n width: 100%;\n -webkit-flex-direction: column;\n flex-direction: column;\n text-align: center;\n height: 100%;\n z-index: 999;\n background: rgba(255,255,255,.9);\n }\n\n .working img{\n width: 50px;\n height: 50px;\n }\n\n .working .status{\n margin-top: 1em;\n font-weight: 600;\n }\n\n h1,h2,h3,h4,h5,h6{\n font-family: \"proxima-nova\", 'Proxima Nova', sans-serif;\n margin: 0;\n padding: 0;\n line-height: 1.5em;\n }\n\n html{\n height:100%;\n width:100%;\n background-color:white;\n background-position:center 0px;\n background-size:100%;\n font-size: 14px;\n }\n\n body{\n font-family: \"proxima-nova\", 'Proxima Nova', Arial, Helvetica, sans-serif;\n /*font-family: sans-serif;*/\n font-size: 15px;\n margin:0px;\n background-attachment: scroll;\n background-repeat: repeat-y;\n width:100%;\n height:100%;\n box-sizing:border-box;\n }\n\n #home{\n width: 100%;\n height: 100%;\n }\n\n #home #container{\n position: fixed;\n top: 15vh;\n padding: 1em;\n width: 100%;\n text-align: center;\n }\n\n #home #container img{\n width: 130px;\n margin-bottom: 0.5em;\n }\n\n #home #container h1{\n font-weight: 400;\n font-size: 15px;\n padding-left: 4px;\n }\n\n #search{\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: space-between;\n justify-content: space-between;\n width: 100%;\n position: fixed;\n top: 0;\n transform: translateY(0);\n z-index: 1000;\n background: white;\n border-bottom: 1px solid white;\n transition: transform 0.2s ease-in;\n background: black;\n }\n\n #search[data-firstload=\"true\"]{\n transform: translateY(45vh);\n }\n\n form{\n padding: 1em;\n }\n\n form#search input[type=\"text\"]{\n font-weight: 400;\n font-size: 1em;\n padding: 0.5em 0.3em;\n border: 2px solid black;\n border-width: 0 0 1px 0;\n outline: none;\n width: 100%;\n background: black;\n color: white;\n }\n\n form#search input[type=\"text\"]:focus{\n background-image: url('https://cinelist-public-dev.herokuapp.com/assets/images/search.png');\n background-size: auto 20px;\n background-position: 100% 50%;\n background-repeat: no-repeat;\n }\n\n form#search input[type=\"submit\"]{\n position: absolute;\n right: 0;\n background: transparent;\n border: 0px solid transparent;\n width: 60px;\n height: 100%;\n outline: none;\n font-size: 0px;\n color: transparent;\n }\n\n #geolocation{\n color: #0279cd;\n font-weight: 600;\n text-decoration: none;\n margin-top: 0.5em;\n display: block;\n cursor: pointer;\n font-size: 10px;\n text-align: center;\n margin-right: 1em;\n }\n\n #geolocation img{\n height: 20px;\n }\n\n #timesContainer{\n padding-top: 65px;\n padding-bottom: 30%;\n }\n\n #timesContainer h2{\n font-size: 18px;\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n padding: 0.5em;\n background: black;\n color: white;\n margin-bottom: 1em;\n }\n\n #timesContainer h2 span{\n font-size: 10px;\n margin-left: 1em;\n line-height: 1em;\n }\n\n #timesContainer .listing{\n padding: 0 1em;\n }\n\n #timesContainer .listing ol{\n padding: 0;\n margin: 0;\n display: -webkit-flex;\n display: flex;\n list-style-type: none;\n flex-wrap: wrap;\n -webkit-flex-wrap: wrap;\n padding-top: 0.8em;\n padding-bottom: 1em;\n }\n\n #timesContainer .listing ol li{\n display: block;\n width: 55px;\n margin-bottom: 0.5em;\n padding: 0.5em;\n text-align: center;\n }\n\n #timesContainer .listing ol li.missed{\n text-decoration: line-through;\n opacity: 0.5;\n }\n\n #timesContainer .listing ol li.nextTime{\n color: #0279cd;\n border-radius: 3px;\n font-weight: 600;\n border: 1px solid #0279cd;\n border-width: 1px 0;\n }\n\n .dayoffset{\n position: fixed;\n bottom: 0;\n left: 0;\n display: -webkit-flex;\n display: flex;\n width: 100%;\n overflow-x: scroll;\n padding: 0.8em;\n border-top: 1px solid black;\n -webkit-align-items: center;\n align-items: center;\n background: white;\n z-index: 1000;\n transition: transform 0.2s ease-out;\n -webkit-overflow-scrolling: touch;\n }\n\n .dayoffset a{\n display: block;\n color: #3a3a3a;\n margin-right: 1em;\n text-decoration: none;\n font-weight: 200;\n padding: 0.4em 0.7em;\n min-width: 100px;\n text-align: center;\n }\n\n .dayoffset a.activeDay{\n background: black;\n color: white;\n border-radius: 3px;\n font-weight: 600;\n }\n\n .dayoffset[data-active=\"false\"]{\n -webkit-transform: translateY(60px);\n transform: translateY(100%);\n }\n\n .spin{\n animation: spinAnimation 1.25s infinite;\n -moz-animation: spinAnimation 1.25s infinite;\n -webkit-animation: spinAnimation 1.25s infinite;\n -o-animation: spinAnimation 1.25s infinite;\n }\n\n @keyframes spinAnimation{\n 0% {transform: rotateZ(0deg);}\n 100% {transform: rotateZ(360deg);}\n }\n\n @-moz-keyframes spinAnimation{\n 0% {-moz-transform: rotateZ(0deg);}\n 100% {-moz-transform: rotateZ(360deg);}\n }\n \n @-webkit-keyframes spinAnimation{\n 0% {-webkit-transform: rotateZ(0deg);}\n 100% {-webkit-transform: rotateZ(360deg);}\n }\n \n @-o-keyframes spinAnimation{\n 0% {-o-transform: rotateZ(0deg);}\n 100% {-o-transform: rotateZ(360deg);}\n }\n\n @media all and (min-width: 768px){\n \n #timesContainer .cinema{\n display: -webkit-flex;\n display: flex;\n -webkit-flex-wrap: wrap;\n flex-wrap: wrap;\n }\n\n #timesContainer h2 {\n width: 100%;\n }\n\n #timesContainer .listing{\n width: 300px;\n }\n\n }\n </style>\n\n\t<script src=\"https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch\"></script>\n\t<meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\" />\n\t<meta name=\"description\" content=\"Cinema websites are rubbish. CineList makes it easy to get local cinema showtimes across the UK.\">\n\n\t<meta property=\"og:title\" content=\"CineList\" />\n\t<meta property=\"og:description\" content=\"Cinema websites are rubbish. CineList makes it easy to get local cinema showtimes across the UK.\" />\n\t<meta property=\"og:url\" content=\"http://cinelist.co.uk/\" />\n\t<meta property=\"og:image\" content=\"http://cinelist.co.uk/icon/fb.png\" />\n\n\t<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n\t<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\">\n\t<link rel=\"apple-touch-icon-precomposed\" href=\"https://cinelist-public-dev.herokuapp.com/icon/default.png\" />\n\t<link rel=\"apple-touch-icon-precomposed\" sizes=\"72x72\" href=\"https://cinelist-public-dev.herokuapp.com/icon/72.png\" />\n\t<link rel=\"apple-touch-icon-precomposed\" sizes=\"114x114\" href=\"https://cinelist-public-dev.herokuapp.com/icon/114.png\" />\n\t<link rel=\"apple-touch-icon-precomposed\" sizes=\"144x144\" href=\"https://cinelist-public-dev.herokuapp.com/icon/144.png\" />\n\n\t<link rel=\"manifest\" href=\"/cinelist/manifest.json\">\n\t<meta name=\"theme-color\" content=\"#000000\" />\n\t<script>window.__cinelist = {};</script>\n</head>\n\t<body>\n\n\t\t<div id=\"home\">\n\t\t\t<div id=\"container\">\n\t\t\t\t<img src=\"https://cinelist-public-dev.herokuapp.com/assets/images/logo_small.png\" alt=\"The CineList logo\" />\n\t\t\t\t<h1>The fastest way to get UK cinema times<br/> on the web (probably)</h1>\n\t\t\t</div>\n\t\t\n\t\t</div>\n\n\t\t<form id=\"search\" data-firstload=\"true\">\n\t\t\t<a href=\"#\" id=\"geolocation\">\n\t\t\t\t<img src=\"https://cinelist-public-dev.herokuapp.com/assets/images/geo.png\" alt=\"Use Geolocation\"/>\n\t\t\t</a>\n\t\t\t<input type=\"text\" placeholder=\"Search by place name\" title=\"Enter location to search\"/>\n\t\t\t<input type=\"submit\" value=\"Submit\" />\n\t\t</form>\n\n\t\t<div id=\"timesContainer\"></div>\n\n\t\t<div class=\"dayoffset\" data-active=\"false\">\n\t\t\t<a href=\"#\" class=\"activeDay\" data-offset='0'>Today</a>\n\t\t\t<a href=\"#\" data-offset='1'>Tomorrow</a>\n\t\t\t<a href=\"#\" data-offset='2'>&plus;2</a>\n\t\t\t<a href=\"#\" data-offset='3'>&plus;3</a>\n\t\t\t<a href=\"#\" data-offset='4'>&plus;4</a>\n\t\t\t<a href=\"#\" data-offset='5'>&plus;5</a>\n\t\t\t<a href=\"#\" data-offset='6'>&plus;6</a>\n\t\t</div>\n\n\t\t<div class=\"working\" data-visible=\"false\">\n\t\t\t<img src=\"https://cinelist-public-dev.herokuapp.com/assets/images/error.png\" id=\"error\" data-visible=\"false\" alt=\"Cross\"/>\n\t\t\t<img src=\"https://cinelist-public-dev.herokuapp.com/assets/images/loading.png\" id=\"loading\" data-visible=\"true\" class=\"spin\" alt=\"loading spinner\"/>\n\t\t\t<div class=\"status\">Well, hello there...</div>\n\n\t\t\t<script>\n\t\t\t\twindow.__cinelist.working = (function(){\n\t\t\t\t\t\n\t\t\t\t\tvar workingOverlay = document.querySelector('.working');\n\t\t\t\t\tvar spinnerImage = workingOverlay.querySelector('#loading');\n\t\t\t\t\tvar errorImage = workingOverlay.querySelector('#error');\t\t\t\t\t\n\t\t\t\t\tvar statusMessage = workingOverlay.querySelector('.status');\n\n\t\t\t\t\tfunction selectIcon(icon){\n\t\t\t\t\t\tif(icon === 'error'){\n\t\t\t\t\t\t\tspinnerImage.dataset.visible = \"false\";\n\t\t\t\t\t\t\terrorImage.dataset.visible = \"true\";\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif(icon === 'working'){\n\t\t\t\t\t\t\tspinnerImage.dataset.visible = \"true\";\n\t\t\t\t\t\t\terrorImage.dataset.visible = \"false\";\n\t\t\t\t\t\t}\n\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\tfunction showSpinner(){\n\t\t\t\t\t\tworkingOverlay.dataset.visible = \"true\";\n\t\t\t\t\t}\n\n\t\t\t\t\tfunction hideSpinner(){\n\t\t\t\t\t\tworkingOverlay.dataset.visible = \"false\";\n\t\t\t\t\t}\n\n\t\t\t\t\tfunction updateSpinnerMessage(message){\n\t\t\t\t\t\tstatusMessage.textContent = message;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\ticon : selectIcon,\n\t\t\t\t\t\tshow : showSpinner,\n\t\t\t\t\t\thide : hideSpinner,\n\t\t\t\t\t\tupdate : updateSpinnerMessage,\n\t\t\t\t\t};\n\t\t\t\t}());\n\t\t\t</script>\n\t\t</div>\n\n\t\t<script>\n\t\t \n\t\t {{{payload.core}}}\n\t\t \n\t\t</script>\n\n\t\t<script>\n\t\t\tif(navigator.serviceWorker !== undefined) {\n\t\t\t\tnavigator.serviceWorker\n\t\t\t\t\t.register('/cinelist/service-worker.js')\n\t\t\t\t\t.then(function() { console.log(\"Service Worker Registered\"); })\n\t\t\t\t\t.catch(function(err){\n\t\t\t\t\t\tconsole.error(err);\n\t\t\t\t\t})\n\t\t\t\t;\n\t\t\t}\n\t\t</script>\n\n\t\t<script>\n\t\t\t(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n\t\t\t(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n\t\t\tm=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n\t\t\t})(window,document,'script','//www.google-analytics.com/analytics.js','ga');\n\n\t\t\tga('create', 'UA-61305342-1', 'auto');\n\t\t\tga('send', 'pageview');\n\n\t\t</script>\n\n\t\t<script src=\"https://use.typekit.net/imt5yec.js\"></script>\n\t\t<script>try{Typekit.load();}catch(e){}</script>\n\n\t</body>\n</html>\n","output":"str","x":640,"y":240,"wires":[["c8db0462.894fd8"]]},{"id":"733ffcc6.3b6a84","type":"http in","z":"d7f421c3.87cf2","name":"","url":"/cinelist/service-worker.js","method":"get","upload":false,"swaggerDoc":"","x":205,"y":120,"wires":[["a8e958c4.ee99b8"]]},{"id":"a8e958c4.ee99b8","type":"template","z":"d7f421c3.87cf2","name":"Service Worker","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"var CacheName = 'CineList';\n\nself.addEventListener('install', function(e) {\n console.log('Installed')\n});\n\nself.addEventListener('fetch', function(event) {\n event.respondWith(\n\tcaches.open(CacheName).then(function(cache) {\n\t return cache.match(event.request).then(function(cachedResponse) {\n\t\tvar fetchPromise = fetch(event.request).then(function(networkResponse) {\n\t\t cache.put(event.request, networkResponse.clone());\n\t\t return networkResponse;\n\t\t});\n\t\t\n\t\tconsole.log(cachedResponse);\n\t\t// If it's a request to the API\n\t\t// try to get it from the network\n\t\t// if that fails, send the cached version\n\t\t// if there is one. \t\n\t\tif(event.request.url.indexOf('api.cinelist.co.uk') > -1){\n\n\t\t\treturn fetchPromise\n\t\t\t\t.catch(function(err){\n\t\t\t\t\tif(cachedResponse !== undefined){\n\t\t\t\t\t\treturn cachedResponse;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthrow err;\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t;\n\t\t}\n\n\t\treturn cachedResponse || fetchPromise;\n\n\t })\n\t})\n );\n});","output":"str","x":455,"y":120,"wires":[["31b5f63.1faec0a","70a720e7.ee4e"]]},{"id":"683f655.3cdba9c","type":"template","z":"d7f421c3.87cf2","name":"Core JS","field":"payload.core","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"(function(){\n\n\t'use strict';\n\n\tvar APIRoot = \"https://api.cinelist.co.uk\";\n\n\tvar prevent = function(e){e.preventDefault();e.stopImmediatePropagation()};\n\n\tvar home = document.querySelector('#home');\n\tvar searchForm = document.querySelector('#search');\n\tvar geoTrigger = searchForm.querySelector('#geolocation');\n\tvar dayoffsetContainer = document.querySelector('.dayoffset');\n\tvar dayOffsetButtons = Array.from( dayoffsetContainer.querySelectorAll('*[data-offset]') );\n\tvar timesContainer = document.querySelector('#timesContainer');\n\n\tvar currentLocation = '';\n\tvar currentLocationIsPostcode = false;\n\n\tfunction getGeolocation(){\n\n\t\treturn new Promise(function( resolve, reject){\n\n\t\t\tif(navigator.geolocation){\n\t\t\t\tnavigator.geolocation.getCurrentPosition(\n\t\t\t\t\tfunction(position){\n\t\t\t\t\t\tresolve(position)\n\t\t\t\t\t},\n\t\t\t\t\tfunction(err){\n\t\t\t\t\t\treject(err);\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tenableHighAccuracy: false,\n\t\t\t\t\t\ttimeout: 15000,\n\t\t\t\t\t\tmaximumAge: 0\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\treject('Geolocation is not available in this browser');\n\t\t\t}\n\n\t\t});\n\n\t}\n\n\tfunction wasResponseGood(response){\n\n\t\treturn new Promise( function(resolve, reject){\n\n\t\t\tif(response.ok){\n\t\t\t\tresponse.json()\n\t\t\t\t\t.then(function(json){\n\t\t\t\t\t\tresolve(json);\n\t\t\t\t\t})\n\t\t\t\t\t.catch(function(err){\n\t\t\t\t\t\tconsole.log('An error occurred with request', err);\n\t\t\t\t\t\treject(err);\n\t\t\t\t\t})\n\t\t\t\t;\n\t\t\t} else {\n\t\t\t\treject(response);\n\t\t\t}\n\n\t\t});\n\n\t}\n\n\tfunction joinListOfCinemasWithListings(cinemas, times){\n\n\t\treturn cinemas.map(function(cinema){\n\n\t\t\t\tfor(var x = 0; x < times.length; x += 1){\n\t\t\t\t\tif(times[x] === null){\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\tif(times[x].cinema === cinema.id){\n\t\t\t\t\t\tcinema.listings = times[x].listings;\n\t\t\t\t\t\ttimes.splice(x, 1);\n\t\t\t\t\t\treturn cinema;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t})\n\t\t\t.filter(function(item){\n\t\t\t\treturn item !== null;\n\t\t\t})\n\t\t;\n\n\t}\n\n\tfunction resetDayOffsetButtons(){\n\t\tdayOffsetButtons.forEach(function(button){\n\t\t\tbutton.classList.remove('activeDay');\n\t\t});\n\t}\n\n\tfunction generateViewFromData(cinemasWithTimes, offset){\n\n\t\tvar timesDocumentFragment = document.createDocumentFragment();\n\n\t\tcinemasWithTimes.forEach(function(cinema){\n\n\t\t\tvar cinemaContainer = document.createElement('div');\n\t\t\tvar cinemaTitle = document.createElement('h2');\n\t\t\tvar cinemaDistance = document.createElement('span');\n\n\t\t\tcinemaContainer.classList.add('cinema');\n\n\t\t\tcinemaTitle.textContent = cinema.name;\n\t\t\tcinemaDistance.textContent = '(' + cinema.distance + ' miles)';\n\n\t\t\tcinemaTitle.appendChild(cinemaDistance);\n\n\t\t\tcinemaContainer.appendChild(cinemaTitle);\n\n\t\t\tcinema.listings.sort( function(a, b){\n\t\t\t\tif(a.title > b.title){\n\t\t\t\t\treturn 1\n\t\t\t\t} else {\n\t\t\t\t\treturn -1;\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tvar d = new Date(),\n\t\t\t\tthisHour = d.getHours(),\n\t\t\t\tthisMinute = d.getMinutes();\n\n\t\t\tcinema.listings.forEach(function(listing){\n\n\t\t\t\tvar listingContainer = document.createElement('div');\n\t\t\t\tvar listingTitle = document.createElement('h3');\n\t\t\t\tvar listingTimesContainer = document.createElement('ol');\n\n\t\t\t\tlistingContainer.classList.add('listing');\n\t\t\t\tlistingTitle.textContent = listing.title;\n\n\t\t\t\tvar setNext = false;\n\n\t\t\t\tlisting.times.forEach(function(time){\n\n\t\t\t\t\tvar timeLi = document.createElement('li');\n\t\t\t\t\ttimeLi.textContent = time;\n\n\t\t\t\t\tif(offset === 0){\n\t\t\t\t\t\tvar theTime = time.split(\":\");\n\t\t\t\t\t\tvar canCatch = undefined;\n\n\t\t\t\t\t\tif(thisHour < parseInt(theTime[0])){\n\t\t\t\t\t\t\tcanCatch = true\n\t\t\t\t\t\t} else if(thisHour == parseInt(theTime[0]) && thisMinute < parseInt(theTime[1])){\n\t\t\t\t\t\t\tcanCatch = true;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tcanCatch = false;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif(!setNext && canCatch){\n\t\t\t\t\t\t\ttimeLi.setAttribute('class', 'nextTime')\n\t\t\t\t\t\t\tsetNext = true;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif(!canCatch){\n\t\t\t\t\t\t\ttimeLi.setAttribute('class','missed');\n\t\t\t\t\t\t}\n\n\t\t\t\t\t} else {\n\n\t\t\t\t\t\tif(!setNext){\n\t\t\t\t\t\t\ttimeLi.setAttribute('class', 'nextTime')\n\t\t\t\t\t\t\tsetNext = true;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t}\n\n\n\t\t\t\t\tlistingTimesContainer.appendChild(timeLi);\n\n\t\t\t\t});\n\n\t\t\t\tlistingContainer.appendChild(listingTitle);\n\t\t\t\tlistingContainer.appendChild(listingTimesContainer);\n\t\t\t\tcinemaContainer.appendChild(listingContainer);\n\t\t\t});\n\n\t\t\ttimesDocumentFragment.appendChild(cinemaContainer);\n\n\t\t});\n\n\t\treturn timesDocumentFragment;\n\t}\n\n\tfunction searchForCinemasByGeolocation(latitude, longitude, offset){\n\n\t\tconsole.log(latitude, longitude);\n\t\treturn fetch(APIRoot + '/search/cinemas/coordinates/' + latitude + '/' + longitude)\n\t\t\t.then(function(response){\n\t\t\t\treturn wasResponseGood(response);\n\t\t\t})\n\t\t\t.catch(function(err){\n\t\t\t\tconsole.log('Could not fetch searchForCinemasByLocation', err);\n\t\t\t\tthrow err;\n\t\t\t})\n\t\t;\n\n\t}\n\n\tfunction searchForCinemasByLocation(location){\n\n\t\tconsole.log(location);\n\t\treturn fetch(APIRoot + '/search/cinemas/location/' + location)\n\t\t\t.then(function(response){\n\t\t\t\treturn wasResponseGood(response);\n\t\t\t})\n\t\t\t.catch(function(err){\n\t\t\t\tconsole.log('Could not fetch searchForCinemasByLocation', err);\n\t\t\t\tthrow err;\n\t\t\t})\n\t\t;\n\n\t}\n\n\tfunction searchForCinemasByPostcode(postcode){\n\n\t\tconsole.log(postcode);\n\t\treturn fetch(APIRoot + '/search/cinemas/postcode/' + postcode)\n\t\t\t.then(function(response){\n\t\t\t\treturn wasResponseGood(response);\n\t\t\t})\n\t\t\t.catch(function(err){\n\t\t\t\tconsole.log('Could not fetch searchForCinemasByPostcode', err);\n\t\t\t\tthrow err;\n\t\t\t})\n\t\t;\n\n\t}\n\n\tfunction getManyCinemaTimesById(listOfCinemaIDs, offset){\n\n\t\toffset = offset || 0;\n\n\t\treturn fetch(APIRoot + '/get/times/many/' + listOfCinemaIDs.join(',') + '?day=' + offset)\n\t\t\t.then(function(response){\n\t\t\t\treturn wasResponseGood(response);\n\t\t\t})\n\t\t\t.catch(function(err){\n\t\t\t\tconsole.log('Could not fetch searchForCinemasByLocation', err);\n\t\t\t\tthrow err;\n\t\t\t})\n\t\t;\n\t}\n\n\tfunction getCinemasAndTimesFromLocation(location, offset){\n\n\t\toffset = offset || 0;\n\n\t\twindow.__cinelist.working.icon('working');\n\t\twindow.__cinelist.working.update('Searching for ' + location + ' cinemas');\n\t\twindow.__cinelist.working.show();\n\n\t\treturn searchForCinemasByLocation(location)\n\t\t\t.then(function(cinemaData){\n\n\t\t\t\tconsole.log(cinemaData);\n\n\t\t\t\tvar cinemaIDs = cinemaData.cinemas.map(function(datum, idx){\n\t\t\t\t\t\tif(idx < 30){\n\t\t\t\t\t\t\treturn datum.id;\n\t\t\t\t\t\t} else if(datum.distance < 5){\n\t\t\t\t\t\t\treturn datum.id;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t;\n\n\t\t\t\twindow.__cinelist.working.update('Getting times for ' + location + ' cinemas');\n\n\t\t\t\treturn getManyCinemaTimesById(cinemaIDs, offset)\n\t\t\t\t\t.then(function(listingsData){\n\t\t\t\t\t\treturn joinListOfCinemasWithListings(cinemaData.cinemas, listingsData.results);\n\t\t\t\t\t})\n\t\t\t\t;\n\n\t\t\t})\n\t\t;\n\n\t}\n\n\tfunction getCinemasAndTimesFromGeolocation(latitude, longitude, offset){\n\n\t\treturn searchForCinemasByGeolocation(latitude, longitude, offset)\n\t\t\t.then(function(cinemaData){\n\n\t\t\t\tconsole.log(cinemaData);\n\t\t\t\tcurrentLocation = cinemaData.postcode;\n\t\t\t\tcurrentLocationIsPostcode = true;\n\n\t\t\t\tvar cinemaIDs = cinemaData.cinemas.map(function(datum){\n\t\t\t\t\treturn datum.id;\n\t\t\t\t});\n\n\t\t\t\twindow.__cinelist.working.update('Getting times for nearby cinemas');\n\n\t\t\t\treturn getManyCinemaTimesById(cinemaIDs, offset)\n\t\t\t\t\t.then(function(listingsData){\n\t\t\t\t\t\treturn joinListOfCinemasWithListings(cinemaData.cinemas, listingsData.results);\n\t\t\t\t\t})\n\t\t\t\t;\n\n\t\t\t})\n\t\t;\n\n\t}\n\n\tfunction getCinemasAndTimesFromPostcode(postcode, offset){\n\n\t\treturn searchForCinemasByPostcode(postcode, offset)\n\t\t\t.then(function(cinemaData){\n\n\t\t\t\tconsole.log(cinemaData);\n\t\t\t\tcurrentLocation = cinemaData.postcode;\n\t\t\t\tcurrentLocationIsPostcode = true;\n\n\t\t\t\tvar cinemaIDs = cinemaData.cinemas.map(function(datum){\n\t\t\t\t\treturn datum.id;\n\t\t\t\t});\n\n\t\t\t\twindow.__cinelist.working.update('Getting times for nearby cinemas');\n\n\t\t\t\treturn getManyCinemaTimesById(cinemaIDs, offset)\n\t\t\t\t\t.then(function(listingsData){\n\t\t\t\t\t\treturn joinListOfCinemasWithListings(cinemaData.cinemas, listingsData.results);\n\t\t\t\t\t})\n\t\t\t\t;\n\n\t\t\t})\n\t\t;\n\n\t}\n\n\tfunction locationSubmitted(location){\n\n\t\thome.dataset.visible = \"false\";\n\t\tsearchForm.dataset.firstload = \"false\";\n\t\t\n\t\tcurrentLocation = location;\n\t\tcurrentLocationIsPostcode = false;\n\n\t\tresetDayOffsetButtons();\n\t\tdayOffsetButtons[0].classList.add('activeDay');\n\t\tdayoffsetContainer.dataset.active = \"false\";\n\n\t\tgetCinemasAndTimesFromLocation(currentLocation, 0)\n\t\t\t.then(function(cinemasWithTimes){\n\t\t\t\tconsole.log(cinemasWithTimes);\n\t\t\t\ttimesContainer.innerHTML = \"\";\n\t\t\t\ttimesContainer.appendChild(generateViewFromData(cinemasWithTimes, 0));\n\t\t\t\twindow.__cinelist.working.hide();\n\t\t\t\tdayoffsetContainer.dataset.active = \"true\";\n\t\t\t})\n\t\t\t.catch(function(err){\n\n\t\t\t\twindow.__cinelist.working.icon('error');\n\t\t\t\twindow.__cinelist.working.update('Sorry - something went wrong getting your times');\n\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\twindow.__cinelist.working.hide();\n\t\t\t\t}, 4000);\n\n\t\t\t})\n\t\t;\n\n\t}\n\n\tfunction bindEvents(){\n\n\t\tsearchForm.addEventListener('submit', function(e){\n\t\t\tprevent(e);\n\n\t\t\tif(this[0].value === \"\"){\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis[0].blur();\n\t\t\tthis.dataset.firstload = \"false\";\n\n\t\t\twindow.history.pushState({}, 'CineList | ' + this[0].value, '?place=' + this[0].value);\n\n\t\t\tlocationSubmitted(this[0].value);\n\n\t\t}, false);\n\n\t\tgeoTrigger.addEventListener('click', function(e){\n\t\t\tprevent(e);\n\t\t\tconsole.log(e);\n\n\t\t\thome.dataset.visible = \"false\";\n\t\t\tsearchForm[0].value = \"\";\n\t\t\tsearchForm.dataset.firstload = \"false\";\n\n\t\t\tresetDayOffsetButtons();\n\t\t\tdayOffsetButtons[0].classList.add('activeDay');\n\n\t\t\twindow.__cinelist.working.icon('working');\n\t\t\twindow.__cinelist.working.update('Figuring out where you are...');\n\t\t\twindow.__cinelist.working.show();\n\t\t\tdayoffsetContainer.dataset.active = \"false\";\n\n\t\t\tdayoffsetContainer.dataset.active = \"false\";\n\n\t\t\tgetGeolocation()\n\t\t\t\t.then(function(data){\n\t\t\t\t\tconsole.log(data);\n\t\t\t\t\twindow.__cinelist.working.update('Working out which cinemas are near you...');\n\t\t\t\t\tgetCinemasAndTimesFromGeolocation(data.coords.latitude, data.coords.longitude, 0)\n\t\t\t\t\t\t.then(function(cinemasWithTimes){\n\t\t\t\t\t\t\tconsole.log(cinemasWithTimes);\n\t\t\t\t\t\t\ttimesContainer.innerHTML = \"\";\n\t\t\t\t\t\t\ttimesContainer.appendChild(generateViewFromData(cinemasWithTimes, 0));\n\t\t\t\t\t\t\twindow.__cinelist.working.hide();\n\t\t\t\t\t\t\tdayoffsetContainer.dataset.active = \"true\";\n\t\t\t\t\t\t})\n\t\t\t\t\t;\n\n\t\t\t\t})\n\t\t\t\t.catch(function(err){\n\t\t\t\t\tconsole.log(err);\n\t\t\t\t\twindow.__cinelist.working.update('Sorry - CineList couldn\\'t find your location');\n\n\t\t\t\t\tsetTimeout(function(){\n\t\t\t\t\t\twindow.__cinelist.working.hide();\n\t\t\t\t\t}, 4000);\n\n\t\t\t\t})\n\t\t\t;\n\n\t\t}, false);\n\n\t}\n\n\tbindEvents();\n\n\t(function(){\n\t\tvar days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n\t\tvar today = new Date().getDay();\n\n\t\tdayOffsetButtons.forEach(function(offsetBtn){\n\n\t\t\tvar offset = parseInt(offsetBtn.dataset.offset);\n\t\t\tvar dayInt = offset + today;\n\n\t\t\tif(dayInt >= days.length){\n\t\t\t\tdayInt = dayInt - 7;\n\t\t\t}\n\n\t\t\tif(offset === 0){\n\t\t\t\toffsetBtn.textContent = 'Today';\n\t\t\t} else if(offset === 1){\n\t\t\t\toffsetBtn.textContent = 'Tomorrow';\n\t\t\t} else {\n\t\t\t\toffsetBtn.textContent = days[dayInt];\n\t\t\t}\n\n\t\t\toffsetBtn.addEventListener('click', function(e){\n\t\t\t\tprevent(e);\n\n\t\t\t\tresetDayOffsetButtons();\n\n\t\t\t\toffsetBtn.classList.add('activeDay');\n\n\t\t\t\tvar dateOffset = parseInt(this.dataset.offset);\n\t\t\t\tconsole.log(dateOffset);\n\n\t\t\t\tvar appropriateSearch = currentLocationIsPostcode ? getCinemasAndTimesFromPostcode : getCinemasAndTimesFromLocation;\n\t\t\t\t\n\t\t\t\twindow.__cinelist.working.icon('working');\n\t\t\t\twindow.__cinelist.working.update('Getting ' + days[dayInt] + ' times for local cinemas');\n\t\t\t\twindow.__cinelist.working.show();\n\n\t\t\t\tappropriateSearch(currentLocation, parseInt(this.dataset.offset))\n\t\t\t\t\t.then(function(cinemasWithTimes){\n\t\t\t\t\t\tconsole.log(cinemasWithTimes);\n\t\t\t\t\t\ttimesContainer.innerHTML = \"\";\n\t\t\t\t\t\ttimesContainer.appendChild(generateViewFromData(cinemasWithTimes, dateOffset));\n\t\t\t\t\t\twindow.__cinelist.working.hide();\n\t\t\t\t\t\tdayoffsetContainer.dataset.active = \"true\";\n\t\t\t\t\t})\n\t\t\t\t\t.catch(function(err){\n\n\t\t\t\t\t\twindow.__cinelist.working.icon('error');\n\t\t\t\t\t\twindow.__cinelist.working.update('Sorry - something went wrong getting your times');\n\n\t\t\t\t\t\tsetTimeout(function(){\n\t\t\t\t\t\t\twindow.__cinelist.working.hide();\n\t\t\t\t\t\t}, 4000);\n\n\t\t\t\t\t})\n\t\t\t\t;\n\n\t\t\t}, false);\n\n\t\t});\n\n\t})();\n\n\t(function(){\n\n\t\tvar queryString = window.location.search;\n\t\tvar queryParameters = {};\n\n\t\tqueryString.slice(1).split('&').forEach( function(keyPair){\n\t\t\tvar split = keyPair.split('=');\n\t\t\tqueryParameters[split[0]] = split[1];\n\t\t});\n\n\t\tconsole.log(queryParameters);\n\n\t\tif(queryParameters.place !== undefined){\n\t\t\tsearchForm[0].value = decodeURIComponent( queryParameters.place.replace('/', '') );\n\t\t\tlocationSubmitted(queryParameters.place);\n\t\t}\n\n\t})();\n\n\tconsole.log('Initialised');\n\n}());\n","output":"str","x":435,"y":240,"wires":[["66fc158.8d674ec"]]},{"id":"31b5f63.1faec0a","type":"function","z":"d7f421c3.87cf2","name":"Set Content Type","func":"\nmsg.headers = {\n \"Content-Type\" : \"application/javascript\"\n};\n\nreturn msg;","outputs":1,"noerr":0,"x":660,"y":120,"wires":[["c8db0462.894fd8"]]},{"id":"70a720e7.ee4e","type":"debug","z":"d7f421c3.87cf2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":620,"y":75,"wires":[]},{"id":"ecdc9d24.33dad","type":"http in","z":"d7f421c3.87cf2","name":"","url":"/cinelist/manifest.json","method":"get","upload":false,"swaggerDoc":"","x":215,"y":180,"wires":[["11121466.8cd66c"]]},{"id":"11121466.8cd66c","type":"template","z":"d7f421c3.87cf2","name":"Manifest","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{\n \"name\": \"CineList\",\n \"short_name\": \"CineList\",\n \"start_url\": \"/index.html?homescreen=1\",\n \"display\": \"standalone\",\n \"icons\": [{\n \"src\": \"/icon/144.png\",\n \"sizes\": \"144x144\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/icon/400.png\",\n \"sizes\": \"400x400\",\n \"type\": \"image/png\"\n }],\n \"background_color\": \"#FFFFFF\",\n \"theme_color\": \"#000000\",\n \"description\" : \"Cinema websites are rubbish. CineList makes it easy to get local cinema showtimes across the UK.\"\n}","output":"str","x":435,"y":180,"wires":[["dc1c5799.761bd8"]]},{"id":"dc1c5799.761bd8","type":"function","z":"d7f421c3.87cf2","name":"Set Content Type","func":"\nmsg.headers = {\n \"Content-Type\" : \"application/json\"\n};\n\nreturn msg;","outputs":1,"noerr":0,"x":660,"y":180,"wires":[["c8db0462.894fd8"]]}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment