Initial commit

Author: Sakif Surur

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,79 @@
+
+# ViriCiti Vue Assignment
+---
+![](https://imgs.xkcd.com/comics/self_description.png)
+
+This repository holds the ViriCiti Vue assignment. In this project you will find the description regarding the assignment for you to do. This assignment represent what we do on a day to day basis. We receive raw data from vehicles store it on database then send it to browser app via web socket.
+
+---
+
+## Getting Started
+First of all, fork the repository at:
+
+`https://github.com/viriciti/vue-assignment`
+
+Then open up your terminal and clone the forked repository
+
+<sup>Replace [YOUR_USERNAME] with your name</sup>
+
+`git clone https://github.com/[YOUR_USERNAME]/vue-assignment.git`
+
+Enter the directory
+
+`cd vue-assignment`
+
+Install all the dependencies
+
+`npm i`
+
+Run the app
+
+`npm start`
+
+---
+
+## The Assignment
+We have provided you with a starter kit that broadcast vehicle data via web socket. You can find the HTTP server on `src/server/app.js`, it's a bare minimum setup containing an express server to serve HTML page and ws server that broadcast raw data. What you need to build is a front end application that should look like below:
+
+![](https://github.com/viriciti/vue-assignment/raw/master/sketch.png)
+
+The whole front end application should be build with [Vue.js](https://vuejs.org/), but you're free to choose how it's build and composed. Data that are needed to render all those component is provided via the web socket connection.
+
+As you can see in this repository there are no webpack configuration  and frontend server. You're free to create your own configuration, maybe you want different config for production and development.
+
+### Get Creative!
+You can also extend the functionality for both front end and back end of the application. For example, making a more informative front end or incident reporting on that alert the user when the vehicle went to fast on the road (this can be done both in the front end and back end, double points for back end implementation ;) )
+
+### The data
+On websocket stream the data should look like this:
+
+```JS
+{
+  time: 1511512585495,
+  energy: 85.14600000000002,
+  gps: ["52.08940124511719","5.105764865875244"],
+  odo: 5.381999999997788,
+  speed: 12,
+  soc: 88.00000000000007
+}
+```
+
+* time - Unix timestamp of the moment the datapoint was recorder
+* energy - Energy used in kWh
+* gps - Latitude and longitude where the datapoint was recorded
+* odo - The distance driven in km
+* speed - The speed the vehicle was going in km/h
+* soc - The state of charge (battery) of the vehicle in %
+
+## Read up material
+Looking to level up your knowledge and skills? These are some good articles/courses that you can check out.
+* [Vue JS](https://vuejs.org/)
+* [Chartjs](https://www.chartjs.org/)
+* [Node.js WebSocket](https://flaviocopes.com/node-websockets/)
+### General
+* Learn [Node.js and it's modules](http://nodeschool.io/#workshoppers)
+
+## Questions
+If you have any questions about the assignment or project setup feel free to contact us at <a href='mailto:e.tamames@viriciti.com'>e.tamames@viriciti.com</a> or <a href='mailto:s.surur@viriciti.com'>s.surur@viriciti.com</a>. You can also come by the office. We're always ready to help.
+
+Good luck with the assignment!

meta/route.csv

@@ -0,0 +1,17 @@
+{
+  "name": "vue-assignment",
+  "version": "1.0.0",
+  "description": "![ ](https://imgs.xkcd.com/comics/code_quality_3.png)",
+  "main": "index.js",
+  "scripts": {
+    "start": "node src/server/app.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "csv-parse": "^4.0.1",
+    "express": "^4.16.4",
+    "pug": "^2.0.3",
+    "ws": "^6.1.2"
+  }
+}

package.json

@@ -0,0 +1,56 @@
+const EventEmitter  = require("events").EventEmitter
+const csvParse      = require ( "csv-parse")
+const fs            = require ( "fs")
+const Writable      = require ("stream").Writable
+
+class Broadcaster extends EventEmitter {
+	constructor() {
+		super()
+	}
+
+	start() {
+		this.broadcasting = true
+		const broadcast = () => {
+			console.log("Broadcasting...")
+			const fileStream = fs.createReadStream("./meta/route.csv")
+
+			fileStream
+				// Filestream piped to csvParse which accept nodejs readablestreams and parses each line to a JSON object
+				.pipe(csvParse({ delimiter: ",", columns: true, cast: true }))
+				// Then it is piped to a writable streams that will push it into nats
+				.pipe(new Writable({
+					objectMode: true,
+					write: (obj, enc, cb) => {
+						if(!this.broadcasting)
+							return cb()
+
+						// setTimeout in this case is there to emulate real life situation
+						// data that came out of the vehicle came in with irregular interval
+						// Hence the Math.random() on the second parameter
+						setTimeout(() => {
+							this.emit("data", obj)
+							cb()
+						}, Math.ceil(Math.random() * 150))
+					}
+				}))
+				.once("finish", () => {
+					console.log("Finished broadcasting")
+					if(this.broadcasting) {
+						console.log("Re-broadcast")
+						broadcast()
+					} else {
+						console.log("Stopped broadcast")
+						return
+					}
+				})
+
+		}
+		broadcast()
+	}
+
+	end() {
+		this.broadcasting = false
+	}
+}
+
+module.exports = Broadcaster

sketch.png

@@ -0,0 +1,37 @@
+const express       = require("express")
+const http          = require("http")
+const WebSocket     = require("ws")
+const Broadcaster   = require ("./Broadcaster")
+
+const app        = express()
+
+const httpServer = http.createServer(app)
+
+app
+	.set("views", `${process.cwd()}/src/server/views`)
+	.set("view engine", "pug")
+	.use(express.static(`${process.cwd()}/src/client`))
+
+app
+	.get("/", (req, res) => {
+		res.render("index")
+	})
+
+
+const wss = new WebSocket.Server({ server: httpServer })
+
+const broadcaster = new Broadcaster()
+
+broadcaster.start()
+broadcaster.on("data", (data) => {
+	wss.clients.forEach((socket) => {
+		socket.send(JSON.stringify(data))
+	})
+})
+
+
+httpServer.listen(3000, () => {
+	console.log("HTTP server listening on port 3000")
+})
+
+

src/client/app.js

@@ -0,0 +1,6 @@
+html
+	head
+		title ViriCiti Vue App
+		link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css")
+	body
+		h1 HELLO WORLD!