index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>OptBnb</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/style.css" rel="stylesheet">
    <link href="css/gmaps.css" rel="stylesheet">
    <link href="css/tile.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/scrolling-nav.css" rel="stylesheet">

    <link rel="icon" href="img/favicon.ico" type="image/x-icon">


    <script src="js/Chart.js"></script>

    <!-- Socket Stuff -->
     <script src="https://code.jquery.com/jquery-latest.min.js"></script>
     <script src="/socket.io/socket.io.js"></script>

    <style>
        .bg-primary {
          background-color: #FF5A60 !important;
        }

        .scrollable-menu {
            height: auto;
            max-height: 200px;
            overflow-x: hidden;
        }


    </style>


  </head>

  <body style="background-color: #EFF3F4" id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">
            <img src="img/optbnbLogo.png" alt="Airbnb logo" height="40" width="40"><img src="img/optbnbText.png" height="40" width="85"></a></a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#map">Map</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#trends">Trends</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#chatsection">Chat</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="https://github.com/kyle8998/Airbnb-Optimizer">Source Code</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <header class="headsize bg-primary text-white">
      <div class="container text-center">
        <h1>Optimize Your Airbnb Listing!</h1>
        <p class="lead">Enter your neighbourhood or geocoordinates below</p>

<!-- Form -->
<!-- <form class="startform form-inline"> -->
<div class="startform form-inline">
    <p style="color:black" id="missinginfo"></p>
  <!-- <label class="mr-sm-2" for="inlineFormCustomSelect"></label> -->
  <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="select_neighbourhood">
    <option selected>Neighbourhood</option>
    <option value="1">Bayview</option>
    <option value="2">Bernal Heights</option>
    <option value="3">Castro/Upper Market</option>
    <option value="4">Chinatown</option>
    <option value="5">Crocker Amazon</option>
    <option value="6">Diamond Heights</option>
    <option value="7">Downtown/Civic Center</option>
    <option value="8">Excelsior</option>
    <option value="9">Financial District</option>
    <option value="10">Glen Park</option>
    <option value="11">Golden Gate Park</option>
    <option value="12">Haight Ashbury</option>
    <option value="13">Inner Richmond</option>
    <option value="14">Inner Sunset</option>
    <option value="15">Lakeshore</option>
    <option value="16">Marina</option>
    <option value="17">Mission</option>
    <option value="18">Nob Hill</option>
    <option value="19">Noe Valley</option>
    <option value="20">North Beach</option>
    <option value="21">Ocean View</option>
    <option value="22">Outer Mission</option>
    <option value="23">Outer Richmond</option>
    <option value="24">Outer Sunset</option>
    <option value="25">Pacific Heights</option>
    <option value="26">Parkside</option>
    <option value="27">Potrero Hill</option>
    <option value="28">Presidio</option>
    <option value="29">Presidio Heights</option>
    <option value="30">Russian Hill</option>
    <option value="31">Seacliff</option>
    <option value="32">South of Market</option>
    <option value="33">Treasure Island/YBI</option>
    <option value="34">Twin Peaks</option>
    <option value="35">Visitacion Valley</option>
    <option value="36">West of Twin Peaks</option>
    <option value="37">Western Addition</option>
  </select>


  <!-- <label class="mr-sm-2" for="inlineFormCustomSelect"></label> -->
  <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="select_room">
    <option selected>Rooms Available</option>
    <option value="2">One</option>
    <option value="3">Two</option>
    <option value="4">Three</option>
    <option value="5">Four or more</option>
  </select>
  <input type="Latitude" class="geocodeForm form-control" id="inputLatitude" placeholder="Latitude (optional)">
  <input type="Longitude" class="geocodeForm form-control" id="inputLongitude" placeholder="Longitude (optional)">

  <div>
      <button onclick="optimize()" style="margin-top:.5rem"class="btn btn-primary">Optimize</button>
  </div>

<hr>
<div id="loader" style="display: none" class="loader">Loading...</div>
    <p id="optprice" class="optprice"><p>
    <p id="estincome" class="estincome"><p>


<!-- </form> -->

      </div>
    </header>


    <section style="height: 22.5em" id="map">
      <div class="container2">
        <div class="row">
          <div class="col-lg-8 mx-auto">

                <hr style="height:300pt; visibility:hidden;" />
          </div>
        </div>
      </div>
    </section>
<br>


<section id="trends" class="container_tile">

<div class="tile is-ancestor">
  <div class="tile is-vertical is-8">
    <div class="tile is-parent">
      <article class="tile is-child notification">
        <!-- <p class="title">Wide column</p>
        <p class="subtitle">Aligned with the right column</p> -->
        <div class="content">

            <h1>Trends</h1>
            <h2 style="color:gray">Average Listing Price in Each Neighbourhood</h2>
            <button type="button" class="btn btn-info" onclick="showgraph1()">1 Room</button>
            <button type="button" class="btn btn-info" onclick="showgraph2()">2 Rooms</button>
            <button type="button" class="btn btn-info" onclick="showgraph3()">3 Rooms</button>
            <button type="button" class="btn btn-info" onclick="showgraph4()">4+ Rooms</button>
            <!-- <hr style="height:2pt; visibility:hidden;" /> -->

            <div class="col-lg-8 fixed_graph">
            <!-- First CoL bar graph -->
                <div id="1room" style="display: none">
                  <canvas id="col_bar" width="120" height="100"></canvas>
                </div>

                <div id="2room" style="display: none">
                  <canvas id="col_bar2" width="120" height="100"></canvas>
                </div>

                <div id="3room" style="display: none">
                  <canvas id="col_bar3" width="120" height="100"></canvas>
                </div>

                <div id="4room" style="display: none">
                  <canvas id="col_bar4" width="120" height="100"></canvas>
                </div>

            </div>

        </div>
      </article>
    </div>
  </div>

    <div class="tile is-parent">
      <article class="tile is-child notification">
        <div class="content">
          <hr style="height:60pt; visibility:hidden;" />
          <!-- <p class="title">How much does a AirBnb cost in my neighbourhood?</p> -->
          <div class="testing">
          <p class="subtitle is-4">How much does a AirBnb cost in my neighbourhood?</p>
          <div class="content">
            <p>The cost of living varies significantly across the world. When isolating the scope down to one city, San Francisco, we found that the cost of living still significantly changed based on what neighbourhood you live in. </p>
            <p>We have graphed the average cost of living for each San Francisco neighbourhood based on the number of rooms available. The results are quite surprising! Each color on the graph symbolizes a different cost of living relative to the city. Green represents a cheaper area, blue is the average, red is on the expensive side, and blank is an outlier due to the lack of data.</p>
            <p>From the data we can see that places such as Bayview or Crocker Amazon are consistently on the cheap end whereas places such as Russian Hill or South of Market are quite expensive.</p>
          </div>
      </div>
        </div>
      </article>
    </div>
</div>

</section>

    <section id="trend2" style="background-color: rgb(242, 241, 239); padding: 50px 0">

        <div class="tile is-ancestor">
        <div style="padding-left: 4em; padding-right: 4em" class="tile is-parent">
          <article class="tile is-child notification">
            <p class="subtitle is-4">Do Ratings Really Matter?</p>
            <div class="content">

              <p>The short answer is yes. Ratings are one of the most important factors that a person looks at when looking for a place to stay. Nobody wants to stay in a place where the host has a bad reputation. Always be sure to take care of your guests!</p>
              <p>We have visualized the average ratings for each neighbourhood in terms of Accuracy, Cleanliness, Check-in, Communication, Location, and Value. The ratings on the graph start at 8/10 to better contrast the different neighbourhoods. San Francisco is a highly competitive area, and in order to compete as a host, you must strive for high ratings.</p>
              <p>A good way to stand out is to strive for perfection in a lacking area for your neighbourhood. For example Golden Gate Park is lacking a bit in cleanliness. As a host you could put cleanliness at a high priority to stand out in the area.</p>
              <p class="subtitle is-4">What are the Best and Worst Neighbourhoods?</p>
              <p> Whether you're looking to invest in buying properties or just a place to stay in San Francisco, you will most likely be looking for a highly rated area. Here are the top three areas with the most positive reviews.</p>
              <b>Top Three</b>
              <ul>
                  <li>Presidio - Overall Score: 97.67/100</li>
                  <li>Diamond Heights - Overall Score: 97.00/100</li>
                  <li>Presidio Heights - Overall Score: 96.35/100</li>
              </ul>
              <b>Worst Three</b>
              <ul>
                  <li>Golden Gate Park - Overall Score: 87.75/100</li>
                  <li>Downtown/Civic Center - Overall Score: 89.66/100</li>
                  <li>Bayview - Overall Score: 91.01/100</li>
              </ul>

            </div>
          </article>
        </div>

        <!-- Graph -->
        <div style="width: 40em" class="media-stretch tile is-parent is-7">
          <article class="tile is-child notification">
            <p style="color:gray" class="title">In-depth Rating Analysis</p>
            <!-- <p class="subtitle">With some content</p> -->

            <div class="content">
                <div class="dropdown">
                  <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Neighbourhood
                  </button>
                  <div class="form-control dropdown-menu scrollable-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" onclick="showradar1()">Bayview</a>
                    <a class="dropdown-item" onclick="showradar2()">Bernal Heights</a>
                    <a class="dropdown-item" onclick="showradar3()">Castro/Upper Market</a>
                    <a class="dropdown-item" onclick="showradar4()">Chinatown</a>
                    <a class="dropdown-item" onclick="showradar5()">Crocker Amazon</a>
                    <a class="dropdown-item" onclick="showradar6()">Diamond Heights</a>
                    <a class="dropdown-item" onclick="showradar7()">Downtown/Civic Center</a>
                    <a class="dropdown-item" onclick="showradar8()">Excelsior</a>
                    <a class="dropdown-item" onclick="showradar9()">Financial District</a>
                    <a class="dropdown-item" onclick="showradar10()">Glen Park</a>
                    <a class="dropdown-item" onclick="showradar11()">Golden Gate Park</a>
                    <a class="dropdown-item" onclick="showradar12()">Haight Ashbury</a>
                    <a class="dropdown-item" onclick="showradar13()">Inner Richmond</a>
                    <a class="dropdown-item" onclick="showradar14()">Inner Sunset</a>
                    <a class="dropdown-item" onclick="showradar15()">Lakeshore</a>
                    <a class="dropdown-item" onclick="showradar16()">Marina</a>
                    <a class="dropdown-item" onclick="showradar17()">Mission</a>
                    <a class="dropdown-item" onclick="showradar18()">Nob Hill</a>
                    <a class="dropdown-item" onclick="showradar19()">Noe Valley</a>
                    <a class="dropdown-item" onclick="showradar20()">North Beach</a>
                    <a class="dropdown-item" onclick="showradar21()">Ocean View</a>
                    <a class="dropdown-item" onclick="showradar22()">Outer Mission</a>
                    <a class="dropdown-item" onclick="showradar23()">Outer Richmond</a>
                    <a class="dropdown-item" onclick="showradar24()">Outer Sunset</a>
                    <a class="dropdown-item" onclick="showradar25()">Pacific Heights</a>
                    <a class="dropdown-item" onclick="showradar26()">Parkside</a>
                    <a class="dropdown-item" onclick="showradar27()">Potrero Hill</a>
                    <a class="dropdown-item" onclick="showradar28()">Presidio</a>
                    <a class="dropdown-item" onclick="showradar29()">Presidio Heights</a>
                    <a class="dropdown-item" onclick="showradar30()">Russian Hill</a>
                    <a class="dropdown-item" onclick="showradar31()">Seacliff</a>
                    <a class="dropdown-item" onclick="showradar32()">South of Market</a>
                    <a class="dropdown-item" onclick="showradar33()">Treasure Island/YBI</a>
                    <a class="dropdown-item" onclick="showradar34()">Twin Peaks</a>
                    <a class="dropdown-item" onclick="showradar35()">Visitacion Valley</a>
                    <a class="dropdown-item" onclick="showradar36()">West of Twin Peaks</a>
                    <a class="dropdown-item" onclick="showradar37()">Western Addition</a>

                  </div>
                </div>

                <canvas id="radar_chart" class="radarmedia" width="100" height="100"></canvas>
                <h3 id="overallscore" style="color: #363636" class="optprice">Overall Rating: 100</h3>
                <!-- <canvas id="scatter" width="300" height="200"></canvas> -->
            </div>
          </article>
        </div>
      </div>

    </section>

    <section style="padding: 50px 0" id="trend3">

      <div class="tile is-ancestor">
        <div class="tile is-vertical is-8">
          <div class="tile is-parent">
            <article class="tile is-child notification">
              <!-- <p class="title">Wide column</p>
              <p class="subtitle">Aligned with the right column</p> -->
              <div class="content">

                  <!-- <h1>Trends</h1> -->
                  <h2 style="color:gray">Average Price vs. Bed/Bath Ratio</h2>

                  <canvas id="line-chart" width="700" height="450"></canvas>

              </div>
            </article>
          </div>
        </div>

          <div class="tile is-parent">
            <article class="tile is-child notification">
              <div class="content">
                <hr style="height:40pt; visibility:hidden;" />
                <!-- <p class="title">How much does a AirBnb cost in my neighbourhood?</p> -->
                <div class="testing">
                <p class="subtitle is-4">How Many Bathrooms Should I Provide?</p>
                <div class="content">
                  <p>This is something that can vary depending on the guest. You might believe that more bathrooms are always better, but that is not always the case. Sometimes having too many bathrooms may be a nuisance!</p>
                  <p>We graphed the ratio between rooms to bathrooms and their respective prices. From the data we can see that the ideal amount of bathrooms is usually the number of rooms or one less.</p>
                  <p>While more bathrooms often lead to more expensive prices, your profit is not always more. For example in a single bedroom listing, the price actually gets cheaper when going up to three or four bathrooms. Additionally as a host, the cost it takes to invest in additional bathroom is more than you think because of the cost and cleaning. Because of that the profit you may make for four bathrooms in a three bedroom listing may be negligible.</p>
                </div>
            </div>
              </div>
            </article>
          </div>
      </div>

    </section>


    <section id="about" class="bg-light">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <h2>About OptBnb</h2>
            <p class="lead">OptBnb was designed to optimize your Airbnb listings to maximize your revenue at a click of a button!</p>
            <p> Enter the details of your listing, and we present you the optimal price for your listing. We take in account many factors including neighbourhood, area density, rooms, and many more! Additionally we display the hottest trends with the latest Airbnb listings so you can see how you match up with other listings. We currently only have support for San Francisco listings, but we are working on expanding it.</p>
          </div>
        </div>
      </div>
    </section>


    <div id="chatsection" style="margin-top: 10em; margin-bottom: 10em" class="container">
          <h2>Chat with other satisfied Airbnb hosts and professionals</h2>
          <!-- User Form (First Page) -->
          <div id="userFormArea" class="row chat">
              <div class="col-md-12">
                  <form id="userForm">
                      <div class="form-group">
                          <label>Enter Name</label>
                          <input class="form-control" id="username" />
                          <br />
                          <input type="submit" class="btn btn-primary"
                          value="Enter" />
                      </div>
                  </form>
              </div>
          </div>

          <!-- Chat Box -->
          <div id="messageArea" class="row">
              <div style="margin-top: 2em" class="col-md-4">
                  <div class="well">
                      <h3>Online Users</h3>
                      <ul class="list-group" id="users"></ul>
                  </div>

              </div>
              <div class="col-md-8">
                  <div class="chat" id="chat"></div>

                  <!-- Message Form (Enter Message) -->
                  <form id="messageForm">
                      <div class="form-group">
                          <label>Enter Message...</label>
                          <textarea class="form-control" id="message"></textarea>
                          <br />

                          <input type="submit" class="btn btn-primary"
                          value="Send Message" />
                      </div>
                  </form>
              </div>
          </div>
      </div>


    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright 2017 &copy; OptBnb</p>
      </div>
      <!-- /.container -->
    </footer>


      <!-- Chat box script -->
      <script>
               $(function(){
                   var socket = io.connect();
                   var $messageForm = $('#messageForm');
                   var $message = $('#message');
                   var $chat = $('#chat');
                   var $messageArea = $('#messageArea');
                   var $userFormArea = $('#userFormArea');
                   var $userForm = $('#userForm');
                   var $users = $('#users');
                   var $username = $('#username');
                   $messageForm.submit(function(e){
                       e.preventDefault();
                       // console.log("Submitted");
                       socket.emit('send message', $message.val());
                       $message.val('');
                   });
                   socket.on('new message', function(data){
                       $chat.append('<div class="well"><strong>'+data.user+'</strong>: '+data.msg+'</div>');
                   });
                   $userForm.submit(function(e){
                       e.preventDefault();
                       // console.log("Submitted");
                       socket.emit('new user', $username.val(), function(data){
                           if(data){
                               $userFormArea.hide();
                               $messageArea.show();
                           }
                       });
                       $username.val('');
                   });
                   socket.on('get users', function(data){
                       var html = '';
                       for(i = 0; i < data.length; i++){
                           html += '<li class="list-group-item">'+data[i]+'</li>';
                       }
                       $users.html(html);
                   });
               });
           </script>

    <!-- Bootstrap core JavaScript -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>

    <!-- Custom JavaScript for this theme -->
    <script src="js/scrolling-nav.js"></script>

  </body>


</html>

<script src="js/papaparse.min.js"></script>
<script src="js/gmaps.js"></script>
<script src="js/graphs.js"></script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFW1D1pXRv2vC52u-bGJ3IydUM_-DepUE&callback=initMap">
</script>

<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFW1D1pXRv2vC52u-bGJ3IydUM_-DepUE&libraries=places&callback=initAutocomplete"
         async defer></script> -->