Select Git revision
index.ejs 4.39 KiB
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<style type="text/css">
html, body {
font: 10pt arial;
}
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
function FormComponent(props) {
var container = document.getElementById('mynetwork');
const [allNodes, setAllNodes] = React.useState([]);
const [allEdges, setAllEdges] = React.useState([]);
const [nodeMin, setNodeMin] = React.useState(10);
const [edgeMin, setEdgeMin] = React.useState(5);
const [promotion, setPromotion] = React.useState(2021);
const [submitted, setSubmitted] = React.useState(true);
const [ready, setReady] = React.useState(false);
const [error, setError] = React.useState(false);
// React.useEffect(() => {
// }, [ready, error])
React.useEffect(() => {
setReady(false);
setError(false);
axios.post('/', {promotion: promotion})
.then(result => {
setAllEdges(result.data.all_edges);
setAllNodes(result.data.all_nodes);
setReady(true);
})
.catch(err => setError(true))
}, [promotion])
function handleSubmit (event) {
event.preventDefault();
let nodes = [];
allNodes.forEach(node => {
if (node.value >= nodeMin) {
nodes.push(node);
}
})
let edges = [];
allEdges.forEach(edge => {
if (edge.value >= edgeMin) {
edges.push(edge);
} })
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot'
}
};
let network = new vis.Network(container, data, options);
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="promotion">Promotion : </label>
<input type="number" id="promotion" value={promotion} onChange={e => setPromotion(e.target.value)} />
{error
? <p style={{color: "red"}}>Erreur</p>
: (ready
? <p style={{color: "green"}}>Prêt</p>
: <p style={{color: "yellow"}}>Chargement</p>
)}
</div>
<div>
<label htmlFor="nodeMin">Nombre par asso :</label>
<input type="number" id="nodeMin" value={nodeMin} onChange={e => setNodeMin(e.target.value)} />
</div>
<div>
<label htmlFor="edgeMin">Nombre par lien :</label>
<input type="number" id="edgeMin" value={edgeMin} onChange={e => setEdgeMin(e.target.value)} />
</div>
<button type="submit">Générer</button>
</form>
)
}
ReactDOM.render(React.createElement(FormComponent), document.getElementById('form'));
function draw() {
var container = document.getElementById('mynetwork');
axios.post('/', {promotion: 2022})
.then(result => {
all_nodes = result.data.all_nodes;
all_edges = result.data.all_edges;
let nodes = [];
all_nodes.forEach(node => {
if (node.value >= 5) {
nodes.push(node);
}
})
let edges = [];
all_edges.forEach(edge => {
if (edge.value >= 3) {
edges.push(edge);
}
})
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
}
}; let network = new vis.Network(container, data, options);
})
.catch(err => console.log(err))
}
</script>
</head>
<body>
<div id="form"></div>
<div id="mynetwork"></div>
</body>
</html>