Skip to content
Snippets Groups Projects
Unverified Commit 81cfbfde authored by Sebastian Höffner's avatar Sebastian Höffner
Browse files

Refactoring form template and moving out the js/css code.

parent 89729c8c
No related branches found
No related tags found
No related merge requests found
/*pre {
outline: 1px solid #ccc;
padding: 5px;
margin: 5px;
}*/
pre .string {
color: forestgreen;
}
pre .number {
color: darkgoldenrod;
}
pre .boolean {
color: blue;
}
pre .null {
color: magenta;
}
pre .key {
color: maroon;
}
/* syntaxHighlight script and style adapted from
* https://stackoverflow.com/a/7220510, written by user123444555621 */
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
// json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
// GRAPH VISUALIZATION
const viz = new Viz();
/* Modifies the DOM tree and adds new elements for each graph into the
* #graphs element.
* graph_element is the element returned by Viz's drawing call, title is a title to use. */
function add_graph(graph_element, title) {
var graph = document.getElementById('graphs');
var card = document.createElement('div');
card.className = 'card small';
var title_elem = document.createElement('div');
title_elem.className = 'section';
title_elem.innerHTML = '<h3>' + title + '</h3>';
var graph_section = document.createElement('div');
graph_section.className = 'section';
card.appendChild(title_elem);
card.appendChild(graph_section);
graph_section.appendChild(graph_element);
graph.appendChild(card);
}
/* Should be used as an event listener on the input form. Fetches the result and makes sure
* that all response values are shown at their respective places.
*/
function handle_submit(evt) {
evt.preventDefault();
var response = document.getElementById('response');
var graphs = document.getElementById('graphs');
response.innerHTML = '<div class="spinner secondary"></div>';
graphs.innerHTML = '<div class="spinner secondary"></div>';
fetch(evt.target.action, { method: 'POST', body: new FormData(evt.target) })
.then(r => r.json())
.then(r => {
response.innerHTML = syntaxHighlight(JSON.stringify(r, null, 4));
return r;
})
.then(r => {
graphs.innerHTML = '';
var graphsJSON = r['graphs'];
for (let key in graphsJSON) {
viz.renderSVGElement(graphsJSON[key]).then(e => add_graph(e, key));
}
return r;
});
return false;
}
......@@ -2,107 +2,14 @@
{% block head %}
{{ super() }}
<!-- Script and style adapted from https://stackoverflow.com/a/7220510
written by user123444555621 -->
<script>
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
// json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
function init_syntax() {
var pre = document.getElementById('response');
pre.innerHTML = syntaxHighlight(pre.innerHTML);
}
window.addEventListener('load', init_syntax);
</script>
<style>
pre {
outline: 1px solid #ccc;
padding: 5px;
margin: 5px;
}
.string {
color: forestgreen;
}
.number {
color: darkgoldenrod;
}
.boolean {
color: blue;
}
.null {
color: magenta;
}
.key {
color: maroon;
}
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='openccg.css') }}" />
<script src="{{ url_for('static', filename='viz.js') }}"></script>
<script src="{{ url_for('static', filename='lite.render.js') }}"></script>
<script src="{{ url_for('static', filename='openccg.js') }}"></script>
<script>
function add_graph(graph_element, key) {
var graph = document.getElementById('graphs');
var card = document.createElement('div');
card.className = 'card small';
var title = document.createElement('div');
title.className = 'section';
title.innerHTML = '<h3>' + key + '</h3>';
var graph_section = document.createElement('div');
graph_section.className = 'section';
card.appendChild(title);
card.appendChild(graph_section);
graph_section.appendChild(graph_element);
graph.appendChild(card);
}
function handle_submit(evt) {
evt.preventDefault();
document.getElementById('response').innerHTML = '<div class="spinner secondary"></div>';
document.getElementById('graphs').innerHTML = '<div class="spinner secondary"></div>';
fetch(evt.target.action, {method: 'POST', body: new FormData(evt.target)})
.then(r => r.json())
.then(r => {
document.getElementById('response').innerHTML = syntaxHighlight(JSON.stringify(r, null, 4));
return r;
})
.then(r => {
var viz = new Viz();
var graphs = r['graphs'];
document.getElementById('graphs').innerHTML = '';
for (let key in graphs) {
viz.renderSVGElement(graphs[key]).then(e => add_graph(e, key));
}
});
}
function init() {
document.getElementById('sentenceform').addEventListener('submit', handle_submit);
}
window.addEventListener('load', init);
</script>
{% endblock head %}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment