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' :class='{ "is-active": isModalActive }'>
-		<div class="modal-background"></div>
+		<div class='modal-background'></div>
-		<div class="modal-card">
+		<div class='modal-card'>
-			<header class="modal-card-head">
+			<header class='modal-card-head'>
-				<p class="modal-card-title"><strong>What's new</strong> (Nov 23, 2016)</p>
+				<p class='modal-card-title'><strong>{{ news.title }}</strong> ({{ formatDate(news.createdAt) }})</p>
-				<button class="delete" @click="toggleModal()"></button>
+				<button class='delete' @click='toggleModal()'></button>
 			</header>
-			<section class="modal-card-body">
+			<section class='modal-card-body'>
-				<div class="sect">
+				<div class='content'>
-					<div class="sect-head-success">Improvements</div>
+					<p>{{ news.description }}</p>
-					<ul class="sect-body">
+				</div>
-						<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
+				<div class='sect' v-show='news.features.length > 0'>
-						<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium cum molestias minima saepe, iure aperiam quo necessitatibus quod?</li>
+					<div class='sect-head-features'>The features are so great</div>
-						<li>Lorem ipsum dolor sit amet, consectetur.</li>
+					<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' v-show='news.upcoming.length > 0'>
-					<div class="sect-head-bugs">Bugs Smashed</div>
+					<div class='sect-head-upcoming'>Coming Soon to a Musare near you</div>
-					<ul class="sect-body">
+					<ul class='sect-body'>
-						<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
+						<li v-for='li in news.upcoming'>{{ li }}</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>
 					</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.
+			let _this = this;
-			// 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)
+			let socketInterval = setInterval(() => {
-			const data = {
+				if (!!_this.$parent.socket) {
-				date: 1479935887670
+					_this.socket = _this.$parent.socket;
-			};
+					_this.socket.emit('news.newest', res => {
-
+						_this.news = res.data;
-			if (localStorage.getItem("whatIsNew")) {
+						if (localStorage.getItem('whatIsNew')) {
-				if (localStorage.getItem("whatIsNew") < data.date) this.isModalActive = true;
+							if (parseInt(localStorage.getItem('whatIsNew')) < res.data.createdAt) {
-			} else {
+								this.toggleModal();
-				localStorage.setItem("whatIsNew", data.date);
+								localStorage.setItem('whatIsNew', res.data.createdAt);
-				this.isModalActive = true;
+							}
-			}
+						} 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 {
+	.modal-card-title { font-size: 14px; }
-		font-size: 14px;
-	}
 
 	.delete {
 		background: transparent;
 		&:hover { background: transparent; }
 
-		&:before, &:after {
+		&:before, &:after { background-color: #bbb; }
-			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 {
+			li { list-style-type: disc; }
-				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='container'>
-			<div class="card is-fullwidth" v-for="item in news">
+			<div class='card is-fullwidth' v-for='item in news'>
-				<header class="card-header">
+				<header class='card-header'>
-					<p class="card-header-title">
+					<p class='card-header-title'>
 						{{ item.title }} - {{ formatDate(item.createdAt) }}
 					</p>
 				</header>
-				<div class="card-content">
+				<div class='card-content'>
-					<div class="content">
+					<div class='content'>
 						<p>{{ item.description }}</p>
 					</div>
-					<div class="content" v-show="item.features.length > 0">
+					<div class='sect' v-show='item.features.length > 0'>
-						<div class="tile notification is-success">Features</div>
+						<div class='sect-head-features'>The features are so great</div>
-						<ul>
+						<ul class='sect-body'>
-							<li v-for="li in item.features">{{ li }}</li>
+							<li v-for='li in item.features'>{{ li }}</li>
 						</ul>
 					</div>
-					<div class="content" v-show="item.changes.length > 0">
+					<div class='sect' v-show='item.improvements.length > 0'>
-						<div class="tile notification is-info">Changes</div>
+						<div class='sect-head-improvements'>Improvements</div>
-						<ul>
+						<ul class='sect-body'>
-							<li v-for="li in item.changes">{{ li }}</li>
+							<li v-for='li in item.improvements'>{{ li }}</li>
 						</ul>
 					</div>
-					<div class="content" v-show="item.fixes.length > 0">
+					<div class='sect' v-show='item.bugs.length > 0'>
-						<div class="tile notification is-danger">Bug fixes</div>
+						<div class='sect-head-bugs'>Bugs Smashed</div>
-						<ul>
+						<ul class='sect-body'>
-							<li v-for="li in item.fixes">{{ li }}</li>
+							<li v-for='li in item.bugs'>{{ li }}</li>
 						</ul>
 					</div>
-					<div class="content" v-show="item.upcoming.length > 0">
+					<div class='sect' v-show='item.upcoming.length > 0'>
-						<div class="tile notification is-primary">Upcoming</div>
+						<div class='sect-head-upcoming'>Coming Soon to a Musare near you</div>
-						<ul>
+						<ul class='sect-body'>
-							<li v-for="li in item.upcoming">{{ li }}</li>
+							<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>
+<style lang='scss' scoped>
-	.card {
+	.card { margin-top: 50px; }
-		margin-top: 50px;
+
-	}
+	.sect {
+		div[class^='sect-head'], div[class*=' sect-head']{
+			padding: 12px;
+			text-transform: uppercase;
+			font-weight: bold;
+			color: #fff;
+		}
 
-	.notification {
+		.sect-head-features { background-color: dodgerblue; }
-		padding: 10px !important;
+		.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>