Created
August 25, 2016 22:06
-
-
Save mailtoharshit/c74141d7177e0c7b5528906667d0fe25 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/mailtoharshit/San-Francisco-Font-/master/sanfrancisco.css"> | |
| <!-- Compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" /> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> | |
| <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" /> | |
| <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> | |
| <script src="https://code.jquery.com/jquery-1.12.4.js"></script> | |
| <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> | |
| <script src="https://rawgit.com/evanplaice/jquery-csv/master/src/jquery.csv.min.js"></script> | |
| <script> | |
| $(function() { | |
| var availableTags = [ | |
| "CR-Newton", | |
| "CR-Franklin", | |
| "CR-Galileo", | |
| "CR-Einstein", | |
| "CR-Edison", | |
| "CR-Watt", | |
| "CR-Ford", | |
| "CR-Turin", | |
| "CR-Pascal", | |
| "CR-Gemini", | |
| "CR-IT Training Room", | |
| "CR-EDW Training Room" | |
| ]; | |
| $("#search").autocomplete({ | |
| source: availableTags | |
| }); | |
| $("#search").on("autocompleteselect", function(event, ui) { | |
| console.log("select event triggered"); | |
| showResult(ui.item.value); | |
| }); | |
| $("#search").keypress(function(e, ui) { | |
| if (e.keyCode == $.ui.keyCode.ENTER) { | |
| showResult(ui.item.value); | |
| } | |
| }); | |
| //clear result on clicking searchbar | |
| $("#search").on("click", function() { | |
| if ($(this).val() != "") { | |
| $(this).val(""); | |
| $("#mapwrapper").empty(); | |
| $("#description").empty(); | |
| } | |
| }); | |
| //Chaining Asnyc Calls | |
| var csv; | |
| var rawdata; | |
| var roomData; | |
| var roomName; | |
| var roomLocation; | |
| var bulding; | |
| var roomMap; | |
| var result = { | |
| name: "", | |
| building: "", | |
| location: "", | |
| image: "" | |
| }; | |
| //Fetch data from remote location | |
| function getcsv(url) { | |
| rawdata = $.get(url); | |
| return rawdata; | |
| } | |
| //Read csv | |
| function readcsv() { | |
| return csv = rawdata.responseText; | |
| } | |
| //Convert to JSON object | |
| function convertToJSON() { | |
| return roomData = $.csv.toObjects(csv); | |
| } | |
| //call on load | |
| (function() { | |
| getcsv("https://rawgit.com/randeep2906/JSON-CSV/master/DataSeed.csv").then(readcsv).then(convertToJSON); | |
| }()); | |
| //Search method to search for room and fill up the value swhen foudn | |
| function searchForRoom(param) { | |
| var matchingRoom; | |
| for (var i = 0; i < roomData.length; i++) { | |
| if (roomData[i].name == param) { | |
| matchingRoom = roomData[i]; | |
| break; | |
| } | |
| } | |
| if (matchingRoom) { | |
| console.log(matchingRoom.name); | |
| var resultToShow = matchingRoom.name + " is in building " + matchingRoom.building + " on " + matchingRoom.location; | |
| $("#description").text(resultToShow); | |
| $('#mapwrapper').append('<img id="map" class="slideInDown" src="' + matchingRoom.image + '" />'); | |
| return true; | |
| } else { | |
| console.log("No match"); | |
| $("#description").text("No Matching Room Found"); | |
| return false; | |
| } | |
| } | |
| function showResult(param) { | |
| searchForRoom(param); | |
| } | |
| //Search Click Function | |
| $("#searchbutton").click(function() { | |
| showResult(); | |
| }); | |
| }); | |
| </script> | |
| <style type="text/css"> | |
| .input-field input[type=search] { | |
| display: block; | |
| line-height: inherit; | |
| padding-left: 0rem; | |
| width: calc(100% - 4rem); | |
| font-size: 22px; | |
| text-align: left; | |
| color: grey; | |
| } | |
| .flow-text { | |
| font-size: 1.656rem; | |
| } | |
| .title-header { | |
| font-size: 28px; | |
| } | |
| #descritption { | |
| font-size: 22px; | |
| } | |
| .ui-widget { | |
| font-family: Roboto; | |
| font-size: 1.18rem; | |
| color: rgba(0, 0, 0, 0.71); | |
| line-height: 1.5; | |
| font-family: "Roboto", sans-serif; | |
| font - size: 16 px; | |
| color: #26a69a; | |
| display: block; | |
| line-height: 22px; | |
| padding: 14px 16px; | |
| } | |
| .ui-widget-content { | |
| /* border: 1px solid #dddddd; */ | |
| overflow-y: auto; | |
| z-index: 999; | |
| } | |
| .titleText { | |
| margin-left: 52px; | |
| } | |
| .searchbutton { | |
| margin-left: 30%; | |
| } | |
| .description {} | |
| </style> | |
| </head> | |
| <body> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <div class="container"> | |
| <!-- Page Content goes here --> | |
| <div class="row"> | |
| <div class="col s7 offset-s2"> | |
| <div id="titleText" class="titleText"> | |
| <p class="ultralight title-header center-align"> | |
| What Room are you looking for ?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col s8 offset-s2"> | |
| <form> | |
| <div class="ui-widget"> | |
| <div class="input-field"> | |
| <input placeholder="Search" id="search" type="search" class="flow-text left-align" x-webkit-speech> | |
| <a id="searchbutton" style="margin-top:40px" class="waves-effect waves-light btn">Search</a> | |
| </input> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <div id="description" class=" ultralight title-header center-align"> | |
| </div> | |
| <div id="mapwrapper" class="mapimage center-align"> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment