Commit 6625f68b authored by AudreyGl's avatar AudreyGl

2eme partie du tuto (ajout/suppression débat et affichage de la liste) + bootstrap

parent a0307da1
......@@ -13,4 +13,4 @@ Squelette de l'appli créé en suivant [ce tuto](https://closebrace.com/tutorial
1. Cloner le projet
2. Installer node et npm
3. Dans le dossier du projet, installer les dépendances avec `npm install`
4. Lancer le serveur avec `npm start` et admirer cette appli de toute beauté à l'adresse http://localhost:3000/debatslist (pour l'instant)
\ No newline at end of file
4. Lancer le serveur avec `npm start`, mongodb avec `sudo service mongod start`, et admirer cette appli de toute beauté à l'adresse http://localhost:3000/debatslist (pour l'instant)
\ No newline at end of file
......@@ -34,7 +34,7 @@ app.use('/debats', debatsRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
next(createError(404) );
});
// error handler
......@@ -45,7 +45,7 @@ app.use(function(err, req, res, next) {
// render the error page
res.status(err.status || 500);
res.render('error');
res.render('pages/error');
});
module.exports = app;
{
"name": "agoraviz",
"name": "agoraviz'",
"version": "0.0.0",
"private": true,
"scripts": {
......
......@@ -3,10 +3,13 @@ var debatsListData = [];
// DOM Ready =============================================================
$(document).ready(function() {
// Question link click
$('#debatsList table tbody').on('click', 'td a.linkshowuser', showDebatInfo());
// Populate the debat table on initial page load
populateTable();
// Question link click
$('#debatsList table tbody').on('click', 'td a.linkshowdebat', showDebatInfo);
// Delete Debat link click
$('#debatsList table tbody').on('click', 'td a.linkdeletedebat', deleteDebat);
});
......@@ -28,21 +31,21 @@ function populateTable() {
tableContent += '<td><a href="#" class="linkdeletedebat" rel="' + this._id + '">delete</a></td>';
tableContent += '</tr>';
});
// Inject the whole content string into our existing HTML table
$('#debatsList table tbody').html(tableContent);
});
};
// Show Debat Info
function showDebatInfo(event) {
function showDebatInfo( event ) {
// Prevent Link from Firing
event.preventDefault();
// Retrieve username from link rel attribute
var thisDebatQuestion = $(this).attr('rel');
// Get Index of object based on id value
var arrayPosition = debatsListData.map(function(arrayItem) { return arrayItem.question; }).indexOf(thisDebatQuestion);
// Get our Debat Object
......@@ -51,4 +54,98 @@ function showDebatInfo(event) {
//Populate Info Box
$('#debatInfoQuestion').text(thisDebatObject.question);
};
// Add Debat button click
$('#btnAddDebat').on('click', addDebat);
// Add Debat
function addDebat(event) {
event.preventDefault();
// Super basic validation - increase errorCount variable if any fields are blank
var errorCount = 0;
$('#formAddDebat input').each(function(index, val) {
if($(this).val() === '') { errorCount++; }
});
// Check and make sure errorCount's still at zero
if(errorCount === 0) {
// If it is, compile all user info into one object
var newDebat = {
'question': $('#formAddDebat form input#inputDebatQuestion').val()
}
// Use AJAX to post the object to our adddebat service
$.ajax({
type: 'POST',
data: newDebat,
url: '/adddebat',
dataType: 'JSON'
}).done(function( response ) {
// Check for successful (blank) response
if (response.msg === '') {
// Clear the form inputs
$('#formAddDebat form input').val('');
// Update the table
populateTable();
}
else {
// If something goes wrong, alert the error message that our service returned
alert('Error: ' + response.msg);
}
});
}
else {
// If errorCount is more than 0, error out
alert('Please fill in all fields');
return false;
}
};
// Delete Debat
function deleteDebat(event) {
event.preventDefault();
// Pop up a confirmation dialog
var confirmation = confirm('Souhaitez-vous supprimer ce débat de manière définitive ?');
// Check and make sure the user confirmed
if (confirmation === true) {
// If they did, do our delete
$.ajax({
type: 'DELETE',
url: '/debats/deletedebat/' + $(this).attr('rel')
}).done(function( response ) {
// Check for a successful (blank) response
if (response.msg === '') {
}
else {
alert('Error: ' + response.msg);
}
// Update the table
populateTable();
});
}
else {
// If they said no to the confirm, do nothing
return false;
}
};
\ No newline at end of file
body {
padding: 50px;
padding: 30px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
h2 {
margin:0 0 .5em 0;
}
a {
color: #00B7FF;
}
#wrapper {
padding-left:312px;
position:relative;
}
#debatsList {
margin:0 0 30px 0;
}
#debatsList table {
border-collapse:separate;
border-spacing:1px;
background:#CCC;
}
#debatsList table th {
background:#EEE;
font-weight:600;
padding:10px 20px;
text-align:center;
}
#debatsList table tbody {
padding:0; margin:0;
border-collapse:collapse;
border-spacing:0px;
}
#debatsList table td {
background:#FFF;
padding:5px 10px;
text-align:center;
}
#debatInfo {
width:250px;
position:relative;
top:0; left:0;
}
#debatInfo p {
padding:15px;
border:1px solid #CCC;
background:rgba(80,120,255,0.05);
}
fieldset {
border:0;
padding:0; margin:0;
}
\ No newline at end of file
......@@ -9,12 +9,20 @@ router.get('/debatslist', function(req, res) {
res.json(docs);
});
collection.find({},{},function(e,docs){
res.render('debatslist', {
"debatslist" : docs
});
});
});
/* DELETE to deletedebat. */
router.delete('/deletedebat/:id', function(req, res) {
var db = req.db;
var collection = db.get('debatcollection');
var debatToDelete = req.params.id;
collection.remove({ '_id' : debatToDelete }, function(err) {
res.send((err === null) ? { msg: '' } : { msg:'error: ' + err });
});
});
module.exports = router;
......@@ -3,28 +3,12 @@ var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
/* GET Hello World page. */
router.get('/helloworld', function(req, res) {
res.render('helloworld', { title: 'Hello, World!' });
});
router.get('/debatslist', function(req, res) {
var db = req.db;
var collection = db.get('debatcollection');
collection.find({},{},function(e,docs){
res.render('debatslist', {
"debatslist" : docs
});
});
res.render('pages/index', { title: 'AgoraViz' });
});
/* GET New Débat page. */
router.get('/newdebat', function(req, res) {
res.render('newdebat', { title: 'Lancer un nouveau débat' });
res.render('pages/newdebat', { title: 'Lancer un nouveau débat' });
});
/* POST to Add Debat Service */
......@@ -55,4 +39,24 @@ router.post('/adddebat', function(req, res) {
});
router.get('/debatslist', function(req, res) {
var db = req.db;
var collection = db.get('debatcollection');
collection.find({},{},function(e,docs){
res.render('pages/debatslist', {
"debatslist" : docs,
title: 'AgoraViz'
});
});
});
// about page
router.get('/about', function(req, res) {
res.render('pages/about', { title: 'AgoraViz' });
});
module.exports = router;
<!DOCTYPE html>
<html>
<head>
<title>Débats en cours</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Débats en cours</h1>
<table id='debatslist'>
</table>
<ul>
<%
var list = '';
for (i = 0; i < debatslist.length; i++) {
list += '<li>' + debatslist[i].question + '</li>';
}
%>
<%= list %>
</ul>
<h3 id='debatInfoQuestion'>
<p>
<a href='/newdebat'>Lancer un nouveau débat</a>
</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/global.js"></script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title><p>Hello, World! Welcome to <%= title %></p></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<% include ../partials/head %>
</head>
<body>
<h1><%= title %></h1>
<header>
<% include ../partials/header %>
</header>
<h2>A propos d'<%= title %></h2>
<hr>
<p> AgoraViz vous permet de visualiser des débats dans l'Internet disruptif 3.0 digitalisé de la transformation numérique.
</p>
<footer>
<% include ../partials/footer %>
</footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/global.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<% include ../partials/head %>
</head>
<body>
<h1>Débats en cours</h1>
<header>
<% include ../partials/header %>
</header>
<div id="debatsList">
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<br>
<div id="debatInfo">
<p>
<span id="debatInfoQuestion">
</span>
</p>
</div>
<br>
<footer>
<% include ../partials/footer %>
</footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/global.js"></script>
</body>
</html>
\ No newline at end of file
<header>
<% include ../partials/header %>
</header>
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
<footer>
<% include ../partials/footer %>
</footer>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<% include ../partials/head %>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Bienvenue sur <%= title %> !</p>
<header>
<% include ../partials/header %>
</header>
<hr>
<footer>
<% include ../partials/footer %>
</footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/global.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Lancer un débat</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<% include ../partials/head %>
</head>
<body>
<h1><%= title %></h1>
<header>
<% include ../partials/header %>
</header>
<form id="formAddDebat" name="adddebat" method="post" action="/adddebat">
<input id="inputDebatQuestion" type="text" placeholder="question" name="question" />
<button id="btnSubmit" type="submit">Valider</button>
<button id="btnAddDebat" type="submit">Lancer le débat</button>
</form>
<br>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
\ No newline at end of file
</html>
<p class="text-center text-muted">Codé avec amour pour SI28</p>
\ No newline at end of file
<meta charset="UTF-8">
<title>AgoraViz</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<span class="glyphicon glyphicon glyphicon-tree-deciduous"></span>
Accueil
</a>
<ul class="nav navbar-nav">
<li><a href="/debatslist">Liste des débats</a></li>
<li><a href="/newdebat">Lancer un nouveau débat</a></li>
<li><a href="/about">A propos</a></li>
</ul>
</div>
</div>
</nav>
\ No newline at end of file
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