Create shelves view without adding to routes

app/fonts/fontello/css/icons-codes.css

@@ -9,6 +9,9 @@
 .icon-check:before { content: '\e807'; } /* '' */
 .icon-plus:before { content: '\e808'; } /* '' */
 .icon-search:before { content: '\e809'; } /* '' */
+.icon-delete:before { content: '\e80a'; } /* '' */
+.icon-edit:before { content: '\e80b'; } /* '' */
+.icon-close:before { content: '\e80c'; } /* '' */
 .icon-loading:before { content: '\e839'; } /* '' */
 .icon-external:before { content: '\f08e'; } /* '' */
 .icon-star-half:before { content: '\f123'; } /* '' */

app/fonts/fontello/css/icons-ie7-codes.css

@@ -9,6 +9,9 @@
 .icon-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-search { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-delete { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-edit { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-close { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-loading { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-external { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-star-half { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

app/fonts/fontello/css/icons-ie7.css

@@ -20,6 +20,9 @@
 .icon-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-search { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-delete { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-edit { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-close { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-loading { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-external { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-star-half { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

app/fonts/fontello/css/icons.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'icons';
-  src: url('../font/icons.eot?3055787');
-  src: url('../font/icons.eot?3055787#iefix') format('embedded-opentype'),
-       url('../font/icons.woff2?3055787') format('woff2'),
-       url('../font/icons.woff?3055787') format('woff'),
-       url('../font/icons.ttf?3055787') format('truetype'),
-       url('../font/icons.svg?3055787#icons') format('svg');
+  src: url('../font/icons.eot?85557842');
+  src: url('../font/icons.eot?85557842#iefix') format('embedded-opentype'),
+       url('../font/icons.woff2?85557842') format('woff2'),
+       url('../font/icons.woff?85557842') format('woff'),
+       url('../font/icons.ttf?85557842') format('truetype'),
+       url('../font/icons.svg?85557842#icons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'icons';
-    src: url('../font/icons.svg?3055787#icons') format('svg');
+    src: url('../font/icons.svg?85557842#icons') format('svg');
   }
 }
 */
@@ -65,6 +65,9 @@
 .icon-check:before { content: '\e807'; } /* '' */
 .icon-plus:before { content: '\e808'; } /* '' */
 .icon-search:before { content: '\e809'; } /* '' */
+.icon-delete:before { content: '\e80a'; } /* '' */
+.icon-edit:before { content: '\e80b'; } /* '' */
+.icon-close:before { content: '\e80c'; } /* '' */
 .icon-loading:before { content: '\e839'; } /* '' */
 .icon-external:before { content: '\f08e'; } /* '' */
 .icon-star-half:before { content: '\f123'; } /* '' */

app/fonts/fontello/demo.html

@@ -229,11 +229,11 @@ body {
 }
 @font-face {
       font-family: 'icons';
-      src: url('./font/icons.eot?21491342');
-      src: url('./font/icons.eot?21491342#iefix') format('embedded-opentype'),
-           url('./font/icons.woff?21491342') format('woff'),
-           url('./font/icons.ttf?21491342') format('truetype'),
-           url('./font/icons.svg?21491342#icons') format('svg');
+      src: url('./font/icons.eot?70071935');
+      src: url('./font/icons.eot?70071935#iefix') format('embedded-opentype'),
+           url('./font/icons.woff?70071935') format('woff'),
+           url('./font/icons.ttf?70071935') format('truetype'),
+           url('./font/icons.svg?70071935#icons') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -312,10 +312,13 @@ body {
       <div class="row">
         <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-plus">&#xe808;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe808</span></div>
         <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-search">&#xe809;</i> <span class="i-name">icon-search</span><span class="i-code">0xe809</span></div>
-        <div class="the-icons span3" title="Code: 0xe839"><i class="demo-icon icon-loading animate-spin">&#xe839;</i> <span class="i-name">icon-loading</span><span class="i-code">0xe839</span></div>
-        <div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-external">&#xf08e;</i> <span class="i-name">icon-external</span><span class="i-code">0xf08e</span></div>
+        <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-delete">&#xe80a;</i> <span class="i-name">icon-delete</span><span class="i-code">0xe80a</span></div>
+        <div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-edit">&#xe80b;</i> <span class="i-name">icon-edit</span><span class="i-code">0xe80b</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xe80c"><i class="demo-icon icon-close">&#xe80c;</i> <span class="i-name">icon-close</span><span class="i-code">0xe80c</span></div>
+        <div class="the-icons span3" title="Code: 0xe839"><i class="demo-icon icon-loading animate-spin">&#xe839;</i> <span class="i-name">icon-loading</span><span class="i-code">0xe839</span></div>
+        <div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-external">&#xf08e;</i> <span class="i-name">icon-external</span><span class="i-code">0xf08e</span></div>
         <div class="the-icons span3" title="Code: 0xf123"><i class="demo-icon icon-star-half">&#xf123;</i> <span class="i-name">icon-star-half</span><span class="i-code">0xf123</span></div>
       </div>
     </div>

app/fonts/fontello/font/icons.svg

@@ -26,6 +26,12 @@
 
 <glyph glyph-name="search" unicode="&#xe809;" d="M335 246l25-25q-28-28-85-86t-73-74l-27 27q16 15 74 73t86 85z m245 551q136 0 234-97t97-234-97-234-234-96q-64 0-123 24l-255-257-184 185 256 255q-26 63-26 123 0 137 98 234t234 97z m0-551q91 0 155 64t64 156-64 155-155 64-156-64-64-155 64-156 156-64z" horiz-adv-x="928" />
 
+<glyph glyph-name="delete" unicode="&#xe80a;" d="M729 636q21 0 37-15t15-36-15-37-37-15l0-417q0-86-61-147t-147-62l-261 0q-86 0-147 62t-60 147l0 417q-22 0-37 15t-16 37 16 36 37 15l51 0 0 53q0 42 30 73t75 31l364 0q43 0 74-31t31-73l0-53 51 0z m-520 53l0-53 364 0 0 53-364 0z m416-573l0 417-469 0 0-417q0-43 31-74t73-31l261 0q43 0 73 31t31 74z m-390 338q10 0 18-8t7-17l0-313q0-10-7-18t-18-8-18 8-8 18l0 313q0 10 8 17t18 8z m104 0q10 0 18-8t8-17l0-313q0-10-8-18t-18-8-18 8-8 18l0 313q0 10 8 17t18 8z m104 0q10 0 18-8t8-17l0-313q0-10-8-18t-18-8-19 8-8 18l0 313q0 10 8 17t19 8z m105 0q10 0 17-8t8-17l0-313q0-10-8-18t-17-8-19 8-8 18l0 313q0 10 8 17t19 8z" horiz-adv-x="781" />
+
+<glyph glyph-name="edit" unicode="&#xe80b;" d="M966 671q24-23 24-55t-24-55l-185-185 0-469q0-21-15-36t-37-16l-676 0q-22 0-37 16t-16 36l0 677q0 21 16 37t37 15l468 0 185 185q24 24 55 24t55-24z m-523-486l327 328-112 112-328-327z m-134 69l4-86 88-4z m369-295l0 312-167-160q-20-20-63-33t-80-14l-159 0 0 159q0 41 11 82t31 61l165 167-312 0 0-574 574 0z m130 590l67 67-114 114-67-67z" horiz-adv-x="990" />
+
+<glyph glyph-name="close" unicode="&#xe80c;" d="M596 632q32-31 32-74t-32-74l-135-135 135-135q32-31 32-73t-32-74q-30-30-73-30t-74 30l-135 135-135-135q-30-30-74-30t-74 30q-31 31-31 74t31 73l135 135-135 135q-31 32-31 74t31 74q30 31 74 31t74-31l135-135 135 135q30 31 74 31t73-31z" horiz-adv-x="628" />
+
 <glyph glyph-name="loading" unicode="&#xe839;" d="M855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
 
 <glyph glyph-name="external" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />

app/fonts/fontello/fontello-config.json

@@ -83,6 +83,24 @@
       "css": "search",
       "code": 59401,
       "src": "iconic"
+    },
+    {
+      "uid": "jqzwo6i8oicjbn049sh2856d8anrqoli",
+      "css": "edit",
+      "code": 59403,
+      "src": "typicons"
+    },
+    {
+      "uid": "csuoy0rqoun3unhsgjoy2uumpldzbfmt",
+      "css": "delete",
+      "code": 59402,
+      "src": "typicons"
+    },
+    {
+      "uid": "1dq4tek4k8ea7zlj4kc3w83itnutaxg5",
+      "css": "close",
+      "code": 59404,
+      "src": "typicons"
     }
   ]
 }

app/views/shelves/controller.js

@@ -0,0 +1,37 @@
+import { ViewController } from '../controller';
+
+export class ShelvesController extends ViewController {
+  constructor(state, i18n) {
+    // Super passes state, view name, and default state to ViewController,
+    // which stores state in this.appState and the view controller's state to this.state
+    super(state, i18n, 'shelves', {
+      openModal: null,  // state value for edit modals
+      myShelves: [],  // array of objects in sort order with name, id, and deletability.
+      loadedShelves: {},  // object key is shelf id with name and shelfItems
+    });
+
+    // If using controller methods in an input's onchange or onclick instance,
+    // either bind the class's 'this' instance to the method first...
+    // or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead.
+  }
+
+  get openModal () {
+    return this.state.openModal;
+  }
+  set openModal (modalId) {
+    this.state.openModal = modalId;
+  }
+
+  get targetShelf () {
+    return typeof this.appState.query.shelf !== 'undefined' ? parseInt(this.appState.query.shelf) : null;
+  }
+
+  getUserShelves () {
+    return [
+      {id:1,name:'Test Shelf',isDeletable:false,isPublilc:false},
+      {id:1,name:'Deletable Shelf',isDeletable:true,isPublilc:false},
+      {id:1,name:'Public Shelf',isDeletable:true,isPublilc:true},
+    ];
+    // return fetch('/api/shelves/get').then(response => response.json);
+  }
+}

app/views/shelves/index.js

@@ -0,0 +1,19 @@
+import html from 'choo/html';
+
+import { ShelvesController } from './controller';  // The controller for this view, where processing should happen.
+import { shelfView } from './shelf';
+import { shelvesView } from './shelves';
+
+// This is the view function that is exported and used in the view manager.
+export const shelvesView = (state, emit, i18n) => {
+  const controller = new ShelvesController(state, i18n);
+
+  // Returning an array in a view allows non-shared parent HTML elements.
+  // This one doesn't have the problem right now, but it's good to remember.
+  return [
+    (controller.targetShelf !== null
+      ? shelfView(controller, emit)
+      : shelvesView(controller, emit)
+    ),
+  ];
+}

app/views/shelves/shelf.js

@@ -0,0 +1,11 @@
+import html from 'choo/html';
+
+export const shelfView = (homeController, emit) => {
+  const { __ } = homeController.i18n;
+
+  return [
+    html`<section>
+      <h2>To Do</h2>
+    </section>`,
+  ];
+}

app/views/shelves/shelves/editModal.js

@@ -0,0 +1,12 @@
+import html from 'choo/html';
+
+export const editModal = (shelf, shelvesController) => {
+  const { __ } = shelvesController.i18n;
+  
+  // Should add a scale of publicity: private, friends only, friends & followers, public
+  return [
+    html`<article>
+      <p>To Do</p>
+    </article>`,
+  ];
+}

app/views/shelves/shelves/index.js

@@ -0,0 +1,66 @@
+import html from 'choo/html';
+import modal from '../partials/modal';
+
+export const shelvesView = (shelvesController, emit) => {
+  const { __ } = shelvesController.i18n;
+
+  if (!shelvesController.isLoggedIn) {
+    return [
+      html`<section>
+        <h2>${__('shelves.no_shelf_selected')}</h2>
+        <article class="card">
+          <header>
+            <p>${__('shelves.not_logged_in')}</p>
+          </header>
+          <footer>
+            <button>${__('global.menu_login')}</button>
+          </footer>
+        </article>
+      </section>`,
+    ];
+  }
+
+  if (shelvesController.state.myShelves.length <= 0) {
+    shelvesController.getUserShelves().then(result => {
+      emit('render');
+    });
+  }
+  
+  // Should add a scale of publicity: private, friends only, friends & followers, public
+  return [
+    html`<section>
+      <h2>${__('shelves.title')}</h2>
+      ${controller.state.myShelves.map(shelf => {
+        return html`<article class="card">
+          <header>
+            <h3>
+              <a href="/shelves?shelf=${shelf.id}">${shelf.name}</a>
+            </h3>
+            ${shelf.isDeletable === true
+            ? [
+              modal(`editShelf${shelf.id}`, shelvesController, editModal(shelf, shelvesController), {
+                buttonHTML: html`<button class="small pseudo pull-right tooltip-left" data-tooltip=${__('interaction.edit')}>
+                  <i class="icon-edit"></i>
+                </button>`,
+                headerText: `${__('shelves.edit.editing')}: ${shelf.name}`,
+                footerHTML: html`<footer>
+                  <button>
+                    ${__('shelves.edit.save')}
+                  </button>
+                  <label for=${modalId} class="button dangerous">
+                    ${__('interaction.close')}
+                  </label>
+                </footer>`,
+              }),
+
+              html`<button class="small pseudo pull-right tooltip-left" data-tooltip=${__('interaction.delete')}>
+                <i class="icon-delete"></i>
+              </button>`,
+            ]
+            : null}
+          </header>
+        </article>`;
+      })}
+    </section>`,
+  ];
+}

server/routes/shelf.js

@@ -7,6 +7,19 @@ async function routes(fastify, options) {
     return false;
   });
 
+  fastify.post('/api/shelves/get', async (request, reply) => {
+    if (!request.isLoggedInUser) {
+      return reply.code(400).send({
+        error: true,
+        message: 'api.not_logged_in',
+      });
+    }
+
+    return request.user.getShelves({
+      attributes: ['id', 'name', 'isDeletable', 'isPublic'],
+    });
+  });
+
   fastify.post('/api/shelf/create', async (request, reply) => {
     if (!request.isLoggedInUser) {
       return reply.code(400).send({