2 files changed, 96 insertions(+), 24 deletions(-)

M public/css/main.css
M public/index.html

@@ 12,15 12,21 @@ heading h1 {
 main {
   min-width: 300px;
   max-width: 600px;
-  height: 80vh;
+  padding: 10px;
+  float: left;
+  display: table;
   border-radius: 5px;
   background: ivory;
+  color: #333;
 }
 
-main {
+aside {
+  max-width: 200px;
+  margin: 20px;
   padding: 10px;
-  color: #333;
-  display: table;
+  float: left;
+  background: lightgrey;
+  color: #555;
 }
 
 main table {


@@ 37,3 43,11 @@ th {
   font-style: italic;
   color: #555;
 }
+
+aside h1 {
+  font-size: 1.2rem;
+}
+
+aside form input {
+  max-width: 100px;
+}

@@ 10,25 10,65 @@
     <heading>
       <h1>Grocery list</h1>
     </heading>
-    <main id="app">
-      <table v-if="itemsLoaded">
-        <thead>
-          <tr>
-            <th>Priority</th>
-            <th>Section</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="item in items">
-            <td>{{ item.priority | priorityToString }}</td>
-            <td>{{ item.section | titleCase }}</td>
-            <td>{{ item.name | titleCase }}</td>
-          </tr>
-        </tbody>
-      </table>
-      <p id="loading" v-else>… loading items …</p>
-    </main>
+
+    <div id="app">
+      <main>
+        <table v-if="itemsLoaded">
+          <thead>
+            <tr>
+              <th>Priority</th>
+              <th>Section</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in items">
+              <td>{{ item.priority | priorityToString }}</td>
+              <td>{{ item.section | titleCase }}</td>
+              <td>{{ item.name | titleCase }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <p id="loading" v-else>… loading items …</p>
+      </main>
+
+      <aside>
+        <h1>Add an item</h1>
+
+        <form>
+          <p>
+            <label for="item-name">Item name</label>
+            <input
+              type="text"
+              v-model.lazy.trim="newItem.name"
+              id="item-name"
+              name="item-name"
+            />
+          </p>
+          <p>
+            <label for="section">Section</label>
+            <input
+              type="text"
+              v-model.lazy.trim="newItem.section"
+              id="section"
+              name="section"
+            />
+          </p>
+          <p>
+            <label for="priority">Priority</label>
+            <select v-model.number="newItem.priority">
+              <option
+                v-for="(priorityName, priority) in priorities"
+                v-bind:value="priority"
+                >{{ priorityName }}</option
+              >
+            </select>
+          </p>
+          <!-- <pre>New item: {{ newItem }}</pre> -->
+          <button v-on:click.prevent="addItem">Add</button>
+        </form>
+      </aside>
+    </div>
 
     <script>
       const priorities = ["Today", "Soon", "Later"];


@@ 51,13 91,31 @@
       const groceries = new Vue({
         el: "#app",
         data: {
-          items: {}
+          priorities: Object.assign({}, priorities),
+          items: {},
+          newItem: {
+            name: "",
+            section: "",
+            priority: 0
+          }
         },
         computed: { itemsLoaded: vm => vm.items.length >= 0 },
         filters: {
           titleCase: s => s.charAt(0).toUpperCase() + s.slice(1),
           priorityToString: i => priorities[i] || "Undefined"
         },
+        methods: {
+          addItem: function(e) {
+            this.items.push({
+              id: this.items.length,
+              name: this.newItem.name,
+              section: this.newItem.section,
+              priority: this.newItem.priority
+            });
+            this.newItem.name = "";
+            this.newItem.section = "";
+          }
+        },
         mounted: function() {
           this.items = testData;
         }