Commit da15749c authored by Killian Kemps's avatar Killian Kemps

Change front to Vuejs client

parent 8308b642
<!doctype html>
<html>
<head>
<title>Qowala</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 80%; margin-right: .5%; }
form select { width: 9%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<div id="app">
<ul id="messages">
<li v-for="message in messages">
{{ message }}
</li>
</ul>
<form action="" v-on:submit.prevent="sendMsg">
<input v-model="messageInput" autocomplete="off" />
<select id="availability" v-model="availability">
<option id="available">Available</option>
<option id="unavailable">Unavailable</option>
</select>
<button>Send</button>
</form>
</div>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/js/vue.js"></script>
<script>
var socket = io();
var app = new Vue({
el: '#app',
data: {
messageInput: '',
messages: [],
availability: 'Available',
},
methods: {
sendMsg: function() {
socket.emit('chat message', this.messageInput);
this.messageInput = '';
},
notifyMe: function(msg) {
var msg = 'Qowala: ' + msg;
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Let's check whether notification permissions have already been granted
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification(msg);
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var notification = new Notification(msg);
}
});
}
// At last, if the user has denied notifications, and you
// want to be respectful there is no need to bother them any more.
}
},
created: function() {
socket.on('reload page', function(){
document.location.reload(true);
}.bind(this));
socket.on('chat message', function(msg){
this.messages.push(msg);
// Send notification only if user available
if (this.availability === 'Available') {
this.notifyMe(msg);
}
}.bind(this));
}
})
</script>
</body>
</html>
This diff is collapsed.
<!doctype html>
<html>
<head>
<title>Qowala</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 80%; margin-right: .5%; }
form select { width: 9%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" />
<select id="availability">
<option id="available" selected>Available</option>
<option id="unavailable">Unavailable</option>
</select>
<button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
function notifyMe(msg) {
var msg = 'Qowala: ' + msg;
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Let's check whether notification permissions have already been granted
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification(msg);
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var notification = new Notification(msg);
}
});
}
// At last, if the user has denied notifications, and you
// want to be respectful there is no need to bother them any more.
}
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('reload page', function(){
document.location.reload(true);
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
// Send notification only if user available
if ($('#availability').val() === 'Available') {
notifyMe(msg);
}
});
</script>
</body>
</html>
var app = require('express')();
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var sessions = require("client-sessions");
var http = require('http').Server(app);
var io = require('socket.io')(http);
const fs = require('fs');
const path = require('path');
var login = require("facebook-chat-api");
var facebookMessengerService = require('./facebookMessengerService');
......@@ -11,6 +13,9 @@ var facebookMessengerService = require('./facebookMessengerService');
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
// serve the static assets from the client/ directory
app.use(express.static(path.join(__dirname, 'client/static/')));
var cookieOptions = {
cookieName: 'userSession', // cookie name dictates the key name added to the request object
secret: 'reaaaalsecretblargadeeblargblarg', // should be a large unguessable string
......@@ -20,11 +25,14 @@ var cookieOptions = {
app.use(sessions(cookieOptions));
// Set web client directory
var client_dir = __dirname + '/client';
app.get('/', function(req, res){
if (req.userSession.email) {
loginFacebookAppstate(req.userSession.email).then(
function() {
res.sendFile(__dirname + '/index.html');
res.sendFile(client_dir + '/index.html');
}
).catch(function(err) {
console.log('Error while login with appstate: ', err);
......@@ -40,7 +48,7 @@ app.get('/', function(req, res){
});
app.get('/login', function(req, res){
res.sendFile(__dirname + '/login.html');
res.sendFile(client_dir + '/login.html');
});
app.post('/login', function(req, res){
......@@ -53,7 +61,7 @@ app.post('/login', function(req, res){
).catch(function(err) {
console.log('Error while login with credentials: ', err);
// If no appstate has been saved before
res.sendFile(__dirname + '/login.html');
res.sendFile(client_dir + '/login.html');
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment