Add static test page

Release version 0.7.3 Bug: T247700 Change-Id: I75fe64e3d9dc648c8d4dcf03e31c475ab8e115ab
wikimedia · Mar 21, 2020 · 1221c11 · 1221c11
1 parent 8454116
commit 1221c11
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mathoid",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "content-version": "1.0.0",
   "description": "Render TeX to SVG and MathML using MathJax. Based on svgtex.",
   "main": "./app.js",

diff --git a/routes/root.js b/routes/root.js
@@ -1,6 +1,8 @@
 'use strict';
 
 const sUtil = require('../lib/util');
+const express = require('express');
+
 let swaggerUi;
 
 try {
@@ -28,7 +30,7 @@ router.get('/robots.txt', (req, res) => {
 /**
  * GET /
  * Main entry point. Currently it only responds if the spec or doc query
- * parameter is given, otherwise lets the next middleware handle it
+ * parameter is given, otherwise it displays the test page.
  */
 router.get('/', (req, res, next) => {
 
@@ -37,14 +39,15 @@ router.get('/', (req, res, next) => {
     } else if ({}.hasOwnProperty.call(req.query || {}, 'doc') && swaggerUi) {
         return swaggerUi.processRequest(app, req, res);
     } else {
-        next();
+        res.redirect('info.html');
     }
 
 });
 
 module.exports = (appObj) => {
 
     app = appObj;
+    app.use(express.static('./static'));
 
     return {
         path: '/',

diff --git a/static/info.html b/static/info.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>mathoid test-page</title>
+    <style>
+        input[type=text], select, textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid white;
+            border-radius: 5px;
+            box-sizing: border-box;
+            resize: vertical;
+        }
+
+        input[type=submit] {
+            background-color: lightgreen;
+            color: black;
+            padding: 10px 20px;
+            margin-top: 5px;
+            border: none;
+            border-radius: 5px;
+            float: right;
+        }
+
+        label {
+            padding: 10px 10px 10px 0;
+            display: inline-block;
+        }
+
+        .container {
+            border-radius: 5px;
+            background-color: lightgrey;
+            padding: 20px;
+        }
+
+        .col25 {
+            float: left;
+            width: 25%;
+            margin-top: 6px;
+        }
+
+        .col75 {
+            float: left;
+            width: 75%;
+            margin-top: 6px;
+        }
+
+        .col37 {
+            float: left;
+            width: 37.5%;
+            margin-top: 6px;
+        }
+
+        .row:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+
+        @media screen and (max-width: 600px) {
+            .col25, .col75, input[type=submit] {
+                width: 100%;
+                margin-top: 0;
+            }
+        }
+
+        @media screen and (max-width: 600px) {
+            .col25, .col37, .col37 {
+                width: 100%;
+                margin-top: 0;
+            }
+        }
+    </style>
+</head>
+<body onload="post()">
+<h2>mathoid test-page</h2>
+<p>This page provides a simple test interface to mathoid.
+    <a href="https://github.com/wikimedia/mathoid">Find the source on GitHub.</a>
+</p>
+<h3>Request</h3>
+<div class="container">
+    <form onsubmit="post(); return false;">
+        <div class="row">
+            <div class="col25">
+                <label for="type">type (input format)</label>
+            </div>
+            <div class="col75">
+                <select id="type">
+                    <option value="TeX" selected>TeX</option>
+                    <option value="chem">chem</option>
+                    <option value="inline-TeX">inline-TeX</option>
+                    <option value="MathML">MathML</option>
+                    <option value="AsciiMath">AsciiMath</option>
+                </select>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col25">
+                <label for="q">q (content of the math tag)</label>
+            </div>
+            <div class="col75">
+                <textarea id="q" style="height:50px">{\displaystyle e^{i\pi} + \frac12 = -\frac12   }</textarea>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col25">
+                <label for="nospeech">nospeech</label>
+            </div>
+            <div class="col75">
+                <input type="checkbox" id="nospeech" value="true">
+            </div>
+        </div>
+        <div class="row">
+            <input type="submit" value="Submit">
+        </div>
+    </form>
+</div>
+<h3>Request</h3>
+<div class="container">
+    <div class="row">
+        <div class="col25">
+            <label for="mmlRes">MathML</label>
+        </div>
+        <div class="col37" id="mmlRes"></div>
+        <div class="col37" id="mmlResC"></div>
+    </div>
+    <div class="row">
+        <div class="col25">
+            <label for="svgRes">SVG</label>
+        </div>
+        <div class="col37" id="svgRes"></div>
+        <div class="col37" id="svgResC"></div>
+    </div>
+    <div class="row">
+        <div class="col25">
+            <label for="styleRes">style</label>
+        </div>
+        <div class="col37">
+            <pre id="styleRes"></pre>
+        </div>
+        <div class="col37">
+            <pre id="styleResC"></pre>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col25">
+            <label for="checkedRes">checked</label>
+        </div>
+        <div class="col75">
+            <pre id="checkedRes"></pre>
+        </div>
+    </div>
+</div>
+<br/>
+</body>
+<script lang="javascript">
+
+    async function post() {
+        document.getElementById('mmlRes').innerText = "";
+        document.getElementById('mmlResC').innerText = "";
+        document.getElementById('svgRes').innerText = "";
+        document.getElementById('svgResC').innerText = "";
+        document.getElementById('styleRes').innerText = "";
+        document.getElementById('styleResC').innerText = "";
+        document.getElementById('checkedRes').innerHTML = "";
+
+        function getReqBody(checked) {
+            return [].reduce.call(document.forms.item(0).elements, (X, x) => {
+                if (x.id) {
+                    if (x.id === 'q' && checked) {
+                        X += x.id + '=' + encodeURIComponent(checked) + '&';
+                    } else {
+                        X += x.id + '=' + encodeURIComponent(x.value) + '&';
+                    }
+                }
+                return X
+            }, '');
+        }
+
+        async function updateImages(body, postfix = '') {
+            let response = await fetch('/complete', {
+                method: 'POST',
+                headers: {'Content-type': 'application/x-www-form-urlencoded'},
+                body: body
+            });
+            let json = await response.json();
+            if (response.ok) {
+                document.getElementById('mmlRes' + postfix).innerHTML = json.mml.body;
+                document.getElementById('svgRes' + postfix).innerHTML = json.svg.body;
+                document.getElementById('styleRes' + postfix).innerText = json.mathoidStyle;
+            } else {
+                document.getElementById('checkedRes').innerHTML = JSON.stringify(json, null, 2);
+            }
+            return response;
+        }
+
+
+        let response = await updateImages(getReqBody());
+        if (response.ok) {
+            response = await fetch('/texvcinfo', {
+                method: 'POST',
+                headers: {'Content-type': 'application/x-www-form-urlencoded'},
+                body: getReqBody()
+            });
+            if (response.ok) {
+                let json = await response.json();
+                document.getElementById('checkedRes').innerHTML = JSON.stringify(json, null, 2);
+                if (json.checked) {
+                    await updateImages(getReqBody(json.checked), 'C');
+                }
+            } else {
+                let json = await response.json();
+                document.getElementById('checkedRes').innerHTML = JSON.stringify(json, null, 2);
+            }
+        }
+    }
+</script>
+</html>