From 109dbbe44fa35b1961cd9e20e949c8af426851b2 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 27 Feb 2016 23:30:43 +0300 Subject: [PATCH] + Events Page --- src/client/api/API.js | 2 ++ src/client/api/APIEvent.js | 13 +++++++++ src/client/app.js | 6 +++++ src/client/components/EventPost.js | 15 +++++++++++ src/client/components/PageEvent.js | 21 +++++++++++++++ src/client/components/PageEvents.js | 17 ++++++++++++ src/client/config.js | 9 +++++++ src/client/services/menu.js | 9 ++++--- src/models/menu.js | 4 ++- src/routes/events.js | 20 ++++++++++++++ src/server.js | 2 ++ src/style/components/event-post.scss | 33 +++++++++++++++++++++++ src/style/components/main-menu.scss | 4 +++ src/style/style.scss | 1 + src/style/variables.scss | 1 + src/templates/components/event-post.html | 8 ++++++ src/templates/components/page-event.html | 3 +++ src/templates/components/page-events.html | 3 +++ 18 files changed, 166 insertions(+), 5 deletions(-) create mode 100644 src/client/api/APIEvent.js create mode 100644 src/client/components/EventPost.js create mode 100644 src/client/components/PageEvent.js create mode 100644 src/client/components/PageEvents.js create mode 100644 src/routes/events.js create mode 100644 src/style/components/event-post.scss create mode 100644 src/templates/components/event-post.html create mode 100644 src/templates/components/page-event.html create mode 100644 src/templates/components/page-events.html diff --git a/src/client/api/API.js b/src/client/api/API.js index 59b6767f..d7356cc1 100644 --- a/src/client/api/API.js +++ b/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); } } \ No newline at end of file diff --git a/src/client/api/APIEvent.js b/src/client/api/APIEvent.js new file mode 100644 index 00000000..721cee85 --- /dev/null +++ b/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}); + } +} \ No newline at end of file diff --git a/src/client/app.js b/src/client/app.js index 03f13d8f..7f10e14c 100644 --- a/src/client/app.js +++ b/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, diff --git a/src/client/components/EventPost.js b/src/client/components/EventPost.js new file mode 100644 index 00000000..2e824695 --- /dev/null +++ b/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}`; + } + }); +}; \ No newline at end of file diff --git a/src/client/components/PageEvent.js b/src/client/components/PageEvent.js new file mode 100644 index 00000000..a306bb99 --- /dev/null +++ b/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]; + }); + } + }); +}; \ No newline at end of file diff --git a/src/client/components/PageEvents.js b/src/client/components/PageEvents.js new file mode 100644 index 00000000..22303860 --- /dev/null +++ b/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; + }); + } + }); +}; \ No newline at end of file diff --git a/src/client/config.js b/src/client/config.js index 3b3552e8..ba014eec 100644 --- a/src/client/config.js +++ b/src/client/config.js @@ -25,6 +25,15 @@ export let routes = [ template: '', title: 'ДХШ Шлиссельбурга' }, + { + name: '/events/:page?/:pageNumber?', + template: '', + title: 'События Школы' + }, + { + name: '/event/:event', + template: '' + }, { name: '/schedule/:period?/:semester?', template: '', diff --git a/src/client/services/menu.js b/src/client/services/menu.js index 53cc8784..6f786ac4 100644 --- a/src/client/services/menu.js +++ b/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; diff --git a/src/models/menu.js b/src/models/menu.js index a2b947f3..9aaab874 100644 --- a/src/models/menu.js +++ b/src/models/menu.js @@ -5,7 +5,9 @@ export default [ "color": "blue" }, { - "text": "События" + "text": "События", + "url": "/events", + "color": "orange" }, { "text": "Расписание", diff --git a/src/routes/events.js b/src/routes/events.js new file mode 100644 index 00000000..bc090831 --- /dev/null +++ b/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}); + } + ))); +}; diff --git a/src/server.js b/src/server.js index 1feb3b54..d70277eb 100644 --- a/src/server.js +++ b/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()); \ No newline at end of file diff --git a/src/style/components/event-post.scss b/src/style/components/event-post.scss new file mode 100644 index 00000000..f7499114 --- /dev/null +++ b/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; + } + } +} diff --git a/src/style/components/main-menu.scss b/src/style/components/main-menu.scss index bdd5c734..7af95495 100644 --- a/src/style/components/main-menu.scss +++ b/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; } diff --git a/src/style/style.scss b/src/style/style.scss index 7aa5b0b4..d909d1c1 100644 --- a/src/style/style.scss +++ b/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"; diff --git a/src/style/variables.scss b/src/style/variables.scss index 164ff4a0..54c9d615 100644 --- a/src/style/variables.scss +++ b/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); diff --git a/src/templates/components/event-post.html b/src/templates/components/event-post.html new file mode 100644 index 00000000..6e63087f --- /dev/null +++ b/src/templates/components/event-post.html @@ -0,0 +1,8 @@ +
+
+

{{$.post.title}}

 +

{{$.post.date | date : "dd.MM.yyyy"}}

+
+ +
+
diff --git a/src/templates/components/page-event.html b/src/templates/components/page-event.html new file mode 100644 index 00000000..44e1ad63 --- /dev/null +++ b/src/templates/components/page-event.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/templates/components/page-events.html b/src/templates/components/page-events.html new file mode 100644 index 00000000..44e1ad63 --- /dev/null +++ b/src/templates/components/page-events.html @@ -0,0 +1,3 @@ +
+ +