sundowndev
/
interview-v1
mirror of https://github.com/sundowndev/interview-v1.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Client views

pull/16/head
sundowndev 2018-08-05 01:20:13 +02:00
parent 3c848e9850
commit 4eff277cfc
7 changed files with 169 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
client/src/assets/app.js Normal file
View File

@ -0,0 +1,135 @@
let $ = require("jquery");
//let bs = require("bootstrap");
let connected = false;
const api_url = 'http://localhost:8000';
$(".close").on('click', () => {
$(".close").alert('close');
});
if (localStorage.getItem('sessionToken') !== null) {
connected = true;
}
if (connected) {
$('.menu').html('<li class="nav-item">\n' +
' <a class="nav-link" id="logout-link" href="/logout">Log out</a>\n' +
' </li>');
$('#logout-link').click((e) => {
e.preventDefault();
sendRequest('POST', '/logout', null, function (res) {
localStorage.removeItem('sessionToken');
window.location.pathname = '/';
});
});
}
function sendRequest(method, url, data, callback) {
let request = new XMLHttpRequest();
request.open(method, api_url + url);
request.setRequestHeader("Content-Type", "application/json");
request.setRequestHeader('Accept', 'application/json');
if (localStorage.getItem('sessionToken') !== undefined) {
request.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('sessionToken'));
}
request.responseType = 'json';
request.onload = function () {
if (callback) callback(request.response);
};
request.send(JSON.stringify(data));
}
function setAdvert(message) {
$('#advert').html('<div class="alert alert-primary alert-dismissible fade show" role="alert">\n' +
' ' + message +
' <button type="button" class="close" data-dismiss="alert" aria-label="Close">\n' +
' <span aria-hidden="true">&times;</span>\n' +
' </button>\n' +
' </div>');
}
function refreshTaskList() {
sendRequest('GET', '/tasks', null, function (response) {
$('.task-list').html('');
response.data.forEach(function (task) {
let status = 'Open';
if (task.status === "0") {
status = 'Closed';
}
$('.task-list').append('<div class="media text-muted pt-3">\n' +
' <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">\n' +
' <div class="d-flex justify-content-between align-items-center w-100">\n' +
' <a href="/task/' + task.id + '"><strong class="text-gray-dark">' + task.title + '</strong></a>\n' +
' <span class="badge badge-pill badge-primary">' + status + '</span>\n' +
' </div>\n' +
' <spadatan class="d-block">' + task.description + '</spadatan>\n' +
' </div>\n' +
' </div>');
});
});
}
if (connected) {
$('#createTaskForm').html('<div class="my-3 p-3 bg-white rounded box-shadow">\n' +
' <form>\n' +
' <div class="form-group">\n' +
' <label for="title">Title</label>\n' +
' <input type="text" name="title" id="title" class="form-control">\n' +
' </div>\n' +
' <div class="form-group">\n' +
' <label for="description">Description</label>\n' +
' <textarea name="description" id="description" class="form-control"></textarea>\n' +
' </div>\n' +
'\n' +
' <button type="submit" id="createTask" class="btn btn-success">Create task</button>\n' +
' </form>\n' +
' </div>');
}
$('#createTask').click(function (e) {
e.preventDefault();
sendRequest('POST', '/tasks', {
title: $("#title")[0].value,
description: $("#description")[0].value
}, function (data) {
setAdvert(data.message);
refreshTaskList();
});
});
refreshTaskList();
$('#signin').click(function (e) {
e.preventDefault();
sendRequest('POST', '/auth', {
username: $('#username')[0].value,
password: $('#password')[0].value
}, function (res) {
if (res.data.token !== undefined) {
localStorage.setItem('sessionToken', res.data.token);
window.location.pathname = '/';
} else {
setAdvert(res.message);
}
});
});
$('#register').click(function (e) {
e.preventDefault();
sendRequest('POST', '/signup', {
username: $('#username')[0].value,
password: $('#password')[0].value,
email: $('#email')[0].value
}, function (res) {
setAdvert(res.message);
});
});

3
client/src/index.js
View File

@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
//import * as bodyParser from "body-parser";
const express = require("express");
const http = require("http");
let path = require("path");
let app = express();
app.set('view engine', 'twig');
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + 'public'));
app.use(express.static(path.resolve(__dirname) + '/../dist/public/'));
app.get('/', (req, res) => {
res.render('index');
});

4
client/src/index.ts
View File

@ -3,11 +3,13 @@ import * as express from "express";
import {Request, Response} from "express";
import * as http from 'http';
let path = require("path");
let app: express.Application = express();
app.set('view engine', 'twig');
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + 'public'));
app.use(express.static(path.resolve(__dirname)+'/../dist/public/'));
app.get('/', (req: Request, res: Response) => {
res.render('index');

36
client/src/views/index.twig
View File

@ -10,45 +10,11 @@
</div>
</div>
<div class="my-3 p-3 bg-white rounded box-shadow">
<form action="#">
<div class="form-group">
<label for="title">Title</label>
<input type="text" name="title" id="title" class="form-control">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea name="description" id="description" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-success">Create task</button>
</form>
</div>
<div id="createTaskForm"></div>
<div class="my-3 p-3 bg-white rounded box-shadow">
<h6 class="border-bottom border-gray pb-2 mb-0">All tasks</h6>
<div class="task-list"></div>
</div>
</main>
{% endblock %}
{% block scripts %}
{{ parent() }}
<script>
sendRequest('GET', '/tasks', null, function (res) {
res.data.forEach(function () {
$('.task-list').append('<div class="media text-muted pt-3">\n' +
' <img src="https://dummyimage.com/32x32/54bf22/fff.jpg&text=+" alt="" class="mr-2 rounded">\n' +
' <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">\n' +
' <div class="d-flex justify-content-between align-items-center w-100">\n' +
' <a href=""><strong class="text-gray-dark">Faire rapport de stage</strong></a>\n' +
' <span class="badge badge-pill badge-primary">Open</span>\n' +
' </div>\n' +
' <spadatan class="d-block">Je dois faire ça lààààà</spadatan>\n' +
' </div>\n' +
' </div>');
});
});
</script>
{% endblock %}

33
client/src/views/layout.twig
View File

@ -24,7 +24,7 @@
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<ul class="navbar-nav mr-auto menu">
<li class="nav-item">
<a class="nav-link" href="/login">Sign in</a>
</li>
@ -58,36 +58,7 @@
{% endblock %}
{% block scripts %}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script>
$(".close").on('click', () => {
$(".close").alert('close');
});
const api_url = 'http://localhost:8000';
function sendRequest(method, url, data, callback) {
let request = new XMLHttpRequest();
request.open(method, api_url + url);
request.setRequestHeader('Accept', 'application/json');
request.responseType = 'json';
request.onload = function () {
if (callback) callback(request.response);
};
request.send(data);
}
function setAdvert(message) {
$('#advert').html('<div class="alert alert-primary alert-dismissible fade show" role="alert">\n' +
' ' + message +
' <button type="button" class="close" data-dismiss="alert" aria-label="Close">\n' +
' <span aria-hidden="true">&times;</span>\n' +
' </button>\n' +
' </div>');
}
</script>
<script src="/app.js"></script>
{% endblock %}
</body>
</html>

15
client/src/views/login.twig
View File

@ -17,19 +17,4 @@
</form>
</div>
</main>
{% endblock %}
{% block scripts %}
{{ parent() }}
<script>
$('#signin').click(function (e) {
sendRequest('POST', '/auth', {
username: 'test',
password: 'test'
}, function (res) {
console.log(res);
});
});
</script>
{% endblock %}

26
client/src/views/register.twig
View File

@ -0,0 +1,26 @@
{% extends 'layout.twig' %}
{% block body %}
<main role="main" class="container">
<div class="my-3 p-3 bg-white rounded box-shadow">
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control">
</div>
<button type="submit" id="register" class="btn btn-success">Register</button>
</form>
</div>
</main>
{% endblock %}