You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.1 KiB
108 lines
3.1 KiB
{% extends 'base.html.twig' %}
|
|
|
|
{% block stylesheets %}
|
|
{{ parent() }}
|
|
<link href="{{ asset('styles/style.css') }}" rel="stylesheet"/>
|
|
<link href="{{ asset('styles/edit_chart.css') }}" rel="stylesheet"/>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{{ parent() }}
|
|
{% endblock %}
|
|
|
|
{% block title %}
|
|
Edit chart
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
{{ parent() }}
|
|
<main>
|
|
{{ form_start(form) }}
|
|
<div id="mainDiv">
|
|
<object id="graphDiv" data={{ "https://spacek.blue/charts/" ~ field_value(form.code) }}></object>
|
|
<div id="settings_div">
|
|
{{ form_row(form.name) }}
|
|
{{ form_row(form.code) }}
|
|
{{ form_row(form.metadata) }}
|
|
<!--<button id="saveBtn">Save</button>
|
|
<button id="drawBtn">Draw</button>-->
|
|
</div>
|
|
</div>
|
|
<div id="secondaryDiv">
|
|
<div id="tableDiv">
|
|
<table id="dataTable">
|
|
<tr>
|
|
{% for col in form.table %}
|
|
<th>{{ form_row(col.col_name) }}{{ form_row(col.color) }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
{% for i in 0..form.table[0].values|length-1 %}
|
|
<tr>
|
|
{% for col in form.table %}
|
|
<td>{{ form_row(col.values[i]) }}</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{{ form_end(form) }}
|
|
<div id="rcMenu">
|
|
<ul>
|
|
<li><a id="rcDelRow" href="">delete row</a></li>
|
|
<li><a id="rcAddRow" href="">add row</a></li>
|
|
<li><a id="rcDelCol" href="">remove column</a></li>
|
|
<li><a id="rcAddCol" href="">copy column</a></li>
|
|
</ul>
|
|
</div>
|
|
<script>
|
|
window.addEventListener('mousedown', function(e) {
|
|
let menu = document.getElementById("rcMenu")
|
|
|
|
menu.style.display = "none"
|
|
})
|
|
|
|
document.getElementById("dataTable").addEventListener('contextmenu', function(e) {
|
|
const pos = {
|
|
x: e.clientX,
|
|
y: e.clientY
|
|
}
|
|
|
|
let menu = document.getElementById("rcMenu")
|
|
let table = document.getElementById("dataTable")
|
|
menu.style.display = "block"
|
|
|
|
if (pos.x + menu.clientWidth <= table.clientWidth)
|
|
menu.style.left = pos.x + "px"
|
|
else
|
|
menu.style.left = pos.x - menu.clientWidth + "px"
|
|
|
|
if (pos.y + menu.clientHeight <= window.innerHeight + document.documentElement.scrollTop)
|
|
menu.style.top = pos.y + "px"
|
|
else
|
|
menu.style.top = pos.y - menu.clientHeight + "px"
|
|
|
|
//menu.style.top = e.clientY + document.documentElement.scrollTop + 'px'
|
|
//menu.style.left = e.clientX + document.documentElement.scrollLeft + 'px'
|
|
//rcTarget = e.currentTarget
|
|
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
})
|
|
|
|
let labels = [...document.getElementsByClassName("submenuLabel")]
|
|
labels.forEach(label => {
|
|
label.addEventListener('click', e => {
|
|
let submenuDiv = e.target.nextElementSibling
|
|
|
|
if (getComputedStyle(submenuDiv).display == "block")
|
|
submenuDiv.style.display = "none"
|
|
else
|
|
submenuDiv.style.display = "block"
|
|
})
|
|
})
|
|
|
|
</script>
|
|
</main>
|
|
{% endblock %}
|