Ada-C8 · canaanwest · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -5,8 +5,119 @@
     <title>Backbone Baseline</title>
   </head>
   <body>
+    <nav class="row">
+      <section class="columns medium-6 small-12">
+        <header>
+          <h1 class="logo">CJ's Vidja Shtore</h1>
+        </header>
+      </section>
+      <section class="columns medium-6 small-12">
+        <form>
+          <!-- <label for="query"></label> -->
+          <div class="row">
+            <section class="columns medium-9 small-12">
+              <input type="text" name="query" placeholder="Search database" />
+            </section>
+            <section class="columns medium-3 small-12">
+            <button class="btn-query button">Submit</button>
+            </section>
+          </div>
+        </form>
+      </section>
+
+    </nav>
+
     <main id="main-content">
-
+
+      <section class="workspace row">
+        <div class="form-errors">
+          <ul>
+          </ul>
+        </div>
+
+        <!-- <article id="sort-history" class="columns small-12 medium-4 large-4"> -->
+
+
+        <!-- toggles visability between database and container -->
+        <article id="database-container" class="columns small-12 medium-5 large-5">
+            <h4>Database Results</h4>
+            <table>
+              <thead>
+                <tr>
+                  <td>
+                    img
+                  </td>
+                  <td>
+                    Title
+                  </td>
+                  <td>
+                    release date
+                  </td>
+                  <td>
+                    status
+                  </td>
+                </tr>
+              </thead>
+              <tbody id="database-movies">
+
+              </tbody>
+            </table>
+
+        </article>
+
+        <article id="catalog-container" class="columns small-12 medium-6 large-6">
+          <h2>Catalog List</h2>
+          <ul id="catalog-movies">
+
+          </ul>
+        </article>
+
+      </section>
+      <footer>
+
+      </footer >
+
+      <script type="text/template" id="database-template">
+          <td>
+            <img src= <%- image_url %> />
+          </td>
+          <td>
+            <%- title %>
+          </td>
+          <td>
+            <%- release_date %>
+          </td>
+          <td>
+            <button class="btn-add button"><%- inInventory===false ? "Add" : "Nope" %> </button>
+          </td>
+      </script>
+
+      <script type="text/template" id="catalog-template">
+        <li class="catalog-movie">
+          <div class="row">
+
+            <div id="title-image" class="columns medium-6 small-12">
+              <p>
+                <span><%- title %></span>
+              </p>
+              <img src= "https://image.tmdb.org/t/p/w185/<%- image_url %>" />
+            </div>
+
+            <div id="overview" class="columns medium-6 small-12">
+              <p>
+                <span>Overview: </span><%- overview %>
+              </p>
+              <p>
+                <span>Release Date: </span><%- release_date %>
+              </p>
+            </div>
+
+          </div>
+        </li>
+
+      </script>
+
+
     </main>
 
     <script src="/app.bundle.js"></script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "backbone": "^1.3.3",
-    "foundation-sites": "^6.4.4-rc1",
+    "foundation-sites": "^6.3.1",
     "jquery": "^3.2.1",
     "underscore": "^1.8.3"
   }

diff --git a/spec/movie_spec.js b/spec/movie_spec.js
diff --git a/src/app.js b/src/app.js
@@ -2,13 +2,67 @@ import 'css/_settings.css';
 import 'foundation-sites/dist/css/foundation.css';
 import './css/styles.css';
 
+import Movie from 'models/movie';
+import MovieList from 'collections/movie_list';
+import MovieView from 'views/movie_view';
+import MovieListView from 'views/movie_list_view';
+import DatabaseListView from 'views/database_list_view'
+
 // Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
 
+
+
+// let database = new MovieList();
+let catalog = new MovieList([], {});
+
+
+const $catalogTemplate = _.template($("#catalog-template").html());
+const $databaseTemplate = _.template($("#database-template").html());
+
 // ready to go
 $(document).ready(function() {
+  catalog.fetch({
+    success: function(response) {
+      response.models.forEach((model) => {
+        model.attributes.models
+      })
+    }
+  });
+
+  const catalogView = new MovieListView({
+    model: catalog,
+    template: $catalogTemplate,
+    el: 'main',
+  });
+
+
+
+  $('.btn-query').click(function(event){
+    event.preventDefault();
+    console.log('submit button was clicked');
+    let query = $(`[name='query']`).val();
+
+    if (query.length > 0) {
+      let database = new MovieList([], {
+        query: query,
+      });
+
+      let databaseView = new DatabaseListView({
+        model: database,
+        template: $databaseTemplate,
+        el: 'main',
+        availableInventory: catalog
+      });
+
+      database.fetch();
+    } else {
+      $('.form-errors').append('<h2>There were no results</h2>')
+    }
+
+  });
+
 
-  $('#main-content').append('<p>Hello World!</p>');
 
 });
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,20 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+
+const MovieList = Backbone.Collection.extend({
+  urlRoot: 'http://localhost:3000/movies',
+  initialize(models, options){
+    this.query = options.query
+  },
+  url: function() {
+    if (this.query && this.query.length > 1) {
+      return this.urlRoot + '/?query=' + this.query
+    } else {
+      return this.urlRoot
+    }
+  },
+  model: Movie,
+
+});
+
+export default MovieList;
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,12 +1,87 @@
 @include foundation-everything;
 
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+body {
+  color: #465362;
+  padding: 10px;
+}
+
+h1 {
+  font-size: 2em;
+  padding-top: 25px;
+}
+
+h1, h2, h3 {
+  text-align: center;
+}
+
 main {
-    background: lightblue;
+  background: white;
+  margin: 10px;
+}
+
+nav {
+  background: #C3DFE0;
+  position: sticky;
+  box-shadow: 0 2px 3px -2px #465362;
+}
+input[type="text"], input[type="text"]:focus {
+  margin: 0;
+  padding-left: 5px;
+  font-size: 1.25em;
+  width: 100%;
+  border-width: 0;
+  box-shadow: 0 -2px -5px -2px #465362;
+}
+
+input[type="text"]:focus{
+  box-shadow: 0 1px 5px 1px #8CD195;
+}
+
+article {
+  margin: 20px 0;
+}
+
+table td, #database-container h2 {
+  color: #465362;
+}
+
+#database-container, #catalog-container {
+  background: #C3DFE0;
+  color: #233831;
+  /* border: 1px solid #ADA8B6; */
+  box-shadow: 0 -2px 5px -2px #465362;
+}
+#database-container {
+  background: #C2DC85;
+}
+
+ul#catalog-movies {
+  list-style-type: none;
+}
+
+.catalog-movie {
+  background: white;
+  margin: 15px 0;
+  box-shadow: 0 2px 5px -2px #465362;
+}
+.catalog-movie span{
+  font-weight: bold;
 }
 
-header {
-  background-color: lightgreen;
-  padding: 0.5rem;
+#title-image{
+  display: block;
+  text-align: center;
+}
+#title-image img {
+  width: 100%;
+}
+#overview {
+  padding-top: 10px;
 }
 
 #completed-checkbox {
@@ -37,8 +112,27 @@ aside label {
 div {
   display: inline;
 }
-/*
-* {
-  border-style: solid;
+
+
+h3 {
+  background: #BCD979;
+  box-shadow: 0 2px 5px -2px #465362;
 }
-*/
+
+h4 {
+  text-align: center;
+}
+
+#database-container {
+  height: 40vw;
+  overflow: scroll;
+}
+
+#catalog-container {
+  height: 40vw;
+  overflow: scroll;
+}
+/*
+button.btn-add.alreadyAdded {
+  background: grey;
+} */
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+  // urlRoot: 'https://localhost:3000/movies/'
+});
+
+export default Movie;