+
+
+<form method="post" action="">
+ {% csrf_token %}
+ <input type="hidden" name="hints" id="hints">
+ <button class="btn btn-primary">
+ Zapisz wskazówki
+ </button>
+</form>
+
+{% endblock %}
+
+
+{% block add_js %}
+<script type="text/javascript">
+ $(function() {
+
+ let hints = {{ hints|safe }};
+ let mp3 = {{ mp3|safe }};
+ let headers = {{ headers|safe }};
+ let headers_other = {{ headers_other|safe }};
+
+ let table = $("#sync-table tbody");
+
+ function showTable() {
+ $("#hints").val(JSON.stringify(hints));
+
+ let mI = 0;
+ let hI = 0;
+ let row = 0;
+ let hint;
+ table.empty();
+ while (mI < mp3.length || hI < headers.length) {
+ let tr = $("<tr>");
+
+ if (row < hints.length) {
+ hint = hints[row];
+ } else {
+ hint = [];
+ }
+ tr.data('hint', hint);
+
+ let td = $("<td>");
+ if (headers_other.length) {
+ td.append(
+ $('<button class="btn btn-primary mr-1">').text('+').click(function() {
+ hintAdd(tr);
+ })
+ );
+ }
+ td.append(
+ $('<button class="btn btn-primary">').text('-').click(function() {
+ hintRm(tr);
+ })
+ );
+ td.appendTo(tr);
+ if (hint[0] == '+') {
+ tr.addClass('hit-add');
+ // select?
+ let sel = $("<select>");
+ sel.append($("<option>").text('wybierz'));
+ $.each(headers_other, (i, e) => {
+ let opt = $("<option>").text(
+ e[1] + ' (' + e[0] + ')'
+ ).val(i);
+ if (i == hint[1]) {
+ opt.attr('selected', 'selected')
+ }
+ sel.append(opt)
+ });
+ sel.change(function() {
+ tr.data('hint', ['+', $(this).val()]);
+ refreshTable();
+ });
+
+ $("<td>").append(sel).appendTo(tr);
+ } else {
+ let td = $("<td>").text(headers[hI][1]).appendTo(tr);
+ if (hint[0] == '-') {
+ tr.addClass('text-muted');
+ }
+ hI ++;
+ }
+
+ if (hint[0] == '-') {
+ $("<td>").appendTo(tr);
+ } else {
+ $("<td>").text(mp3[mI]).appendTo(tr);
+ mI ++;
+ }
+ table.append(tr);
+ row ++;
+ }
+ }
+
+ showTable();
+
+ function refreshTable() {
+ hints = [];
+ $("tr", table).each((i, e) => {
+ hint = $(e).data('hint')
+ if (hint !== null) {
+ hints.push(hint)
+ }
+ });
+ showTable();
+ }
+
+ function hintAdd(tr) {
+ $("<tr>").data('hint', ['+']).insertBefore(tr);
+ refreshTable();
+ }
+ function hintRm(tr) {
+ let $tr = $(tr);
+ let hint = $tr.data('hint');
+ if (hint[0] == '+') {
+ $tr.data('hint', null)
+ } else if (hint[0] == '-') {
+ $tr.data('hint', [])
+ } else {
+ $tr.data('hint', ['-'])
+ }
+ refreshTable();
+ }
+ });
+</script>