-
Notifications
You must be signed in to change notification settings - Fork 0
/
form.html
121 lines (107 loc) · 5.93 KB
/
form.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
{% extends "faustedition.html" %}
{% block d3script %}
<script type="application/javascript">
async function updateURLs(query) {
const searchString = '?' + new URLSearchParams(query).toString(),
location = new URL(window.location);
if (location.search !== searchString) {
location.search = searchString;
history.replaceState(null, '', location)
const downloadArea = document.getElementById('download-graph');
for (const a of downloadArea.getElementsByTagName("a")) {
a.search = searchString;
}
}
}
async function getDotStr() {
const form = document.getElementById('subgraph-form'),
updating = document.getElementById('updating'),
formdata = new FormData(form);
updating.style.visibility = "visible";
updateURLs(formdata);
const response = await fetch('subgraph/dot', {method: "POST", body: formdata});
if (response.status === 200)
return await response.text();
else
throw await response.text();
}
const graphviz = d3.select('#refgraph').graphviz();
const transitionFactory = () => d3.transition().duration(750);
const updateGraph = function updateGraph() {
getDotStr().then(dot => {
graphviz.transition(transitionFactory).renderDot(dot);
}).catch(reason => console.error(reason))
.finally(() => updating.style.visibility = "hidden");
}
d3.selectAll('#subgraph-form input[type=checkbox]').on("click", updateGraph);
d3.selectAll('#subgraph-form select').on("input", updateGraph);
d3.selectAll('#subgraph-form input[type=text]').on("blur", updateGraph)
updateGraph();
function contentRequired(formSelector, nonEmptyFieldName) {
const form = document.querySelector(formSelector),
nonEmptyField = form.elements[nonEmptyFieldName],
submitButton = form.querySelector('input[type=submit]'),
checkInput = function() {
submitButton.disabled = !nonEmptyField.value; /* ← äußere Variablen */
};
nonEmptyField.addEventListener("input", checkInput);
checkInput();
}
contentRequired('#subgraph-form', 'nodes');
</script>
{% endblock %}
{% block content %}
<div id="refgraph"></div>
<form id="subgraph-form" method="get" class="pure-g-r pure-form">
<section class="pure-u-1-3">
<h3>Zentrale Knoten
<small class="pull-right"><label><input type="checkbox" name="nohl" id="nohl" {% if nohl %}checked{% endif %}> nicht hervorheben</label></small>
</h3>
<p><input type="text" name="nodes" id="nodes" value="{{ nodes }}" style="width: 100%;" placeholder="2 V H.13"></p>
<p><input type="checkbox" name="context" id="context" {% if context %}checked{% endif %}> <label for="context">Nachbarknoten</label></p>
<p><input type="checkbox" name="assertions" id="assertions" {% if assertions %}checked{% endif %} <label for="assertions">unmittelbare Aussagen über Kernknoten</label> </p>
<!--p><input type="submit" class="pure-button pure-button-primary" value="Teilgraph zeichnen"></p-->
<p><label for="model">Modell: </label>
<select id="model" name="model" value="{{ model }}">
{% for model_name in models %}
<option value="{{ model_name }}">{{ model_name }}</option>
{% endfor %}
</select>
</p>
</section>
</section>
<section class="pure-u-1-3">
<h3>Zusätzliche Pfade</h3>
<p><input type="checkbox" name="abs_dates" id="abs_dates" {% if abs_dates %}checked{% endif %}> <label for="abs_dates">absolute Datierungen rechtfertigen</label></p>
<p><label for="extra">Pfade von/zu (falls verfügbar): </label><br/>
<input type="text" name="extra" id="extra" value="{{ extra }}" placeholder="A, 2 H" style="width: 100%"><br />
<input type="checkbox" name="paths_wo_timeline" id="paths_wo_timeline" {% if paths_wo_timeline %}checked{% endif %}> <label for="paths_wo_timeline">ohne Timeline</label>
</p>
<p class="pure-alert pure-alert-warning pure-invisible" id="updating">
Berechne aktualisierten Graphen …
</p>
</section>
<section class="pure-u-1-3">
<h3>Kantenauswahl und -gestaltung:</h3>
<p><input type="checkbox" name="induced_edges" id="induced_edges" {% if induced_edges %}checked{% endif %}> <label for="induced_edges">alle induzierten Kanten</label></p>
<p><input type="checkbox" name="ignored_edges" id="ignored_edges" {% if ignored_edges %}checked{% endif %}> <label for="ignored_edges">ignorierte (graue) Kanten</label> </p>
<p><input type="checkbox" name="syn" id="syn" {% if syn %}checked{% endif %}> <label for="syn">Kanten für »ungefähr gleichzeitig«</label> </p>
<p><input type="checkbox" name="tred" id="tred" {% if tred %}checked{% endif %}> <label for="tred">Transitive Reduktion</label> </p>
<p><input type="checkbox" name="no_edge_labels" id="no_edge_labels" {% if no_edge_labels %}checked{% endif %}> <label for="no_edge_labels">keine Kantenbeschriftung</label> </p>
</form>
{% endblock %}
{%- block title -%}
· Makrogenese-Teilgraph: {{ nodes }}
{%- endblock -%}
{% block download_current %}
<div id="download-graph" class="pure-u-1-3 pure-gap">
<a>aktueller Graph</a>
<a href="subgraph/pdf?{{ query }}"><i class="fa fa-file-pdf"></i> als PDF</a>
<a href="subgraph/dot?{{ query }}"><i class="fa fa-doc-text"></i> als GraphViz .dot</a>
<a href="subgraph/svg?{{ query }}"><i class="fa fa-file-image"></i> als SVG</a>
</div>
{% endblock %}
{% block helpurl %}subgraph/help{% endblock %}
{%- block breadcrumbs -%}
[{caption: 'Makrogenese', link: '/macrogenesis'}, {caption: 'Teilgraph: {{ nodes }}'}]
{%- endblock -%}