Web interface

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>