A small web UI for osh-to-oil.

The wild.sh script generates a FILES.html index for every project, which links to osh-to-oil.html#<source name>. That page has a bit of JavaScript to fetch the original source, oil source, and AST and show them in iframes.
not-my-profile · Feb 3, 2017 · 722e018 · 722e018
1 parent 9b4e2f2
commit 722e018
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 8 deletions.
diff --git a/web/osh-to-oil-index.css b/web/osh-to-oil-index.css
@@ -0,0 +1,21 @@
+/* For the FILES.html index */
+
+thead {
+  font-weight: bold;
+  /*text-align: center;*/
+}
+
+table {
+  padding: 10px;  /* Padding makes it look nicer. */
+  margin: 0 auto;  /* center table on the page */
+  border-collapse: collapse;  /* this is like old cellpadding */
+}
+
+/* like cellspacing? */
+td {
+  padding: 5px;
+}
+
+h2 {
+  text-align: center;
+}
diff --git a/web/osh-to-oil.html b/web/osh-to-oil.html
@@ -0,0 +1,70 @@
+<html>
+
+<!--
+TODO: Would be nice to either:
+- scroll iframes together
+  - The conversion of osh to oil is line-for-line (but the AST isn't.)
+    - maybe scroll 2 of them together, and provide a textbox for the others
+
+- provide a line number text box
+
+- provide a search textbox
+  - API to scroll to text position?
+
+- fragment params:
+  - line to highlight?
+  - could even be the filename to load.  then you don't have to generate so
+  much code.
+-->
+
+<head>
+  <script type="text/javascript" src="osh-to-oil.js"></script>
+  <style>
+    iframe {
+      width: 700px;
+      height: 700px;
+    }
+    /* For AJAX errors */
+    #status {
+      text-align: center;
+      font-size: x-large;
+      color: darkred;
+    }
+  </style>
+</head>
+
+<body onload="onLoad(location.hash, globals, kStatusElem);"
+      onhashchange="onHashChange(location.hash, globals, kStatusElem);">
+
+<p>Back to <a href="FILES.html">file list</a></p>
+
+<p id="status"></p>
+
+<h2 id="title"></h2>
+
+<!--
+TODO: provide direct links too
+<p>
+Original Source: <a href="acpid.txt">acpid.txt</a><br/>
+AST in <a href="acpid-AST.html">HTML</a>, <a href="acpid-AST.txt">text</a><br/>
+<a href="acpid.oil">Auto-conversion to Oil</a><br/>
+</p>
+--<
+
+<p>
+<i>(Widen your browser until osh and oil code appears side by side)</i>
+</p>
+
+<!-- src filled in from URL hash -->
+<iframe id="orig" src=""></iframe>
+<iframe id="oil" src=""></iframe>
+<iframe id="ast" src=""></iframe>
+
+<!-- page globals -->
+<script type="text/javascript">
+  var globals = {};  // currently unused
+  var kStatusElem = document.getElementById('status');
+</script>
+
+</body>
+</html>
diff --git a/web/osh-to-oil.js b/web/osh-to-oil.js
@@ -0,0 +1,73 @@
+// For osh-to-oil.html.
+
+'use strict';
+
+// Append a message to an element.  Used for errors.
+function appendMessage(elem, msg) {
+  elem.innerHTML += msg + '<br />';
+}
+
+// jQuery-like AJAX helper, but simpler.
+
+// Requires an element with id "status" to show errors.
+//
+// Args:
+//   errElem: optional element to append error messages to.  If null, then
+//     alert() on error.
+//   success: callback that is passed the xhr object.
+function ajaxGet(url, errElem, success) {
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', url, true /*async*/);
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4 /*DONE*/) {
+      return;
+    }
+
+    if (xhr.status != 200) {
+      var msg = 'ERROR requesting ' + url + ': ' + xhr.status + ' ' +
+                xhr.statusText;
+      if (errElem) {
+        appendMessage(errElem, msg);
+      } else {
+        alert(msg);
+      }
+      return;
+    }
+
+    success(xhr);
+  };
+  xhr.send();
+}
+
+// Fill in title and iframe src attributes.
+function loadSource(sourceName, statusElem) {
+  var sourceElem = document.getElementById('sourceFrames');
+
+  document.getElementById('title').innerHTML = sourceName;
+
+  document.getElementById('orig').src = sourceName + '.txt';
+  document.getElementById('oil').src = sourceName + '.oil';
+  document.getElementById('ast').src = sourceName + '-AST.html';
+  appendMessage(statusElem, "Loaded contents for " + sourceName);
+}
+
+function getNameFromHash(urlHash, statusElem) {
+  var h = urlHash.substring(1);  // without leading #
+  if (h.length < 1) {
+    appendMessage(statusElem, "Invalid URL hash: [" + urlHash + "]");
+    return null;
+  }
+  return h;
+}
+
+function onLoad(urlHash, globals, statusElem) {
+  onHashChange(urlHash, globals, statusElem);
+}
+
+// This is the onhashchange handler.
+function onHashChange(urlHash, globals, statusElem) {
+  var sourceName = getNameFromHash(urlHash, statusElem);
+  if (sourceName === null) return;
+
+  loadSource(sourceName, statusElem)
+}
diff --git a/wild.sh b/wild.sh
@@ -140,6 +140,18 @@ _parse-many() {
   shift 2
   # Rest of args are relative paths
 
+  { pushd $src_base >/dev/null
+    wc -l "$@"
+    popd >/dev/null
+  } > $dest_base/LINE-COUNTS.txt
+
+  # Don't call it index.html
+  make-index < $dest_base/LINE-COUNTS.txt > $dest_base/FILES.html
+
+  ln -s -f --verbose ../../../web/osh-to-oil.html $dest_base
+  ln -s -f --verbose ../../../web/osh-to-oil.js $dest_base
+  ln -s -f --verbose ../../../web/osh-to-oil-index.css $dest_base
+
   # Truncate the failure
   mkdir -p $dest_base
   echo -n '' >$dest_base/FAILED.txt
@@ -149,16 +161,37 @@ _parse-many() {
     sort |
     xargs -n 1 -- $0 _parse-and-copy-one $src_base $dest_base
 
-  # PROBLEM that can be solved with tables:
-  # using relative path to pass to wc -l
-  # wc -l "$@" >
+  tree -p $dest_base
+}
+
+make-index() {
+  cat << EOF
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="osh-to-oil-index.css" />
+</head>
+<body>
+<p> <a href="..">Up</a> </p>
 
-  { pushd $src_base >/dev/null
-    wc -l "$@"
-    popd >/dev/null
-  } > $dest_base/LINE-COUNTS.txt
+<h2>Files in this Project</h2>
 
-  tree -p $dest_base
+<table>
+EOF
+  echo "<thead> <tr> <td align=right>Count</td> <td>Name</td> </tr> </thead>";
+  while read count name; do
+    echo -n "<tr> <td align=right>$count</td> "
+    if test $name == 'total'; then
+      echo -n "<td>$name</td>"
+    else
+      echo -n "<td><a href=\"osh-to-oil.html#${name}\">$name</a></td> </tr>"
+    fi
+    echo "</tr>"
+  done
+  cat << EOF
+</table>
+</body>
+</html>
+EOF
 }
 
 # generic helper