Add dynamic pages that can be created from the backend (#96)

* Add modular pages to the website

app/components/header-nav.js

@@ -1,10 +1,8 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 export default Component.extend({
     session: service(),
-    settings: service(),
     init() {
       this._super(...arguments);
       this.menuItems = [
@@ -46,27 +44,6 @@ export default Component.extend({
         }
     ];
   },
-  getMenuItems: computed('menuItems', 'settings.settings.design_presentation_pages_enabled', function() {
-
-    // const enabled = this.get('settings.settings.design_presentation_pages_enabled');
-    // /*
-    // * The page is only visible when authenticated
-    // */
-    // if (this.get('session.isAuthenticated')) {
-    //   //
-
-    // all routes are visible when logged in
-    if (this.get('session.isAuthenticated')) {
-      return this.menuItems;
-    }
-
-    // Filter join and design presentation pages if needed.
-    let items = this.menuItems;
-    if (!this.get('settings.settings.design_presentation_pages_enabled')) {
-      items = items.filter(item => item.link !== 'design-presentation');
-    }
-    return items;
-  }),
   showMobileMenu: false,
   actions: {
     toggleMobileMenu() {

app/controllers/admin/page-item/edit.js

@@ -0,0 +1,28 @@
+import Controller from '@ember/controller';
+import saveModelMixin from "roboteam-website/mixins/save-model"
+import { computed } from '@ember/object'
+
+export default Controller.extend(saveModelMixin, {
+  init() {
+    this._super(...arguments);
+    this.requiredProperties = ["title", "content", "page"];
+  },
+  noticeDuringSave: "Updating page item...",
+  noticeAfterSave: "Page item updated!",
+  modelName: "model",
+  transitionAfterSuccess: "admin.page-item",
+  transitionToIndexRoute: true,
+  imagePath: "images/page/items",
+  allPages: computed(function() {
+    return this.store.findAll('page');
+  }),
+  actions: {
+    customSave: function() {
+      if (this.get('file') || this.get('model.imageSrc')) {
+        this.send('saveModelWithImage');
+      } else {
+        this.send('saveModel');
+      }
+    }
+  }
+});

app/controllers/admin/page-item/index.js

@@ -0,0 +1,8 @@
+import Controller from '@ember/controller';
+import removeModelAction from 'roboteam-website/mixins/remove-model-action';
+import changeOrder from 'roboteam-website/mixins/change-order';
+
+export default Controller.extend(removeModelAction, changeOrder, {
+  modelType: "pageitem",
+  modelNameProperty: "title",
+});

app/controllers/admin/page-item/new.js

@@ -0,0 +1,3 @@
+import EditController from "roboteam-website/controllers/admin/page-item/edit";
+
+export default EditController.extend({ });

app/controllers/admin/page/edit.js

@@ -0,0 +1,15 @@
+import Controller from '@ember/controller';
+import saveModelMixin from "roboteam-website/mixins/save-model"
+
+export default Controller.extend(saveModelMixin, {
+  init() {
+    this._super(...arguments);
+    this.requiredProperties = ["name", "description"];
+  },
+  noticeDuringSave: "Updating page...",
+  noticeAfterSave: "Page updated!",
+  modelName: "model",
+  transitionAfterSuccess: "admin.page",
+  transitionToIndexRoute: true,
+  imagePath: "images/page",
+});

app/controllers/admin/page/index.js

@@ -0,0 +1,8 @@
+import Controller from '@ember/controller';
+import removeModelAction from 'roboteam-website/mixins/remove-model-action';
+import changeOrder from 'roboteam-website/mixins/change-order';
+
+export default Controller.extend(removeModelAction, changeOrder, {
+  modelType: "page",
+  modelNameProperty: "name",
+});

app/controllers/admin/page/new.js

@@ -0,0 +1,3 @@
+import EditController from "roboteam-website/controllers/admin/page/edit";
+
+export default EditController.extend({ });

app/controllers/admin/subteams/edit.js

@@ -12,4 +12,4 @@ export default Controller.extend(saveModelMixin, {
   transitionAfterSuccess: "admin.subteams",
   transitionToIndexRoute: true,
   imagePath: "images/subteams",
-});
+});

app/controllers/page.js

@@ -0,0 +1,6 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default Controller.extend({
+  settings: service(),
+});

app/models/page.js

@@ -0,0 +1,19 @@
+import DS from 'ember-data';
+
+const { attr, Model } = DS;
+import { computed } from '@ember/object';
+
+export default Model.extend({
+  createdAt: attr('date'),
+  updatedAt: attr('date'),
+  name: attr('string'),
+  imageSrc: attr('string'),
+  description: attr('string'),
+  order: attr('number'),
+
+  namedId: computed('name', function() {
+    if (!this.get('name')) return '';
+    const trimmed = this.get('name').trim();
+    return trimmed.toLowerCase().replace(' ', '_');
+  }),
+});

app/models/pageitem.js

@@ -0,0 +1,45 @@
+import DS from 'ember-data';
+
+const { attr, Model } = DS;
+import { computed } from '@ember/object'
+
+export default Model.extend({
+  title: attr('string'),
+  content: attr('string'),
+  imageSrc: attr('string'),
+  videoSrc: attr('string'),
+  page: attr('string'),
+  order: attr('number'),
+  createdAt: attr('date'),
+  updatedAt: attr('date'),
+
+  vimeoId: computed('videoSrc', function() {
+    const src = this.get('videoSrc');
+    if (!src) return src;
+    if (src.startsWith('https://vimeo.com/')) {
+      return src.replace('https://vimeo.com/', '');
+    }
+
+    if (src.startsWith('http://vimeo.com/')) {
+      return src.replace('http://vimeo.com/', '');
+    }
+
+    if (src.startsWith('vimeo.com/')) {
+      return src.replace('vimeo.com/', '');
+    }
+
+    return src.replace(/\D/g, '');
+  }),
+
+  showVideo: computed('vimeoId', function() {
+    return this.get('vimeoId') && this.get('vimeoId') !== "";
+  }),
+
+  showImage: computed('imageSrc', function() {
+    return this.get('imageSrc') && this.get('imageSrc') !== "";
+  }),
+
+  fullwidth: computed('showVideo', 'showImage', function() {
+    return !this.get('showVideo') && !this.get('showImage');
+  })
+});

app/router.js

@@ -17,7 +17,6 @@ Router.map(function() {
   this.route('login')
   this.route('previousteams')
 
-
   this.route('news', function() {
     this.route('show', { path: '/:article_id' });
   });
@@ -88,9 +87,23 @@ Router.map(function() {
       this.route('edit',  { path: 'edit/:subteam_id' });
       this.route('new');
     });
+
+    this.route('page', function() {
+      this.route('edit',  { path: 'edit/:page_id' });
+      this.route('new');
+    });
+
+    this.route('page-item', function() {
+      this.route('edit',  { path: 'edit/:pageitem_id' });
+      this.route('new');
+    });
   });
 
   this.route('newsletter');
 
+  this.route('404', { path: '/404' });
+
+  this.route('page', { path: ':namedId' });
+
   this.route('404', { path: '/*path' });
 });

app/routes/admin/page-item/edit.js

@@ -0,0 +1,7 @@
+import EditRoute from 'roboteam-website/routes/base/edit';
+
+export default EditRoute.extend({
+  modelName: "pageitem",
+  modelRouteParam: "pageitem_id",
+  useVideo: false,
+});

app/routes/admin/page-item/index.js

@@ -0,0 +1,5 @@
+import IndexRoute from 'roboteam-website/routes/base/index';
+
+export default IndexRoute.extend({
+  modelName: "pageitem"
+});

app/routes/admin/page-item/new.js

@@ -0,0 +1,5 @@
+import NewRoute from 'roboteam-website/routes/base/new';
+
+export default NewRoute.extend({
+  modelName: "pageitem",
+});

app/routes/admin/page/edit.js

@@ -0,0 +1,6 @@
+import EditRoute from 'roboteam-website/routes/base/edit';
+
+export default EditRoute.extend({
+  modelName: "page",
+  modelRouteParam: "page_id"
+});

app/routes/admin/page/index.js

@@ -0,0 +1,5 @@
+import IndexRoute from 'roboteam-website/routes/base/index';
+
+export default IndexRoute.extend({
+  modelName: "page"
+});

app/routes/admin/page/new.js

@@ -0,0 +1,5 @@
+import NewRoute from 'roboteam-website/routes/base/new';
+
+export default NewRoute.extend({
+  modelName: "page"
+});

app/routes/news/show.js

@@ -3,4 +3,4 @@ import { ShowRouteUnauthenticated } from 'roboteam-website/routes/base/show';
 export default ShowRouteUnauthenticated.extend({
   modelName: "article",
   modelRouteParam: "article_id"
-});
+});

app/routes/page.js

@@ -0,0 +1,24 @@
+import { ShowRouteUnauthenticated } from 'roboteam-website/routes/base/show';
+import { hash } from 'rsvp';
+
+export default ShowRouteUnauthenticated.extend({
+  modelName: "page",
+  modelRouteParam: "name",
+  model(params) {
+    return this.store.query("page", { reload: true }).then(pages => {
+      const page = pages.filter(page => page.namedId === params["namedId"])[0];
+      if (page === undefined) {
+        return this.transitionTo('/404');
+      }
+      return this.store.query('pageitem', { orderBy: 'order', reload: true }).then(pageItems => {
+        pageItems = pageItems.filter(item => item.page === page.namedId);
+        return hash({
+          page,
+          pageItems,
+          params,
+          pages
+        });
+      });
+    });
+  }
+});

app/styles/app.scss

@@ -15,4 +15,4 @@
 @import 'news';
 @import '404';
 @import 'design-presentation';
-
+@import 'page';

app/styles/page.scss

@@ -0,0 +1,33 @@
+.page-header {
+  height: 360px;
+}
+
+.page-header-gradient {
+    position: absolute;
+    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);
+    height: 360px;
+    width: 100%;
+}
+
+.page-header-image {
+  position: absolute;
+  width: 100%;
+  height: 360px;
+  object-fit: cover;
+  background-position: center;
+  z-index:-1;
+  background: #000;
+}
+
+.vimeo-container {
+  padding:56.25% 0 0 0;
+  position:relative;
+
+  .vimeo-video {
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+  }
+}

app/templates/admin.hbs

@@ -50,11 +50,19 @@
         <li class="list-group-item">
           {{#link-to "admin.subteams"}} [Design Presentation] Subteams {{/link-to}}
         </li>
+
+        <li class="list-group-item">
+          {{#link-to "admin.page"}} Pages {{/link-to}}
+        </li>
+
+        <li class="list-group-item">
+          {{#link-to "admin.page-item"}} Page items {{/link-to}}
+        </li>
       </ul>
     </div>
 
     <div class="col-12 col-md-9">
       {{outlet}}
     </div>
   </div>
-</div>
+</div>

app/templates/admin/page-item/edit.hbs

@@ -0,0 +1 @@
+{{partial "admin/page-item/form"}}