Client views
sundowndev
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";
|
||||
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');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -10,20 +10,7 @@
|
|||
</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>
|
||||
|
|
@ -31,24 +18,3 @@
|
|||
</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 %}
|
||||
|
|
@ -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">×</span>\n' +
|
||||
' </button>\n' +
|
||||
' </div>');
|
||||
}
|
||||
</script>
|
||||
<script src="/app.js"></script>
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -18,18 +18,3 @@
|
|||
</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 %}
|
||||
|
|
@ -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