Lots of fixes in WhatIsNew Component and News Component

backend/logic/actions/news.js

@@ -5,14 +5,14 @@ const db = require('../db');
 module.exports = {
 
 	index: (session, cb) => {
-		db.models.news.find({}).sort({ released: 'desc' }).exec((err, news) => {
+		db.models.news.find({}).sort({ createdAt: 'desc' }).exec((err, news) => {
 			if (err) throw err;
 			else cb({ status: 'success', data: news });
 		});
 	},
 
 	newest: (session, cb) => {
-		db.models.news.findOne({}).sort({ released: 'asc' }).exec((err, news) => {
+		db.models.news.findOne({}).sort({ createdAt: 'desc' }).exec((err, news) => {
 			if (err) throw err;
 			else cb({ status: 'success', data: news });
 		});

backend/logic/db/schemas/news.js

@@ -1,10 +1,10 @@
 module.exports = {
 	title: { type: String, required: true },
 	description: { type: String, required: true },
-	fixes: [{ type: String }],
+	bugs: [{ type: String }],
 	features: [{ type: String }],
-	changes: [{ type: String }],
+	improvements: [{ type: String }],
 	upcoming: [{ type: String }],
 	createdBy: { type: String, required: true },
-	createdAt: { type: Date, default: Date.now(), required: true }
+	createdAt: { type: Number, default: Date.now(), required: true }
 };

frontend/components/Modals/WhatIsNew.vue

@@ -1,26 +1,37 @@
 <template>
-	<div class="modal" :class="{ 'is-active': isModalActive }">
-		<div class="modal-background"></div>
-		<div class="modal-card">
-			<header class="modal-card-head">
-				<p class="modal-card-title"><strong>What's new</strong> (Nov 23, 2016)</p>
-				<button class="delete" @click="toggleModal()"></button>
+	<div class='modal' :class='{ "is-active": isModalActive }'>
+		<div class='modal-background'></div>
+		<div class='modal-card'>
+			<header class='modal-card-head'>
+				<p class='modal-card-title'><strong>{{ news.title }}</strong> ({{ formatDate(news.createdAt) }})</p>
+				<button class='delete' @click='toggleModal()'></button>
 			</header>
-			<section class="modal-card-body">
-				<div class="sect">
-					<div class="sect-head-success">Improvements</div>
-					<ul class="sect-body">
-						<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
-						<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium cum molestias minima saepe, iure aperiam quo necessitatibus quod?</li>
-						<li>Lorem ipsum dolor sit amet, consectetur.</li>
+			<section class='modal-card-body'>
+				<div class='content'>
+					<p>{{ news.description }}</p>
+				</div>
+				<div class='sect' v-show='news.features.length > 0'>
+					<div class='sect-head-features'>The features are so great</div>
+					<ul class='sect-body'>
+						<li v-for='li in news.features'>{{ li }}</li>
+					</ul>
+				</div>
+				<div class='sect' v-show='news.improvements.length > 0'>
+					<div class='sect-head-improvements'>Improvements</div>
+					<ul class='sect-body'>
+						<li v-for='li in news.improvements'>{{ li }}</li>
+					</ul>
+				</div>
+				<div class='sect' v-show='news.bugs.length > 0'>
+					<div class='sect-head-bugs'>Bugs Smashed</div>
+					<ul class='sect-body'>
+						<li v-for='li in news.bugs'>{{ li }}</li>
 					</ul>
 				</div>
-				<div class="sect">
-					<div class="sect-head-bugs">Bugs Smashed</div>
-					<ul class="sect-body">
-						<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
-						<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium cum molestias minima saepe, iure aperiam quo necessitatibus quod?</li>
-						<li>Lorem ipsum dolor sit amet, consectetur.</li>
+				<div class='sect' v-show='news.upcoming.length > 0'>
+					<div class='sect-head-upcoming'>Coming Soon to a Musare near you</div>
+					<ul class='sect-body'>
+						<li v-for='li in news.upcoming'>{{ li }}</li>
 					</ul>
 				</div>
 			</section>
@@ -32,68 +43,75 @@
 	export default {
 		data() {
 			return {
-				isModalActive: false
+				isModalActive: false,
+				news: {}
 			}
 		},
 		ready: function () {
-			// TODO: Setup so we can call this modal from anywhere and we can specify the values of everything when calling it. This should also get the improvements, bugs, date etc. to include in the modal.
-			// In future we will receive a date, if that date is newer than the one stored in localStorage, we will show modal, and then save that date to localStorage (how we keep track of which modal has been showed)
-			const data = {
-				date: 1479935887670
-			};
-
-			if (localStorage.getItem("whatIsNew")) {
-				if (localStorage.getItem("whatIsNew") < data.date) this.isModalActive = true;
-			} else {
-				localStorage.setItem("whatIsNew", data.date);
-				this.isModalActive = true;
-			}
+			let _this = this;
+			let socketInterval = setInterval(() => {
+				if (!!_this.$parent.socket) {
+					_this.socket = _this.$parent.socket;
+					_this.socket.emit('news.newest', res => {
+						_this.news = res.data;
+						if (localStorage.getItem('whatIsNew')) {
+							if (parseInt(localStorage.getItem('whatIsNew')) < res.data.createdAt) {
+								this.toggleModal();
+								localStorage.setItem('whatIsNew', res.data.createdAt);
+							}
+						} else {
+							this.toggleModal();
+							localStorage.setItem('whatIsNew', res.data.createdAt);
+						}
+					});
+					clearInterval(socketInterval);
+				}
+			}, 100);
 		},
 		methods: {
 			toggleModal: function () {
 				this.isModalActive = !this.isModalActive;
+			},
+			formatDate: unix => {
+				return moment(unix).format('DD-MM-YYYY');
 			}
 		}
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 	.modal-card-head {
 		border-bottom: none;
 		background-color: ghostwhite;
 		padding: 15px;
 	}
 
-	.modal-card-title {
-		font-size: 14px;
-	}
+	.modal-card-title { font-size: 14px; }
 
 	.delete {
 		background: transparent;
 		&:hover { background: transparent; }
 
-		&:before, &:after {
-			background-color: #bbb;
-		}
+		&:before, &:after { background-color: #bbb; }
 	}
 
 	.sect {
 		div[class^='sect-head'], div[class*=' sect-head']{
-			padding: 15px;
+			padding: 12px;
 			text-transform: uppercase;
 			font-weight: bold;
 			color: #fff;
 		}
 
-		.sect-head-success { background-color: seagreen; }
+		.sect-head-features { background-color: dodgerblue; }
+		.sect-head-improvements { background-color: seagreen; }
 		.sect-head-bugs { background-color: brown; }
+		.sect-head-upcoming { background-color: mediumpurple; }
 
 		.sect-body {
-			padding: 25px;
+			padding: 15px 25px;
 
-			li {
-				list-style-type: disc;
-			}
+			li { list-style-type: disc; }
 		}
 	}
 </style>

frontend/components/pages/News.vue

@@ -1,39 +1,39 @@
 <template>
-	<div class="app">
+	<div class='app'>
 		<main-header></main-header>
-		<div class="container">
-			<div class="card is-fullwidth" v-for="item in news">
-				<header class="card-header">
-					<p class="card-header-title">
+		<div class='container'>
+			<div class='card is-fullwidth' v-for='item in news'>
+				<header class='card-header'>
+					<p class='card-header-title'>
 						{{ item.title }} - {{ formatDate(item.createdAt) }}
 					</p>
 				</header>
-				<div class="card-content">
-					<div class="content">
+				<div class='card-content'>
+					<div class='content'>
 						<p>{{ item.description }}</p>
 					</div>
-					<div class="content" v-show="item.features.length > 0">
-						<div class="tile notification is-success">Features</div>
-						<ul>
-							<li v-for="li in item.features">{{ li }}</li>
+					<div class='sect' v-show='item.features.length > 0'>
+						<div class='sect-head-features'>The features are so great</div>
+						<ul class='sect-body'>
+							<li v-for='li in item.features'>{{ li }}</li>
 						</ul>
 					</div>
-					<div class="content" v-show="item.changes.length > 0">
-						<div class="tile notification is-info">Changes</div>
-						<ul>
-							<li v-for="li in item.changes">{{ li }}</li>
+					<div class='sect' v-show='item.improvements.length > 0'>
+						<div class='sect-head-improvements'>Improvements</div>
+						<ul class='sect-body'>
+							<li v-for='li in item.improvements'>{{ li }}</li>
 						</ul>
 					</div>
-					<div class="content" v-show="item.fixes.length > 0">
-						<div class="tile notification is-danger">Bug fixes</div>
-						<ul>
-							<li v-for="li in item.fixes">{{ li }}</li>
+					<div class='sect' v-show='item.bugs.length > 0'>
+						<div class='sect-head-bugs'>Bugs Smashed</div>
+						<ul class='sect-body'>
+							<li v-for='li in item.bugs'>{{ li }}</li>
 						</ul>
 					</div>
-					<div class="content" v-show="item.upcoming.length > 0">
-						<div class="tile notification is-primary">Upcoming</div>
-						<ul>
-							<li v-for="li in item.upcoming">{{ li }}</li>
+					<div class='sect' v-show='item.upcoming.length > 0'>
+						<div class='sect-head-upcoming'>Coming Soon to a Musare near you</div>
+						<ul class='sect-body'>
+							<li v-for='li in item.upcoming'>{{ li }}</li>
 						</ul>
 					</div>
 				</div>
@@ -51,7 +51,7 @@
 		components: { MainHeader, MainFooter },
 		methods: {
 			formatDate: unix => {
-				return moment(unix).format("DD-MM-YYYY");
+				return moment(unix).format('DD-MM-YYYY');
 			},
 		},
 		data() {
@@ -74,12 +74,26 @@
 	}
 </script>
 
-<style lang="scss" scoped>
-	.card {
-		margin-top: 50px;
-	}
+<style lang='scss' scoped>
+	.card { margin-top: 50px; }
+
+	.sect {
+		div[class^='sect-head'], div[class*=' sect-head']{
+			padding: 12px;
+			text-transform: uppercase;
+			font-weight: bold;
+			color: #fff;
+		}
 
-	.notification {
-		padding: 10px !important;
+		.sect-head-features { background-color: dodgerblue; }
+		.sect-head-improvements { background-color: seagreen; }
+		.sect-head-bugs { background-color: brown; }
+		.sect-head-upcoming { background-color: mediumpurple; }
+
+		.sect-body {
+			padding: 15px 25px;
+
+			li { list-style-type: disc; }
+		}
 	}
 </style>