{% extends "templates/_base.html" %}

{% block title %}Middlebury Menu API{% endblock %}

{% set date = "February 2, 2014" %}

{% block styles %}
  <style>
  input[type="text"] {
    font-family: inherit;
    font-size: inherit;
    background-color: inherit;
    border: none;
    color: inherit;
    border-bottom: 1px solid #0086b3;
    padding: inherit;
  }
  input[type="submit"] {
    color: #333;
    background-color: #fff;
    margin-left: 5px;
    display: inline-block;
    padding: 2px 4px;
    font-size: 90%;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  input[type="submit"]:hover {
    background-color: #f2f2f2;
  }
  input:active,
  input:focus {
    outline: none;
  }
  #output {
    height: 500px;
    width: calc(100% - 12px);
    border: 1px solid #0086b3;
    margin-top: 10px;
    overflow: scroll;
    padding: 5px;
  }
  </style>
{% endblock styles %}

{% block content %}
<article>
<p class="date">Updated November 1, 2015</p>
<h1>Middlebury Menu API</h1>

<h2>A REST API for the Middlebury menu</h2>

<p>This project is open source. The code can be found at
<a href="https://github.com/danasilver/midd-menu-api">github.com/danasilver/midd-menu-api</a>.</p>

<h3>Endpoints</h3>

<p>API base url: <code>middmenuapi.herokuapp.com</code>.</p>

<p>Get today's menu.</p>

<pre><code>
GET /
</code></pre>

<p>Get the menu for yyyy-mm-dd.</p>

<pre><code>
GET /yyyy-mm-dd
</code></pre>

<h3>Try It Out</h3>

<form>
<p>Enter a date in yyyy-mm-dd format or leave blank to request today's menu.</p>
<code>middmenuapi.herokuapp.com/<input type="text" name="date" placeholder="Click to enter date"></code>
<input type="submit" value="Make Request">
</form>
<pre id="output"></pre>

<h3>Development</h3>

<h4>Clone the repo and install the <a href="https://npmjs.org/">npm</a>
dependencies</h4>

<p>The project also depends on <a href="http://nodejs.org/">node.js</a> and
<a href="http://www.mongodb.org/">MongoDB</a>, which you will need to install
for development.</p>

<pre><code class="sh">
$ git clone https://github.com/danasilver/midd-menu-api.git
$ npm install
</code></pre>

<h4>Start MongoDB and the node.js server</h4>

<pre><code>
$ mongod &
$ node app.js
</code></pre>
</article>

{% include "includes/footer.html" %}

<script src="/vendor/highlight/highlight.pack.js" charset="utf-8"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
function requestMenu(date) {
  var xhr = new XMLHttpRequest;
  xhr.open("GET", "//middmenuapi.herokuapp.com/" + date);
  xhr.onload = loadMenu;
  xhr.send();
}

function loadMenu(response) {
  var string = response.target.responseText,
  json = JSON.parse(string),
  formattedString = JSON.stringify(json, null, 2)

  document.getElementById("output").innerHTML = formattedString;
}

var form = document.querySelector("form");
form.addEventListener("submit", function(e) {
  e.preventDefault();
  var date = document.querySelector("input[name='date']").value;

  if (/^\d{4}-\d{2}-\d{2}$/.test(date) || date === "") {
    requestMenu(date)
  }
  else {
    var errorMessage = "Proper date format is yyyy-mm-dd."
    document.getElementById("output").innerHTML = errorMessage;
  }
}, true);

requestMenu("");
</script>
{% endblock %}