Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
W
web-openccg
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Iterations
Wiki
Requirements
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Locked files
Deploy
Releases
Package Registry
Model registry
Operate
Terraform modules
Monitor
Incidents
Service Desk
Analyze
Value stream analytics
Contributor analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
This is an archived project. Repository and other project resources are read-only.
Show more breadcrumbs
ease-ph
DeepLanguageUnderstanding
web-openccg
Commits
81cfbfde
Unverified
Commit
81cfbfde
authored
6 years ago
by
Sebastian Höffner
Browse files
Options
Downloads
Patches
Plain Diff
Refactoring form template and moving out the js/css code.
parent
89729c8c
No related branches found
Branches containing commit
No related tags found
No related merge requests found
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
app/static/openccg.css
+20
-0
20 additions, 0 deletions
app/static/openccg.css
app/static/openccg.js
+83
-0
83 additions, 0 deletions
app/static/openccg.js
app/templates/form.html
+2
-95
2 additions, 95 deletions
app/templates/form.html
with
105 additions
and
95 deletions
app/static/openccg.css
0 → 100644
+
20
−
0
View file @
81cfbfde
/*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
;
}
This diff is collapsed.
Click to expand it.
app/static/openccg.js
0 → 100644
+
83
−
0
View file @
81cfbfde
/* 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, '&').replace(/</g, '<').replace(/>/g, '>');
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
;
}
This diff is collapsed.
Click to expand it.
app/templates/form.html
+
2
−
95
View file @
81cfbfde
...
...
@@ -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, '&').replace(/
<
/g, '<'
)
.replace
(
/
>
/g, '>'
)
;
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 %}
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment