Commit 2c0f71ba authored by Raphaël Jakse's avatar Raphaël Jakse 💬 Committed by Raphaël Jakse

initial commit

parents
/suivi-contenu.js
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta charset="utf-8" />
<title> Suivi de projets Algoo </title>
<link rel="stylesheet" href="suivi.css" />
<script src="suivi.js"></script>
<script src="suivi-contenu.js"></script>
</head>
<body>
<h1> Suivi de projets Algoo </h1>
</body>
</html>
html {
font-family:sans-serif;
}
a {
text-decoration:none;
}
p {
max-width:50ex;
}
.project-tracking-elem-list {
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:stretch;
}
.project-tracking-elem {
border:1px solid #AA5;
margin:1ex;
position:relative;
background:#FFD;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.project-tracking-elem-done {
background:#CFC;
opacity:0.5;
transition:250ms;
}
.project-tracking-elem-done .project-tracking-elem-title:before {
content:"✓";
color:green;
display:inline-block;
vertical-align:center;
padding-right:0.5ex;
}
.project-tracking-elem-done:hover {
opacity:1;
}
.project-tracking-elem-details {
font-size:small;
padding:0 1ex;
}
.project-tracking-elem-persons {
text-align:right;
}
section {
margin-left:1em;
border-left: 2px solid silver;
}
section > h1 {
background:white;
padding-top: 1em;
padding-bottom: 1ex;
margin-left:-1ex;
}
.project-tracking-elem-header {
display:flex;
flex-direction:row;
justify-content:space-between;
margin-top:0;
}
.project-tracking-elem-footer {
font-size:small;
color:red;
}
.project-tracking-elem-footer > p {
margin-top:0;
margin-bottom:0;
}
.project-tracking-elem-header > p {
padding-top:0;
margin:0 1ex;
}
.project-tracking-elem-labels {
color:maroon;
font-style:italic;
}
.project-tracking-elem-project {
color:gray;
font-size:small;
}
.project-tracking-elem-title {
font-weight:bold;
text-align:center;
flex:1;
padding:1ex;
}
section > h2 {
margin-left:0.7em;
}
class ProjectTrackingElem {
constructor (name) {
this.name = name
}
toString () {
return this.name
}
}
class Project extends ProjectTrackingElem {
constructor (parentProject, name, link) {
super(name)
Project.projects.push(this)
this.elems = []
this.parent = parentProject
this.link = link
}
addElem (elem) {
this.elems.push(elem)
}
toString () {
return (
this.parent
? this.parent.toString() + ' > ' + this.name
: this.name
)
}
}
Project.projects = []
class Person extends ProjectTrackingElem {
constructor (name) {
super(name)
Person.persons.push(this)
this.elems = []
}
addElem (elem) {
this.elems.push(elem)
}
}
Person.persons = []
const nobody = new Person('nobody')
class Label extends ProjectTrackingElem {}
class Elem extends ProjectTrackingElem {
constructor (info) {
super(info.text)
for (const member of ['project', 'labels', 'todo', 'difficulty', 'link', 'done']) {
this[member] = info[member]
}
this.persons = (
info.who
? (
info.who instanceof Person
? [info.who]
: info.who // TODO error handling : checks whether it is an array
)
: [nobody]
)
if (this.persons[0] === nobody) {
console.warn('Element', info.text, 'has nobody')
}
this.project.addElem(this)
for (const person of this.persons) {
person.addElem(this)
}
this.blockedByMe = info.blocks || []
this.blockedBy = info.blockedBy || []
}
blocks (blocked) {
this.blockedByMe.push(blocked)
blocked.blockedBy.push(this)
}
markAsDone () {
this.done = true
}
render (asLi = false) {
const div = document.createElement(asLi ? 'li' : 'div')
div.className = 'project-tracking-elem' + (this.done ? ' project-tracking-elem-done' : '')
const header = document.createElement('div')
header.className = 'project-tracking-elem-header'
const project = document.createElement('p')
project.className = 'project-tracking-elem-project'
project.textContent = this.project
header.appendChild(project)
if (this.labels) {
const labels = document.createElement('p')
labels.className = 'project-tracking-elem-labels'
labels.textContent = this.labels.join(', ')
header.appendChild(labels)
}
const persons = document.createElement('p')
persons.className = 'project-tracking-elem-persons'
persons.textContent = this.persons.join(', ')
header.appendChild(persons)
div.appendChild(header)
const title = document.createElement('p')
title.className = 'project-tracking-elem-title'
if (this.link) {
title.appendChild(document.createElement('a'))
title.lastChild.textContent = this.name
title.lastChild.href = this.link
} else {
title.textContent = this.name
}
div.appendChild(title)
if (this.todo || this.difficulty) {
const tododifficulty = document.createElement('div')
tododifficulty.className = 'project-tracking-elem-details'
if (this.todo) {
const todo = document.createElement('p')
todo.className = 'project-tracking-elem-todo'
todo.textContent = 'À faire : ' + this.todo
tododifficulty.appendChild(todo)
}
if (this.difficulty) {
const difficulty = document.createElement('p')
difficulty.className = 'project-tracking-elem-difficulty'
difficulty.textContent = 'Difficulté : ' + this.difficulty
tododifficulty.appendChild(difficulty)
}
div.appendChild(tododifficulty)
}
const footer = document.createElement('div')
footer.className = 'project-tracking-elem-footer'
var blockedBy = this.blockedBy.filter(e => !e.done)
if (blockedBy.length) {
const blockedByDOM = document.createElement('p')
blockedByDOM.className = 'project-tracking-elem-blocked-by'
blockedByDOM.textContent = 'Bloqué par : ' + blockedBy.join(', ')
footer.appendChild(blockedByDOM)
}
if (this.blockedByMe.length) {
const blocks = document.createElement('p')
blocks.className = 'project-tracking-elem-blocked-by'
blocks.textContent = 'Bloque : ' + this.blockedByMe.join(', ')
footer.appendChild(blocks)
}
div.appendChild(footer)
return div
}
}
function renderElems (elems) {
const ul = document.createElement('ul')
ul.className = 'project-tracking-elem-list'
for (const element of elems) {
ul.appendChild(element.render(true))
}
return ul
}
function renderProjects (projects) {
const section = document.createElement('section')
for (const project of projects) {
// const elems = project.elems.filter(e => !e.done);
const elems = project.elems
if (elems.length) {
section.appendChild(document.createElement('h1'))
if (project.link) {
section.lastChild.appendChild(document.createElement('a'))
section.lastChild.lastChild.textContent = 'Projet : ' + project
section.lastChild.lastChild.href = project.link
} else {
section.lastChild.textContent = 'Projet : ' + project
}
section.appendChild(renderElems(elems))
}
}
return section
}
window.addEventListener('DOMContentLoaded', function DOMLoad () {
const elements = document.createElement('section')
elements.appendChild(document.createElement('h1'))
elements.lastChild.textContent = 'Élements suivis'
elements.appendChild(renderProjects(Project.projects))
document.body.appendChild(elements)
const persons = document.createElement('section')
persons.appendChild(document.createElement('h1'))
persons.lastChild.textContent = 'Personnes'
for (const person of Person.persons) {
const h2 = document.createElement('h2')
h2.textContent = person
persons.appendChild(h2)
// const elems = person.elems.filter(e => !e.done); // FIXME put in a method
const elems = person.elems
if (elems.length) {
persons.appendChild(renderElems(elems))
}
}
document.body.appendChild(persons)
})
function project (name, link) { return new Project(null, name, link) }
function subproject (parent, name, link) { return new Project(parent, name, link) }
function person (name) { return new Person(name) }
function label (name) { return new Label(name) }
function elem (info) { return new Elem(info) }
function done (elem) { elem.markAsDone() }
function date (d) { /* TODO */ }
function blocks (blocking, blocked) { blocking.blocks(blocked) }
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