Commit 9781f2f5 authored by Clement Brizard's avatar Clement Brizard

Updated left menu + prevent double nodes creation

parent b27eb592
......@@ -11,17 +11,17 @@
stroke-width: 1.5px;
}
div.tooltip {
position: absolute;
text-align: center;
width: 260px;
height: 90px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
div.tooltip {
position: absolute;
text-align: center;
width: 260px;
height: 90px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
......@@ -83,23 +83,23 @@
transition: 1s;
}
#grandFond{
#grandFond{
background : linear-gradient(#ffffff,#e0e0e0);
box-shadow: 0px 0px 2px 2px rgba(120,120,120,0.5),
0px 1px 0px 1px rgba(255, 255, 255,0.5) inset,
0px -3px 0px 1px rgba(120,120,120,0.1) inset;
}
#colGauche{
background: #e0e0e0;
#colGauche{
background: #e0e0e0;
}
#colDroite{
background: #e0e0e0;
#colDroite{
background: #e0e0e0;
}
#menuResume li{
#menuResume li{
display: table;
width:100px;
height: 20px;
height: 20px;
border-radius: 2px 2px 2px 2px;
float:left;
}
......@@ -120,7 +120,19 @@
height: 70px;
}
#label{
#definitions{
display: none;
}
#sources{
display: none;
}
#dateForm{
display: none;
}
#label{
width:100%;
}
#comment{
......@@ -149,11 +161,11 @@
width:400px;
}
#basPage{
#basPage{
position: absolute;
bottom: 0px;
width: 90%;
width: 90%;
}
#basPage p{
text-align: center;
}
\ No newline at end of file
}
function addCircleDraggable(){
var offset, x, y;
$("#newNode").remove();
d3.select("g").append("circle")
.attr("r", 4.5)
.style('fill', function() { return color($('#type').val());})
......@@ -17,33 +18,33 @@
.on("drag", dragged)
.on("end", dragended)
);
function dragstarted(d) {
x=+d3.event.x;
y=+d3.event.y;
d3.select(this).raise().classed("active", true);
offset=d3.event;
offset.x -= parseFloat(d3.select(this).attr("cx"));
offset.y -= parseFloat(d3.select(this).attr("cx"));
}
function dragged(d) {
console.log("start");
console.log("start");
d3.select(this).attr("cx", d3.event.x - offset.x);
d3.select(this).attr("cy", d3.event.y - offset.y);
$(this).css({
'pointer-events' : 'none'
})
}
function dragended(d) {
console.log("ended");
d3.select(this).classed("active", false);
......@@ -51,22 +52,21 @@
'pointer-events' : 'auto'
})
}
/*
d3.selectAll(".node").on("mouseover", handle)
function handle(d){
console.log("you", d);
selected=d;
$("#addNode").click();
}
*/
}
\ No newline at end of file
......@@ -18,4 +18,42 @@ function showHideSynth() {
{
x.style.display = 'none';
}
}
\ No newline at end of file
}
function showDefs() {
var x = document.getElementById("definitions");
if (x.style.display == 'none')
{
x.style.display = 'block';
}else
{
x.style.display = 'none';
}
}
function showSources() {
var x = document.getElementById("sources");
if (x.style.display == 'none')
{
x.style.display = 'block';
}else
{
x.style.display = 'none';
}
}
function showDateForm() {
var x = document.getElementById("dateForm");
if (x.style.display == 'none')
{
x.style.display = 'block';
}else
{
x.style.display = 'none';
}
}
......@@ -8,7 +8,6 @@ console.log(data);
createGraph(data);
var dragDrop = false;
/* === Création du graphe === */
function createGraph(data){
......@@ -17,28 +16,28 @@ function createGraph(data){
.domain(["ouicar", "ouimais", "noncar","nonmais"])
.range(["green", "yellow", "orange", "red"])
.unknown("white");
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g")
.attr("transform", "translate(" + (width / 2 + 40) + "," + (height /3) + ")");
var stratify = d3.stratify()
.id(function(d) { return d._id; })
.parentId(function(d) { return d.parent; })
var tree = d3.tree()
.size([360, 500])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var root = tree(stratify(data));
// Arcs
var link = g.selectAll(".link")
.data(root.descendants().slice(1))
.enter().append("path")
......@@ -50,16 +49,16 @@ function createGraph(data){
+ " " + project(d.parent.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, d.parent.y);
});
// Noeuds
var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; })
node.append("circle")
.attr("r", 4.5)
.style('fill', function(d) { return color(d.data.type)})
......@@ -67,11 +66,12 @@ function createGraph(data){
.on('click', click)
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
// Labels
/*
node.append("text")
.attr("dy", ".31em")
.attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; })
......@@ -93,14 +93,14 @@ function createGraph(data){
});
// quand on clique ailleurs de la popover ça l'enlève
$('body').on('click', function (e) {
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('svg .node').length === 0
&& $(e.target).parents('.popover.in').length === 0) {
$('svg .node').popover('hide');
}
});
});
});*/
......@@ -110,26 +110,24 @@ function createGraph(data){
//Tooltips
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0)
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px");
svg.on('click', function(){div.style("visibility","hidden")});
......@@ -143,10 +141,9 @@ $("#addCircle").click(function(){
var selected=null;
$("#addNode").click(function() {
dragDrop=false;
console.log("parent");
console.log("parent");
let parent = "";
if (data.length == 0) {
......@@ -155,8 +152,8 @@ $("#addNode").click(function() {
parent = selected.data._id;
}
console.log("parent", parent);
console.log("parent", parent);
const newContrib = {
debate: debateJSON._id,
parent: parent,
......@@ -174,7 +171,7 @@ $("#addNode").click(function() {
dataType: 'text',
}).done(function(response) {
var newNodeObj = {
type: $("#type").val(),
name: $("#label").val(),
......@@ -198,7 +195,7 @@ $("#addNode").click(function() {
});
}
});
......@@ -233,11 +230,11 @@ $("#end").click(function(){
dataType: 'text',
}).done(function(response) {
data=JSON.parse(response);
data.push({"_id" : debate._id, "parent" : "", "name" : debate.question, "value":""})
data.push({"_id" : debate._id, "parent" : "", "name" : debate.question, "value":""})
console.log(data);
$("svg").empty();
createGraph(data);
});
})
......@@ -251,9 +248,8 @@ function project(x, y) {
selectedNodes = [];
function click(d) {
if(selectedForSynthese.includes(d.data.name)){
d.selected = !d.selected;
if(selectedForSynthese.includes(d.data.name)){
d.selected = !d.selected;
d3.select(this).attr("r", function(d) { return this.r.baseVal.value/2 })
.style('fill', function(d) {return color(d.data.type)});
......@@ -270,7 +266,7 @@ function click(d) {
});}
else{
selected = d;
document.getElementById('addNode').disabled = false;
d3.select(this).attr("r", function(d) { return this.r.baseVal.value*2 })
.style('fill', function(d) {return "orange"});
......@@ -279,7 +275,7 @@ function click(d) {
}
}
......@@ -431,12 +427,6 @@ function update(source) {
}
}
......@@ -5,7 +5,7 @@
<link rel="stylesheet" type="text/css" href="/static/stylesheet/style.css">
<% include ../../partials/head %>
<title><%= title%></title>
</head>
<body>
<header>
......@@ -20,74 +20,49 @@
<div class="row">
<div id="colGauche" class="col-md-2">
<div class="container">
<div class="row">
<ul id="menuResume">
<li>
<label>Définitions :</label><br>
<h4><%= debate.definitions%></h4>
</li>
<li>
<label>Sources :</label><br>
<h4><%= debate.sources%></h4>
<br>
<br>
<div class="container">
<br><br>
<button class="btn btn-block btn-primary" onClick="showDefs()">Définitions</button>
<div id="definitions">
<br>
<p class="text-center"><%= debate.definitions%></p>
</div>
</li>
<li>
<label>Date :</label><br>
<input id="dateValue" type="date"><br>
</li>
<li>
<div class="row submit-row">
<button class="btn btn-block submit-form" id="end" >Afficher</button>
<br>
<button class="btn btn-block btn-primary" onClick="showSources()">Sources</button>
<div id="sources">
<br>
<p class="text-center"><%= debate.sources%></p>
</div>
</li>
</ul>
</div>
<!--
<table id="syntheses" class="table table-striped table-bordered">
<thead>
<tr>
<th>Contributions synthétisées</th>
<th>Description</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% if(locals.syntheses) { %>
<% syntheses.forEach(function(synthese) { %>
<tr>
<td><%= synthese.contributions %></td>
<td><%= synthese.timestamp %></td>
<td><%= synthese.description %></td>
<td>
<form id="deleteSynthese/<%= synthese._id %>" method="POST" action="/syntheses/delete/<%= synthese._id %>"></form>
<a onClick="document.forms['deleteSynthese/<%= synthese._id %>'].submit()" class="btn btn-danger">
<i class="fas fa-trash-alt">
Delete
</i>
</a>
</td>
</tr>
<% }); %>
<% } %>
</tbody>
</table> -->
<br>
<button class="btn btn-block btn-primary" onClick="showDateForm()">Remonter le temps</button>
<div id="dateForm">
<br>
<div class="text-center">
<input id="dateValue" type="date"><br><br>
<button class="btn btn-block btn-primary text-center" id="end" >Afficher</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="affTreeMap" class="container col-md-8">
<svg width="672" height="672"></svg>
</div>
<div id="colDroite" class="col-md-2">
<div class="container">
<br><br><br><br><br>
<button class="btn btn-block btn-primary" onClick="showHideContrib()">Contribuer</button>
<br>
<ul id="lContrib">
<li>
<li>
<label>Type :</label>
<select id="type" name="type">
<option value="ouicar">Oui, car...</option>
......@@ -96,11 +71,11 @@
<option value="nonmais">Non, mais...</option>
</select>
</li>
<li>
<li>
<label>Titre :</label>
<input type="text" id="label"><br>
</li>
<li>
<li>
<label>Commentaire :</label>
<textarea id="comment"></textarea> <br>
</li>
......@@ -117,19 +92,19 @@
</div>
</li>
</ul>
<button class="btn btn-block btn-primary" onClick="showHideSynth()">Synthétiser</button>
<br>
<button class="btn btn-block btn-primary" onClick="showHideSynth()">Synthétiser</button>
<br>
<ul id="lSynth">
<li>
<h4 id="form-title">Synthétiser plusieurs noeuds</h4>
Tu as trouvé des points d'accord ? Super ! Sélectionne plusieurs noeuds et propose une synthèse.
<br><hr><br>
</li>
<li>
<li>
<label>Corps de la synthèse :</label>
<textarea id="description"></textarea> <br>
</li>
<li>
<li>
<label>Auteur.e :</label>
<input type="text" id="auteursynthese"><br>
</li>
......@@ -139,9 +114,9 @@
</div>
</li>
</ul>
</div>
</div>
</div>
<!--
<div class="container">
<table id="syntheses" class="table table-striped table-bordered">
......@@ -160,6 +135,7 @@
<td><%= synthese.contributions %></td>
<td><%= synthese.description %></td>
<td><%= synthese.timestamp %></td>
<td>
<form id="deleteSynthese/<%= synthese._id %>" method="POST" action="/syntheses/delete/<%= synthese._id %>"></form>
<a onClick="document.forms['deleteSynthese/<%= synthese._id %>'].submit()" class="btn btn-danger">
......@@ -169,28 +145,29 @@
</a>
</td>
</tr>
<% }); %>
<% }); %>
<% } %>
</tbody>
</table>
</div>
</div>-->
</div>
</div>
<script>
var contributions = <%- JSON.stringify(contributions) %>;
const debate = <%- JSON.stringify(debate) %>;
</script>
const definitions = <%- JSON.stringify(debate.definitions) %>;
const sources = <%- JSON.stringify(debate.sources) %>;
</script>
<script type="text/javascript" src="/static/javascript/menuDebat.js"></script>
<script type="text/javascript" src="/static/javascript/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="/static/javascript/d3.v4.min.js"></script>
<script type="text/javascript" src="/static/javascript/radialTreeMap.js"></script>
<script type="text/javascript" src="/static/javascript/dragndrop.js"></script>
<script type="text/javascript" src="/static/javascript/radialTreeMap.js"></script>
<script type="text/javascript" src="/static/javascript/dragndrop.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</body>
</html>
\ No newline at end of file
</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