Client views
parent
3c848e9850
commit
4eff277cfc
|
@ -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">×</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,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
//import * as bodyParser from "body-parser";
|
//import * as bodyParser from "body-parser";
|
||||||
const express = require("express");
|
const express = require("express");
|
||||||
const http = require("http");
|
const http = require("http");
|
||||||
|
let path = require("path");
|
||||||
let app = express();
|
let app = express();
|
||||||
app.set('view engine', 'twig');
|
app.set('view engine', 'twig');
|
||||||
app.set('views', __dirname + '/views');
|
app.set('views', __dirname + '/views');
|
||||||
app.use(express.static(__dirname + 'public'));
|
app.use(express.static(path.resolve(__dirname) + '/../dist/public/'));
|
||||||
app.get('/', (req, res) => {
|
app.get('/', (req, res) => {
|
||||||
res.render('index');
|
res.render('index');
|
||||||
});
|
});
|
||||||
|
|
|
@ -3,11 +3,13 @@ import * as express from "express";
|
||||||
import {Request, Response} from "express";
|
import {Request, Response} from "express";
|
||||||
import * as http from 'http';
|
import * as http from 'http';
|
||||||
|
|
||||||
|
let path = require("path");
|
||||||
|
|
||||||
let app: express.Application = express();
|
let app: express.Application = express();
|
||||||
|
|
||||||
app.set('view engine', 'twig');
|
app.set('view engine', 'twig');
|
||||||
app.set('views', __dirname + '/views');
|
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) => {
|
app.get('/', (req: Request, res: Response) => {
|
||||||
res.render('index');
|
res.render('index');
|
||||||
|
|
|
@ -10,20 +10,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="my-3 p-3 bg-white rounded box-shadow">
|
<div id="createTaskForm"></div>
|
||||||
<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 class="my-3 p-3 bg-white rounded box-shadow">
|
<div class="my-3 p-3 bg-white rounded box-shadow">
|
||||||
<h6 class="border-bottom border-gray pb-2 mb-0">All tasks</h6>
|
<h6 class="border-bottom border-gray pb-2 mb-0">All tasks</h6>
|
||||||
|
@ -31,24 +18,3 @@
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
{% endblock %}
|
{% 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 %}
|
|
|
@ -24,7 +24,7 @@
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
|
<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">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/login">Sign in</a>
|
<a class="nav-link" href="/login">Sign in</a>
|
||||||
</li>
|
</li>
|
||||||
|
@ -58,36 +58,7 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
<script src="/app.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">×</span>\n' +
|
|
||||||
' </button>\n' +
|
|
||||||
' </div>');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -18,18 +18,3 @@
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block scripts %}
|
|
||||||
{{ parent() }}
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$('#signin').click(function (e) {
|
|
||||||
sendRequest('POST', '/auth', {
|
|
||||||
username: 'test',
|
|
||||||
password: 'test'
|
|
||||||
}, function (res) {
|
|
||||||
console.log(res);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
|
@ -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 %}
|
Loading…
Reference in New Issue