+ Events Page

src/client/api/API.js

@@ -3,6 +3,7 @@ import APIGallery from './APIGallery';
 import APIDocument from './APIDocument';
 import APICollective from './APICollective';
 import APISchedule from './APISchedule';
+import APIEvent from './APIEvent';
 
 export default class API {
     constructor(request) {
@@ -11,5 +12,6 @@ export default class API {
         this.document = new APIDocument(request);
         this.collective = new APICollective(request);
         this.schedule = new APISchedule(request);
+        this.event = new APIEvent(request);
     }
 }

src/client/api/APIEvent.js

@@ -0,0 +1,13 @@
+import EndPoint from './EndPoint';
+
+export default class APIEvent extends EndPoint {
+    list(skip=1, limit=10) {
+        let url = `/events?skip=${skip}&limit=${limit}`;
+        return this.request.get(url, {cache: true});
+    }
+
+    post(id) {
+        let url = `/event/${id}`;
+        return this.request.get(url, {cache: true});
+    }
+}

src/client/app.js

@@ -18,8 +18,11 @@ import ScheduleSlider from './components/ScheduleSlider';
 import ScheduleSlide from './components/ScheduleSlide';
 import ScheduleRecord from './components/ScheduleRecord';
 import FooterLinks from './components/FooterLinks';
+import EventPost from './components/EventPost';
 
 import PageSchool from './components/PageSchool';
+import PageEvents from './components/PageEvents';
+import PageEvent from './components/PageEvent';
 import PageSchedule from './components/PageSchedule';
 import PageCollective from './components/PageCollective';
 import PageGallery from './components/PageGallery';
@@ -92,12 +95,15 @@ app.run(($location, $rootScope, $http) => {
     TimelineRecord,
     TimelineRecordPost,
     TimelineRecordInstagram,
+    EventPost,
     Document,
     Award,
     GalleryItem,
     AlbumCollection,
     TeacherProfile,
     PageSchool,
+    PageEvent,
+    PageEvents,
     PageSchedule,
     PageCollective,
     PageGallery,

src/client/components/EventPost.js

@@ -0,0 +1,15 @@
+import template from '../../templates/components/event-post.html';
+
+export default function (app) {
+    app.component('eventPost', {
+        bindings: {
+            post: '<'
+        },
+        template: template,
+        controllerAs: '$',
+        controller: function ($sce) {
+            this.message = $sce.trustAsHtml(this.post.post);
+            this.url = `/event/${this.post.id}`;
+        }
+    });
+};

src/client/components/PageEvent.js

@@ -0,0 +1,21 @@
+import template from '../../templates/components/page-event.html';
+
+export default function (app) {
+    app.component('pageEvent', {
+        template: template,
+        controllerAs: '$',
+        controller: function ($rootScope, $routeParams, api, menu) {
+            this.pageClass = 'page-event';
+            menu.activate('/events');
+
+            let id = $routeParams.event;
+            if(!id) return;
+
+            api.event.post(id)
+                .success(post => {
+                    $rootScope.title = post.title;
+                    this.posts = [post];
+                });
+        }
+    });
+};

src/client/components/PageEvents.js

@@ -0,0 +1,17 @@
+import template from '../../templates/components/page-events.html';
+
+export default function (app) {
+    app.component('pageEvents', {
+        template: template,
+        controllerAs: '$',
+        controller: function (api, menu) {
+            this.pageClass = 'page-events';
+            menu.activate('/events');
+
+            api.event.list()
+                .success(posts => {
+                    this.posts = posts;
+                });
+        }
+    });
+};

src/client/config.js

@@ -25,6 +25,15 @@ export let routes = [
         template: '<page-school></page-school>',
         title: 'ДХШ Шлиссельбурга'
     },
+    {
+        name: '/events/:page?/:pageNumber?',
+        template: '<page-events></page-events>',
+        title: 'События Школы'
+    },
+    {
+        name: '/event/:event',
+        template: '<page-event></page-event>'
+    },
     {
         name: '/schedule/:period?/:semester?',
         template: '<page-schedule></page-schedule>',

src/client/services/menu.js

@@ -1,8 +1,8 @@
 import menuItems from '../../models/menu';
 
 class Menu {
-    constructor() {
-        this.items = menuItems;
+    constructor(items) {
+        this.items = items;
         this.current = null;
     }
 
@@ -16,8 +16,9 @@ class Menu {
 }
 
 export default function (app) {
-    app.factory('menu', ($route, $rootScope) => {
-        const menu = new Menu();
+    app.factory('menu', ($rootScope) => {
+        const menu = new Menu(menuItems);
+
         $rootScope.$on('$routeChangeSuccess', (event, current) => {
             try {
                 let path = current['$$route'].originalPath;

src/models/menu.js

@@ -5,7 +5,9 @@ export default [
         "color": "blue"
     },
     {
-        "text": "События"
+        "text": "События",
+        "url": "/events",
+        "color": "orange"
     },
     {
         "text": "Расписание",

src/routes/events.js

@@ -0,0 +1,20 @@
+import route from 'koa-route';
+import {c} from '../core/db';
+import {json} from './';
+
+export default function (app) {
+    app.use(route.get('/events', json(
+        function *() {
+            let query = {};
+            this.body = yield c('events')
+                .find(query)
+                .toArray();
+        }
+    )));
+
+    app.use(route.get('/event/:event', json(
+        function *(event) {
+            this.body = yield c('events').findOne({id: event});
+        }
+    )));
+};

src/server.js

@@ -23,6 +23,7 @@ import instagramIO from './instagram/io';
 import error404 from './routes/404';
 import documents from './routes/documents';
 import collective from './routes/collective';
+import events from './routes/events';
 
 export const app = koa();
 app.proxy = true;
@@ -56,5 +57,6 @@ gallery(app);
 instagram(app);
 instagramIO(app);
 documents(app);
+events(app);
 app.use(collective());
 app.use(error404());

src/style/components/event-post.scss

@@ -0,0 +1,33 @@
+@import "../variables";
+
+.event-post {
+  margin-bottom: $double-margin;
+
+  &__head {
+    margin-bottom: $small-margin;
+
+    h3 {
+      font-size: 1.75em;
+      text-align: center;
+    }
+
+    .date {
+      text-align: center;
+      color: #aaa;
+    }
+
+    a {
+      color: $dark-color;
+      border-bottom: none;
+    }
+  }
+
+  &__body{
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      display: block;
+      margin: 0 auto $small-margin;
+    }
+  }
+}

src/style/components/main-menu.scss

@@ -52,6 +52,10 @@
       border-top: $menu-colored-mark-thickness solid $blue-color;
     }
 
+    &.orange {
+      border-top: $menu-colored-mark-thickness solid $orange-color;
+    }
+
     &.green {
       border-top: $menu-colored-mark-thickness solid $green-color;
     }

src/style/style.scss

@@ -11,6 +11,7 @@
 @import "components/timeline-record-instagram";
 @import "components/schedule-table";
 @import "components/footer-links";
+@import "components/event-post";
 
 @import "components/page-school";
 @import "components/page-schedule";

src/style/variables.scss

@@ -20,6 +20,7 @@ $light-color: hsl(0, 0%, 80%);
 $lighter-color: hsl(0, 0%, 100%);
 
 $blue-color: rgb(63, 156, 234);
+$orange-color: rgb(240, 160, 65);
 $green-color: rgb(92, 190, 64);
 $yellow-color: rgb(255, 238, 0);
 $pink-color: rgb(246, 85, 160);

src/templates/components/event-post.html

@@ -0,0 +1,8 @@
+<div class="event-post">
+    <div class="event-post__head">
+        <a href="{{$.url}}"><h3>{{$.post.title}}</h3></a>
+        <p class="date">{{$.post.date | date : "dd.MM.yyyy"}}</p>
+    </div>
+
+    <div class="event-post__body" ng-bind-html="$.message"></div>
+</div>

src/templates/components/page-event.html

@@ -0,0 +1,3 @@
+<div class="content content_thin content--padding-top--double">
+    <event-post ng-repeat="i in $.posts" post="i"></event-post>
+</div>

src/templates/components/page-events.html

@@ -0,0 +1,3 @@
+<div class="content content_thin content--padding-top--double">
+    <event-post ng-repeat="i in $.posts" post="i"></event-post>
+</div>