Test Formatter (#100)

templates/test_formatter/edit_test_formatter.html

@@ -0,0 +1,135 @@
+{% extends 'base.html' %}
+{% block media %}
+  <style>
+    .container {
+      width: 100%;
+      margin: auto;
+    }
+    .column {
+      flex: 50%;
+    }
+    .left {
+      padding-right: 16px;
+    }
+    .right {
+      padding-left: 16px;
+    }
+    .row {
+      display: flex;
+    }
+    input {
+      width: 100%;
+    }
+    .preview-container {
+      padding-bottom: 16px;
+    }
+    #preview {
+      background-color: rgb(220, 220, 220);
+      border: solid 2px rgb(180, 180, 180);
+      padding: 8px;
+      max-height: 134px;
+      height: 20%;
+      overflow-y: scroll;
+    }
+    .button-container {
+      text-align:left;
+    }
+    .button {
+      display:inline-block;
+    }
+  </style>
+{% endblock %}
+{% block js_media %}
+  <script>
+    $(document).ready(function(){
+      $("#convert").on("click", function(event) {
+        event.preventDefault()
+        $.ajax({
+          url: "{{url('edit_page')}}",
+          type: 'POST',
+          data: {
+            action: 'convert',
+            bef_inp_format: $("#bef_inp_format").val(),
+            bef_out_format: $("#bef_out_format").val(),
+            aft_inp_format: $("#aft_inp_format").val(),
+            aft_out_format: $("#aft_out_format").val(),
+            file_name: $('#file_name').val()
+          },
+          success: function(data) {
+            console.log(data)
+            $('#preview').html(data);
+          },
+          error: function(error) {
+            alert(error);
+            console.log(error.message)
+          }
+        })
+      });
+    });
+
+    $(document).ready(function(){
+      $("#download").on("click", function(event) {
+        event.preventDefault()
+        window.location.href = "{{url('edit_page')}}";
+        $.ajax({
+          url: "{{url('edit_page')}}",
+          type: 'POST',
+          data: {
+            action: 'download'
+          },
+          success: function(data) {
+            var file_path = data;
+            window.location.href = "{{url('download_page')}}" + "?file_path="+file_path;
+          },
+          error: function(error) {
+            alert(error);
+            console.log(error.message)
+          }
+        })
+      });
+    });
+  </script>
+  <script src="{{ static('mathjax3_config.js') }}"></script>
+  <script src="http://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+  <script src="{{ static('pagedown_math.js') }}"></script>
+{% endblock %}
+
+
+{% block body %}
+  <div class="container">
+    <div class="row">
+      {% csrf_token %}
+      <div class="column left">
+        <h3>{{_('Before')}}</h3><br>
+        <label for="fname">{{_('Input format')}}</label><br>
+        <input type="text" id="bef_inp_format" value="{{files_list[0]}}" readonly><br>
+        <label for="lname">{{_('Output format')}}</label><br>
+        <input type="text" id="bef_out_format" value="{{files_list[1]}}" readonly><br><br>
+
+      </div>
+      <div class="column right">
+        <h3>{{_('After')}}</h3><br>
+        <label for="fname">{{_('Input format')}}</label><br>
+        <input type="text" id="aft_inp_format" value="input.000"><br>
+        <label for="lname">{{_('Output format')}}</label><br>
+        <input type="text" id="aft_out_format" value="output.000"><br><br>
+
+      </div>
+    </div>
+    <div class="preview-container">
+      <h3>{{_('Preview')}}</h3><br>
+      <div id="preview">
+        {{ res|safe }}
+      </div>
+    </div>
+
+    <div class="filename-container">
+      <h3>{{_('File name')}}</h3><br>
+      <input type="text" id="file_name" value="{{file_name}}"><br><br>
+    </div>
+    <div class="button-container">
+      <button type="submit" id="convert" class="button">{{_('Convert')}}</button>
+      <button type="submit" id="download" class="button">{{_('Download')}}</button>
+    </div>
+  </div>
+{% endblock %}