From c04c824585c4d7555d2953c9604b64a3036b9c5c Mon Sep 17 00:00:00 2001 From: Vivek Santayana Date: Wed, 22 Jun 2022 01:58:36 +0100 Subject: [PATCH] Editor client javascript and css --- ref-test/app/editor/static/css/editor.css | 22 +- ref-test/app/editor/static/js/editor.js | 340 +++++++++++++++------- ref-test/app/editor/static/js/script.js | 150 +--------- 3 files changed, 276 insertions(+), 236 deletions(-) diff --git a/ref-test/app/editor/static/css/editor.css b/ref-test/app/editor/static/css/editor.css index 77588ad..84544fd 100644 --- a/ref-test/app/editor/static/css/editor.css +++ b/ref-test/app/editor/static/css/editor.css @@ -13,8 +13,7 @@ } .editor-controls a { - margin: 0 10px; - z-index: 10; + margin: 10px 10px; } .editor-controls a i { @@ -66,4 +65,23 @@ .panel-button i { font-size: larger; +} + +.editor-panel, .info-panel { + margin: 30pt auto; +} + +.info-panel { + display: none; +} + +.control-panel { + margin-left: auto; + margin-right: 0; + width:fit-content; +} + +#alert-box { + margin: 30px auto; + max-width: 460px; } \ No newline at end of file diff --git a/ref-test/app/editor/static/js/editor.js b/ref-test/app/editor/static/js/editor.js index 948aad6..85e9fd1 100644 --- a/ref-test/app/editor/static/js/editor.js +++ b/ref-test/app/editor/static/js/editor.js @@ -1,35 +1,184 @@ -const root = $('#editor-root') -Sortable.create(root.get(0), {handle: '.move-handle', onEnd: function(evt) {renumber_blocks()}}) +// Variable Declarations +const $root = $('#editor-root') +const target = $root.data('target') +const id = $root.data('id') + +const $control_panel = $('.control-panel') +const $info_panel = $('.info-panel') +const $editor_panel = $('.editor-panel') var element_index = 0 -var question_index = 0 -root.on('click', '.panel-controls > a', function(event) { +// Initialise Sortable and trigger renumbering on end of drag +Sortable.create($root.get(0), {handle: '.move-handle', onEnd: function(evt) {renumber_blocks()}}) + +// Info Button Listener +$control_panel.find('button').click(function(event){ + if ($info_panel.is(":hidden")) { + $editor_panel.hide() + $info_panel.fadeIn() + $(this).addClass('active') + } else { + $info_panel.hide() + $editor_panel.fadeIn() + $(this).removeClass('active') + } + event.preventDefault() +}) + +// Control Button Listeners +$root.on('click', '.block-controls > a', function(event){ + event.preventDefault() + var action = $(this).data('action') + var root_accordion = $(this).closest('div').siblings('.accordion') + if (action == 'add-question') { + var question = generate_single_question(root_container_id=`#${root_accordion.attr('id')}`) + $(question).appendTo(root_accordion).hide().fadeIn() + if (root_accordion.children().length > 1 ) { + root_accordion.find('.panel-controls > a[data-action="delete"]').removeClass('disabled') + } else { + root_accordion.find('.panel-controls > a[data-action="delete"]').addClass('disabled') + } + renumber_blocks() + } +}) + +$root.on('click', '.panel-controls > a', function(event) { event.preventDefault() event.stopPropagation() var action = $(this).data('action') var element = $(this).closest('.accordion-item') var root_container = $(this).closest('.accordion') if (action == 'delete') { - element.remove() - console.log(root_container.get(0) == root.get(0)) - if (root_container.get(0) != root.get(0) && root_container.children().length < 2 ) { - root_container.find('.panel-controls > a[data-action="delete"]').addClass('disabled') - } + element.fadeOut(function(){ + $(this).remove() + renumber_blocks() + if (root_container.get(0) != $root.get(0) && root_container.children().length < 2 ) { + root_container.find('.panel-controls > a[data-action="delete"]').addClass('disabled') + } + }) } else if (action == 'add-question') { var question = generate_single_question(root_container_id=`#${root_container.attr('id')}`) - $(question).insertBefore(element) - if (root_container.get(0) != root.get(0) && root_container.children().length > 1 ) { + $(question).insertBefore(element).hide().fadeIn() + if (root_container.get(0) != $root.get(0) && root_container.children().length > 1 ) { root_container.find('.panel-controls > a[data-action="delete"]').removeClass('disabled') } } else if (action == 'add-block') { var block = generate_block(root_container_id=`#${root_container.attr('id')}`) - $(block).insertBefore(element) + $(block).insertBefore(element).hide().fadeIn() + var block_container = $(`#element${element_index-1}`).children().find('.accordion') + Sortable.create(block_container.get(0), {handle: '.move-handle', onEnd: function(evt) {renumber_blocks()}}) + var question = generate_single_question(root_container_id=`#${block_container.attr('id')}`) + block_container.append(question) + block_container.find('.panel-controls > a[data-action="delete"]').addClass('disabled') } renumber_blocks() }) -root.on('change', '.form-select.question-type', function(event) { +$root.on('click', '.option-controls > a', function(event) { + event.preventDefault() + var action = $(this).data('action') + var options = $(this).closest('div.option-controls').siblings('.options') + var length = options.children().length + var correct = $(this).closest('div.option-controls').siblings().find('.question-correct') + if (action == 'delete') { + if (length > 2) { + options.children().last().fadeOut(function(){ + $(this).remove() + length = options.children().length + if (length <= 2) { + options.siblings('div.option-controls').children('a[data-action="delete"]').addClass('disabled') + } else { + options.siblings('div.option-controls').children('a[data-action="delete"]').removeClass('disabled') + } + }) + correct.children().last().fadeOut(function(){ + $(this).remove() + }) + } + } else { + var opt = ` +
+ ${length} + +
+ ` + $(opt).appendTo(options).hide().fadeIn() + var cor = `` + correct.append(cor) + } + length = options.children().length + if (length <= 2) { + $(this).closest('div.option-controls').children('a[data-action="delete"]').addClass('disabled') + } else { + $(this).closest('div.option-controls').children('a[data-action="delete"]').removeClass('disabled') + } +}) + +$('.editor-controls > a').click(function(event){ + event.preventDefault() + var action = $(this).data('action') + var root_accordion = $(this).closest('div').siblings('.accordion') + if (action == 'add-question') { + var obj = generate_single_question(root_container_id=`#${root_accordion.attr('id')}`) + $(obj).appendTo($root).hide().fadeIn() + } else if (action == 'add-block') { + var obj = generate_block(root_container_id=`#${root_accordion.attr('id')}`) + $(obj).appendTo($root).hide().fadeIn() + var block_container = $(`#element${element_index-1}`).children().find('.accordion') + Sortable.create(block_container.get(0), {handle: '.move-handle', onEnd: function(evt) {renumber_blocks()}}) + var question = generate_single_question(root_container_id=`#${block_container.attr('id')}`) + block_container.append(question) + block_container.find('.panel-controls > a[data-action="delete"]').addClass('disabled') + } else if (action == 'discard') { + window.location.href = '/admin/settings/questions/' + } else if (action == 'delete') { + $.ajax({ + url: '/admin/settings/questions/delete/', + type: 'POST', + data: JSON.stringify({ + 'id': id, + 'action': action + }), + contentType: 'application/json', + success: function(response) { + window.location.href = '/admin/settings/questions/' + }, + error: function(response) { + error_response(response) + } + }) + } else if (action == 'save') { + var input = parse_input() + var def = $('.dataset-default').is(':checked') + var name = $('.dataset-name').val() + var creator = $('.dataset-creator').val() + console.log([def, name, creator]) + $.ajax({ + url: target, + type: 'POST', + data: JSON.stringify({ + 'id': id, + 'action': 'upload', + 'data': input, + 'default': def, + 'name': name, + 'creator': creator + }), + contentType: 'application/json', + success: function(response) { + window.location.href = '/admin/settings/questions/' + }, + error: function(response) { + error_response(response) + } + }) + } + renumber_blocks() +}) + +// Question Type Select Menu Listener +$root.on('change', '.form-select.question-type', function(event) { event.preventDefault() var type = $(this).val() var options = $(this).closest('div.input-group').siblings('.options') @@ -48,7 +197,7 @@ root.on('change', '.form-select.question-type', function(event) { ` - options.append(opt) + $(opt).appendTo(options).hide().fadeIn() option_controls.children('a').addClass('disabled') var cor = ` @@ -64,66 +213,65 @@ root.on('change', '.form-select.question-type', function(event) { } }) -root.on('click', '.option-controls > a', function(event) { - event.preventDefault() - var action = $(this).data('action') - var options = $(this).closest('div.option-controls').siblings('.options') - var length = options.children().length - var correct = $(this).closest('div.option-controls').siblings().find('.question-correct') - if (action == 'delete') { - if (length > 2) { - options.children().last().remove() - correct.children().last().remove() +// Data and Rendering Functions +function renumber_blocks () { + $( ".block-number" ).each(function(index) { + $( this ).text($( this ).closest('.accordion-item').index() + 1) + }) +} + +function parse_input() { + var data = [] + var element = {} + var question = {} + var block_container + var q_no = 0 + $root.children().each(function(index) { + element = {} + if ($(this).data('type') == 'block') { + element['type'] = 'block' + element['question_header'] = $(this).find('.block-header-text').val() + element['questions'] = [] + block_container = $(this).children().find('.accordion') + block_container.children().each(function(index) { + question = {} + question['q_no'] = q_no + question['text'] = $(this).find('.question-text').val() + question['q_type'] = $(this).find('.question-type').val() + question['correct'] = parseInt($(this).find('.question-correct').val()) + question['options'] = [] + $(this).find('.options').find('input').each(function(index) { + question['options'].push($(this).val()) + }) + question['tags'] = $(this).find('.question-tags').val().split('\r\n') + element['questions'].push(question) + q_no ++ + }) + } else if ( $(this).data('type') == 'question') { + element['type'] = 'question' + element['q_no'] = q_no + element['text'] = $(this).find('.question-text').val() + element['q_type'] = $(this).find('.question-type').val() + element['correct'] = parseInt($(this).find('.question-correct').val()) + element['options'] = [] + $(this).find('.options').find('input').each(function(index) { + element['options'].push($(this).val()) + }) + element['tags'] = $(this).find('.question-tags').val().split('\r\n') + q_no ++ } - } else { - var opt = ` -
- ${length} - -
- ` - options.append(opt) - var cor = `` - correct.append(cor) - } - length = options.children().length - if (length <= 2) { - $(this).closest('div.option-controls').children('a[data-action="delete"]').addClass('disabled') - } else { - $(this).closest('div.option-controls').children('a[data-action="delete"]').removeClass('disabled') - } -}) - - - -$('.editor-controls > a').click(function(event){ - event.preventDefault() - var action = $(this).data('action') - var root_accordion = $(this).closest('div').siblings('.accordion') - if (action == 'add-question') { - var obj = generate_single_question(root_container_id=`#${root_accordion.attr('id')}`) - root.append(obj) - } else if (action == 'add-block') { - var obj = generate_block(root_container_id=`#${root_accordion.attr('id')}`) - root.append(obj) - var block_container = $(`#element${element_index-1}`).children().find('.accordion') - Sortable.create(block_container.get(0), {handle: '.move-handle', onEnd: function(evt) {renumber_blocks()}}) - var question = generate_single_question(root_container_id=`#${block_container.attr('id')}`) - block_container.append(question) - block_container.find('.panel-controls > a[data-action="delete"]').addClass('disabled') - } else if (action == 'done') { - parse_data(data) - } - renumber_blocks() -}) + data.push(element) + }) + return data +} function parse_data(data) { var block, obj, new_block, block_container, question, _question, new_question, options, correct, opt, tags for (let c = 0; c < data.length; c++) { block = data[c] if (block['type'] == 'block') { - obj = generate_block(root_container_id=`#${root.attr('id')}`) - root.append(obj) + obj = generate_block(root_container_id=`#${$root.attr('id')}`) + $root.append(obj) new_block = $(`#element${element_index-1}`) new_block.find('.block-header-text').val(block['question_header']).trigger('change') block_container = $(`#element${element_index-1}`).children().find('.accordion') @@ -163,8 +311,8 @@ function parse_data(data) { } } else { question = block - obj = generate_single_question(root_container_id=`#${root.attr('id')}`) - root.append(obj) + obj = generate_single_question(root_container_id=`#${$root.attr('id')}`) + $root.append(obj) new_question = $(`#element${element_index-1}`) new_question.find('.question-text').val(question['text']).trigger('change') new_question.find('.question-type').val(question['q_type']).trigger('change') @@ -193,24 +341,9 @@ function parse_data(data) { renumber_blocks() } -root.on('click', '.block-controls > a', function(event){ - event.preventDefault() - var action = $(this).data('action') - var root_accordion = $(this).closest('div').siblings('.accordion') - if (action == 'add-question') { - var question = generate_single_question(root_container_id=`#${root_accordion.attr('id')}`) - root_accordion.append(question) - if (root_accordion.children().length > 1 ) { - root_accordion.find('.panel-controls > a[data-action="delete"]').removeClass('disabled') - } else { - root_accordion.find('.panel-controls > a[data-action="delete"]').addClass('disabled') - } - renumber_blocks() - } -}) - +// Content Generator Functions function generate_single_question(root_container_id) { - if (root_container_id == `#${root.attr('id')}`) { + if (root_container_id == `#${$root.attr('id')}`) { var block_button = ` @@ -220,7 +353,7 @@ function generate_single_question(root_container_id) { var block_button = '' } var question = ` -
+

@@ -299,7 +432,7 @@ function generate_single_question(root_container_id) { function generate_block(root_container_id) { var block = ` -
+

@@ -346,14 +479,21 @@ function generate_block(root_container_id) { return block } -var myArray = [ - "Apples", - "Bananas", - "Pears" - ]; - -function renumber_blocks () { - $( ".block-number" ).each(function(index) { - $( this ).text($( this ).closest('.accordion-item').index()) +// Fetch data once page finishes loading +$(window).on('load', function() { + $.ajax({ + url: target, + type: 'POST', + data: JSON.stringify({ + 'id': id, + 'action': 'fetch' + }), + contentType: 'application/json', + success: function(response) { + parse_data(response['data']) + }, + error: function(response) { + console.log(response) + } }) -} \ No newline at end of file +}) \ No newline at end of file diff --git a/ref-test/app/editor/static/js/script.js b/ref-test/app/editor/static/js/script.js index 30c8a49..bba3bde 100644 --- a/ref-test/app/editor/static/js/script.js +++ b/ref-test/app/editor/static/js/script.js @@ -42,81 +42,6 @@ $('form.form-post').submit(function(event) { event.preventDefault(); }); -// Form Upload Questions - Special case, needs to handle files. -$('form[name=form-upload-questions]').submit(function(event) { - - var $form = $(this); - var data = new FormData($form[0]); - var file = $('input[name=data_file]')[0].files[0] - data.append('file', file) - - $.ajax({ - url: window.location.pathname, - type: 'POST', - data: data, - processData: false, - contentType: false, - success: function(response) { - window.location.reload(); - }, - error: function(response) { - error_response(response); - } - }); - - event.preventDefault(); -}); - -// Edit and Delete Test Button Handlers -$('.test-action').click(function(event) { - - let id = $(this).data('id'); - let action = $(this).data('action'); - - if (action == 'delete' || action == 'start' || action == 'end') { - $.ajax({ - url: `/admin/tests/edit/`, - type: 'POST', - data: JSON.stringify({'id': id, 'action': action}), // TODO Change how CRUD operations work - contentType: 'application/json', - success: function(response) { - window.location.href = '/admin/tests/'; - }, - error: function(response){ - error_response(response); - }, - }); - } else if (action == 'edit') { - window.location.href = `/admin/test/${id}/` - } - - event.preventDefault(); -}); - -// Edit Dataset Button Handlers -$('.edit-question-dataset').click(function(event) { - - var filename = $(this).data('filename'); - var action = $(this).data('action'); - var disabled = $(this).hasClass('disabled'); - - if ( !disabled ) { - $.ajax({ - url: `/admin/settings/questions/${action}/`, - type: 'POST', - data: JSON.stringify({'filename': filename}), - contentType: 'application/json', - success: function(response) { - window.location.reload(); - }, - error: function(response){ - error_response(response); - }, - }); - }; - event.preventDefault(); -}); - function error_response(response) { const $alert = $("#alert-box"); @@ -168,66 +93,23 @@ $('#dismiss-cookie-alert').click(function(event){ event.preventDefault(); }) -// Script for Result Actions -$('.result-action-buttons').click(function(event){ - - var id = $(this).data('id'); - - if ($(this).data('result-action') == 'generate') { - $.ajax({ - url: '/admin/certificate/', - type: 'POST', - data: JSON.stringify({'id': id}), - contentType: 'application/json', - dataType: 'html', - success: function(response) { - var display_window = window.open(); - display_window.document.write(response); - }, - error: function(response){ - error_response(response); - }, - }); - } else { - var action = $(this).data('result-action') - $.ajax({ - url: window.location.href, - type: 'POST', - data: JSON.stringify({'id': id, 'action': action}), - contentType: 'application/json', - success: function(response) { - if (action == 'delete') { - window.location.href = '/admin/results/'; - } else window.location.reload(); - }, - error: function(response){ - error_response(response); - }, - }); - } - - event.preventDefault(); -}); - -// Script for Deleting Time Adjustment -$('.adjustment-delete').click(function(event){ - - var user_code = $(this).data('user_code'); - var location = window.location.href; - location = location.replace('#', '') - +// Create New Dataset +$('.create-new-dataset').click(function(event){ $.ajax({ - url: location + 'delete-adjustment/', + url: '/api/editor/new/', type: 'POST', - data: JSON.stringify({'user_code': user_code}), - contentType: 'application/json', - success: function(response) { - window.location.reload(); + data: { + time: Date.now() + }, + dataType: 'json', + success: function(response){ + if (response.redirect_to) { + window.location.href = response.redirect_to; + } }, error: function(response){ - error_response(response); - }, - }); - - event.preventDefault(); -}); \ No newline at end of file + console.log(response); + } + }) + event.preventDefault() +}) \ No newline at end of file