-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
74 lines (74 loc) · 3.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<script src="vendor/d3.min.js"></script>
<script src="vendor/lodash.min.js"></script>
</head>
<body>
<h2>D3 Gantt tasks/slots scheduler:</h2>
<div id="chart"></div>
<hr>
<b>TIMELINE:</b> MOVE
<button onclick="moveAxisX('left')">LEFT</button>
<button onclick="moveAxisX('right')">RIGHT</button>
| ZOOM IN/OUT
<button onclick="zoomAxisX('in')">IN</button>
<button onclick="zoomAxisX('out')">OUT</button>
<button onclick="zoomViewAllAxisX()">VIEW ALL</button>
| Or use <b>click+move</b> & <b>mousewheel</b> directly on graph.
<hr>
<b>START DATE ALL:</b> MOVE
<button onClick="moveStartDate(-10 * 60)">-10 MIN</button>
<button onClick="moveStartDate(10 * 60)">+10 MIN</button>
| current = <span id="startDate"></span>
<hr>
<b>SLOT:</b>
<button onClick="buildAutoSlot()">BUILD AUTO</button> |
<button onClick="removeAllSlot()">REMOVE ALL</button> Or <b>double click</b> on slot to remove it. | ADD
<button onClick="addSlot('A')">A</button>
<button onClick="addSlot('B')">B</button>
<button onClick="addSlot('C')">C</button>
<button onClick="addSlot('D')">D</button>
<button onClick="addSlot('E')">E</button>
<button onClick="addSlot('F')">F</button>
<button onClick="addSlot('X')">X</button>
<hr>
<div id="selection"></div>
<hr>
<p>
TODO<br>
✓ add rect inside slot to bind removeSlot() on click / or just use dblclick.<br>
✓ add button to 'buils auto' all slots.<br>
- find a way to 'scroll' horizontally when too many items on Y axis to be visible.<br>
✓ augment a slot from the left properly.<br>
✓ when dragging quickly to another slot, 'stick' it to the slot instead of let large space between them.<br>
✓ when add a slot, if not visible, extend viewport to view it.<br>
✓ added slots failed when dragged and could overlap others..<br>
✓ move startDateAll and update all graph (item with prop startAfter instead of start).<br>
✓ adapt slot height compared to Y items number.<br>
✓ allow move on x axis by dragging on graph.<br>
✓ improve minute display on x axis (more point+text).<br>
✓ add new slot for specific Y item > if already line add to it else create new line (update y axis).<br>
✓ have current slot highlighted with border and infos elsewhere with NAME/START/STOP and btnRemove.<br>
</p>
<script src="app.js"></script>
<style>
body {
margin: 0;
}
.tick line{
opacity: 0.2;
}
.dateStartAll {
stroke: green;
}
.zone.active {
stroke: blue;
stroke-width: 3px;
}
.drag-zone {
opacity: 0;
}
</style>
</body>
</html>