diff options
-rw-r--r-- | http/dealconvert.js | 121 | ||||
-rw-r--r-- | http/index.html | 122 |
2 files changed, 243 insertions, 0 deletions
diff --git a/http/dealconvert.js b/http/dealconvert.js new file mode 100644 index 0000000..3e5ea85 --- /dev/null +++ b/http/dealconvert.js @@ -0,0 +1,121 @@ +$(document).ready(function() { + $('input[name="output"]').change(function() { + if ($('input[name="output"]:checked').length > 0) { + $('#submit-btn').removeAttr('disabled'); + } else { + $('#submit-btn').attr('disabled', 'disabled'); + } + }); + $('#converter-input').submit(function() { + var that = $(this); + var output = []; + that.find('input[name="output"]:checked').each(function() { + output.push(this.value); + }); + var display = that.find('input[name="display"]').is(':checked'); + var files = {}; + var formFiles = this['input-files'].files; + if (formFiles.length) { + $('.output-group').remove(); + that.css('opacity', 0.3); + that.find('input, button').attr('disabled', 'disabled'); + } + var completed = 0; + for (var i = 0; i < formFiles.length; i++) { + var currentFile = formFiles[i]; + files[currentFile.name] = null; + var reader = new FileReader(); + reader.file = currentFile; + reader.onload = function(e) { + files[e.target.file.name] = btoa(e.target.result); + for (var file in files) { + if (files[file] == null) { + return; + } + } + for (var file in files) { + var paramObj = { + 'name': file, + 'content': files[file], + 'output': output, + 'display_deals': display + }; + $.ajax( + 'api/upload/', + { + data: JSON.stringify(paramObj), + dataType: 'json', + method: 'POST', + success: function(data, status, xhr) { + var outputGroup = $('template#file-output-group').clone().contents().unwrap(); + var warningTemplate = $('template#file-output-warning'); + var errorTemplate = $('template#file-output-error'); + var fileTemplate = $('template#file-output'); + var inputHeader = outputGroup.find('.card-header'); + inputHeader.text(data.name); + var groupBody = outputGroup.find('.card-body'); + if (data.error) { + inputHeader.addClass('bg-danger'); + groupBody.append(errorTemplate.clone().contents().unwrap().text(data.error)); + } else { + inputHeader.addClass('bg-success'); + if (data.warnings.length) { + inputHeader.removeClass('bg-success'); + inputHeader.addClass('bg-warning'); + for (var w = 0; w < data.warnings.length; w++) { + groupBody.append(warningTemplate.clone().contents().unwrap().text(data.warnings[w])); + } + } + for (var f = 0; f < data.files.length; f++) { + var fileContent = fileTemplate.clone().contents().unwrap(); + groupBody.append(fileContent); + fileContent.find('.file-name').text(data.files[f].name); + fileContent.find('.file-status').popover(); + if (data.files[f].error) { + fileContent.find('.file-link').remove(); + fileContent.find('.file-status').addClass('btn-danger').text('⚠️').attr('data-content', data.files[f].error); + fileContent.find('.file-name').addClass('btn-danger'); + inputHeader.removeClass('bg-success'); + inputHeader.addClass('bg-warning'); + } else { + if (data.files[f].warnings.length) { + fileContent.find('.file-status').addClass('btn-warning').text('⚠️').attr( + 'data-content', data.files[f].warnings.join("<br />")); + fileContent.find('.file-name').addClass('btn-warning'); + inputHeader.removeClass('bg-success'); + inputHeader.addClass('bg-warning'); + } else { + fileContent.find('.file-status').addClass('btn-success').text('✔️'); + fileContent.find('.file-name').addClass('btn-success'); + } + fileContent.find('.file-link').attr( + 'href', 'api/' + data.files[f].link + ); + } + } + } + $('body').append(outputGroup); + completed += 1; + if (completed >= formFiles.length) { + that.css('opacity', ''); + that.find('input, button').removeAttr('disabled'); + } + }, + error: function(xhr, status, error) { + var errorBox = $('<div class="container output-group"></div>'); + errorBox.append($('template#file-output-error').clone().contents().unwrap().text( + 'Nie udało się wykonać konwersji: ' + xhr.responseText + )); + $('body').append(errorBox); + that.css('opacity', ''); + that.find('input, button').removeAttr('disabled'); + } + } + ); + } + } + reader.readAsBinaryString(currentFile); + } + return false; + }); +}); diff --git a/http/index.html b/http/index.html new file mode 100644 index 0000000..faebaff --- /dev/null +++ b/http/index.html @@ -0,0 +1,122 @@ +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>DealConvert by mkl</title> + <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> + <script src="dealconvert.js"></script> + </head> + <body> + <div class="container"> + <div class="page-header"> + <h1>Konwerter rozdań</h1> + <p><a href="https://github.com/emkael/deal-convert/">Deal-convert</a>, autor: <a href="https://emkael.info/">Michał Klichowicz</a></p> + </div> + </div> + <div class="container"> + <form id="converter-input"> + <div class="form-group"> + <label for="input-files">Wrzuć pliki wejściowe:</label> + <input type="file" multiple="multiple" class="form-control-file" id="input-files" name="input-files"> + </div> + <div class="form-group"> + <label>Wybierz formaty wyjściowe:</label> + <div class="row"> + <div class="col-md-6 col-lg-4"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" name="output" value="ber" id="output-ber" /> + <label class="form-check-label" for="output-ber">Bernasconi (BER)</label> + </div> + </div> + <div class="col-md-6 col-lg-4"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" name="output" value="bhg" id="output-bhg" /> + <label class="form-check-label" for="output-bhg">Borel Hand Generator (BHG)</label> + </div> + </div> + <div class="col-md-6 col-lg-4"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" name="output" value="bri" id="output-bri" /> + <label class="form-check-label" for="output-bri">BRI</label> + </div> + </div> + <div class="col-md-6 col-lg-4"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" name="output" value="cds" id="output-cds" /> + <label class="form-check-label" for="output-cds">CDS-2000 (CDS)</label> + </div> + </div> + <div class="col-md-6 col-lg-4"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" name="output" value="csv" id="output-csv" /> + <label class="form-check-label" for="output-csv">CSV</label> + </div> + </div> + <div class="col-md-6 col-lg-4"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" name="output" value="dge" id="output-dge" /> + <label class="form-check-label" for="output-dge">DGE</label> + </div> + </div> + <div class="col-md-6 col-lg-4"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" name="output" value="dlm" id="output-dlm" /> + <label class="form-check-label" for="output-dlm">New Duplimate (DLM)</label> + </div> + </div> + <div class="col-md-6 col-lg-4"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" name="output" value="dup" id="output-dup" /> + <label class="form-check-label" for="output-dup">Old Duplimate (DUP)</label> + </div> + </div> + <div class="col-md-6 col-lg-4"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" name="output" value="pbn" id="output-pbn" /> + <label class="form-check-label" for="output-pbn">Portable Bridge Notation (PBN)</label> + </div> + </div> + <div class="col-md-6 col-lg-4"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" name="output" value="rzd" id="output-rzd" /> + <label class="form-check-label" for="output-rzd">KoPS (RZD)</label> + </div> + </div> + </div> + </div> + <div class="form-group"> + <button type="submit" class="btn btn-primary" id="submit-btn" disabled="disabled">Konwertuj</button> + <!-- + <div class="form-check-inline"> + <input class="form-check-input" type="checkbox" name="display" value="yes" id="display-boards" /> + <label class="form-check-label" for="display-boards">Wyświetl podgląd rozkładów</label> + </div> + --> + </div> + </form> + </div> + <template id="file-output-group"> + <div class="container output-group mb-1"> + <div class="card"> + <div class="card-header"></div> + <div class="card-body"></div> + </div> + </div> + </template> + <template id="file-output"> + <div class="d-flex btn-group m-1"> + <a class="btn file-status" data-toggle="poppler" data-trigger="click hover" data-placement="bottom" data-html="true"></a> + <a class="btn w-100 text-left p-2 file-name"></a> + <a class="btn ml-auto btn-primary file-link">Pobierz</a> + </div> + </template> + <template id="file-output-warning"> + <div class="alert alert-warning"></div> + </template> + <template id="file-output-error"> + <div class="alert alert-danger"></div> + </template> + </body> +</html> |