Allow copying Raikogram to the clipboard.

diff --git a/lib/raikogram.php b/lib/raikogram.php
index 58c4133..afb5b1f 100644 (file)
--- a/lib/raikogram.php
+++ b/lib/raikogram.php
@@ -1,8 +1,34 @@
 <h2>Raikograms</h2>
 <?php
 
+  function raikogram_bgcolor($row, $column) {
+    global $race_colours;
+
+    $headers = $race_colours;
+    $cells = array('', '#f5f5f5');
+
+    if ($row == 0) return $headers[$column % 2];
+    if ($column == 0) return $headers[($row + 1) % 2];
+    return $cells[(($row % 2) + ($column % 2)) % 2];
+  }
+
+  function raikogram_fgcolor($row, $column) {
+    if ($row == 0 || $column == 0) return 'white';
+    return 'black';
+  }
+
+  function raikogram_header($name, $bgcolor, $fgcolor, $width) {
+    echo "[td=\"class: grid, bgcolor: $bgcolor, width: $width%, align: center\"]";
+    echo "[color=$fgcolor]";
+    echo "[b]" . $name . "[/b]";
+    echo "[/color][/td]\n";
+  }
+
   function edit_raikogram($race_id, $readonly = false) {
+    global $race_colours;
+
     $q = new CourseQuery;
+    $q->joinWith("Course.Race");
     $q->joinWith("Course.Station");
     $q->join("Station.System");
     $q->withColumn("System.Id", "SystemId");
@@ -16,6 +42,8 @@
       $name = $leg->getSystemName();
       $systems[$name] = $id;
     }
+    $race_colours = $course[0]->getRace()->getColours();
+    $width = count($systems);
     ksort($systems);
     if (! $readonly) {
       if ($_POST['edit_raikogram'] == 'Update') {
@@ -38,37 +66,81 @@
       }
       form();
     }
-    echo "<table class=\"raikogram\">\n";
-    /* Header. */
-    echo "<tr>\n";
-    echo "<th></th>\n";
-    foreach ($systems as $name_x => $id_x) echo "<th>$name_x</th>\n";
-    echo "</tr>\n";
-    foreach ($systems as $name_y => $id_y) {
-      echo "<tr>\n";
-      echo "<th>$name_y</th>\n";
-      foreach ($systems as $name_x => $id_x) {
-        echo "<td>\n";
-        if ($id_x == $id_y) continue;
-        $distance = "";
-        $rq = new RaikogramQuery;
-        $rq->filterBySystem1(min($id_x, $id_y));
-        $rq->filterBySystem2(max($id_x, $id_y));
-        $raikogram = $rq->findOne();
-        if ($raikogram) $distance = $raikogram->getDistance();
-        if ($readonly) echo $distance;
-        else input("from${id_x}to${id_y}", $distance);
-        echo "</td>\n";
+    echo "<div class=\"raikogram\">\n";
+    foreach (array('html', 'bbcode') as $type) {
+      if (! $readonly && $type != 'html') continue;
+      echo "<div class=\"$type\">\n";
+      /* Header. */
+      $row = $column = 0;
+      if ($type == 'html') {
+        echo "<table>\n";
+        echo "<tr>\n";
+        echo "<th></th>\n";
+        foreach ($systems as $name_x => $id_x) echo "<th>$name_x</th>\n";
+        echo "</tr>\n";
       }
-      echo "</tr>\n";
-    }
-    echo "<td>";
-    echo "</table>\n";
-    if (! $readonly) {
-      hidden('race_id', $race_id);
-      submit("edit_raikogram", "Update");
-      end_form();
+      else {
+        echo "<pre>\n";
+        echo "[table]\n";
+        echo "[tr]\n";
+        echo "[td=\"width: $width%\"][/td]\n";
+        foreach ($systems as $name_x => $id_x) raikogram_header($name_x, raikogram_bgcolor($row, $column), raikogram_fgcolor($row, $column++), $width);
+        echo "[/tr]\n";
+      }
+      foreach ($systems as $name_y => $id_y) {
+        $row++;
+        $column = 0;
+        $bgcolor = raikogram_bgcolor($row, $column);
+        $fgcolor = raikogram_fgcolor($row, $column);
+        if ($type == 'html') {
+          echo "<tr>\n";
+          echo "<th>$name_y</th>\n";
+        }
+        else {
+          echo "[tr=\"bgcolor: white\"]\n";
+          raikogram_header($name_y, $bgcolor, $fgcolor, $width);
+        }
+        foreach ($systems as $name_x => $id_x) {
+          $column++;
+          $bgcolor = raikogram_bgcolor($row, $column);
+          $fgcolor = raikogram_fgcolor($row, $column);
+          if ($type == 'html') echo "<td>\n";
+          if ($id_x == $id_y) {
+            if ($type == 'html') echo "</td>\n";
+            else echo "[td=\"class: grid\"][/td]\n";
+            continue;
+          }
+          $td = "class: grid";
+          if ($bgcolor) $td .= ", bgcolor: $bgcolor";
+          $td .= ", align: center";
+          if ($type == 'bbcode') echo "[td=\"$td\"][color=$fgcolor]";
+          $distance = "";
+          $rq = new RaikogramQuery;
+          $rq->filterBySystem1(min($id_x, $id_y));
+          $rq->filterBySystem2(max($id_x, $id_y));
+          $raikogram = $rq->findOne();
+          if ($raikogram) $distance = $raikogram->getDistance();
+          if ($readonly) echo $distance;
+          else input("from${id_x}to${id_y}", $distance);
+          if ($type == 'html') echo "</td>\n";
+          else echo "[/color][/td]\n";
+        }
+        if ($type == 'html') echo "</tr>\n";
+        else echo "[/tr]\n";
+      }
+      if ($type == 'html') echo "</table>\n";
+      else {
+        echo "[/table]\n";
+        echo "</pre>\n";
+      }
+      if (! $readonly) {
+        hidden('race_id', $race_id);
+        submit("edit_raikogram", "Update");
+        end_form();
+      }
+      echo "</div>\n";
     }
+    echo "</div>\n";
     echo "<hr>\n";
     return false;
   }
@@ -90,8 +162,9 @@
     foreach ($races as $race) {
       $id = $race->getId();
       $name = $race->getName();
+      $flag = $race->getFlag();
       $url = "$uri_root/raikogram/$id";
-      echo "<p><a href=\"$url\">$name</a></p>\n";
+      echo "<p><a href=\"$url\">$name</a>$flag</p>\n";
     }
     form();
     echo "<p>Edit race raikogram: ";

diff --git a/race.js b/race.js
index 850c0e4..786d941 100644 (file)
--- a/race.js
+++ b/race.js
@@ -163,7 +163,7 @@ function loaded() {
     }
     for (var input of document.getElementsByTagName('input')) {
       var m = input.name.match(/^station\d+order$/);
-      if (! m) continue;
+      if (! m && input.name != 'waypoints') continue;
       input.autocomplete = 'off';
       input.type = 'text';
       input.pattern = '^[1-9]+[0-9]*$';

diff --git a/raikogram.js b/raikogram.js
index cf34789..36c86a4 100644 (file)
--- a/raikogram.js
+++ b/raikogram.js
@@ -1,3 +1,29 @@
+/* Copy Raikogram to clipboard. */
+function copy_raikogram(event) {
+  try {
+    var text = event.currentTarget.getElementsByClassName('bbcode')[0].getElementsByTagName('pre')[0].innerHTML;
+    if (text) {
+      var area = document.createElement('textarea');
+      area.style.position = 'fixed';
+      area.style.top = 0;
+      area.style.left = 0;
+      area.style.height = '2em';
+      area.style.width = '2em';
+      area.style.padding = 0;
+      area.style.background = 'transparent';
+      area.value = text;
+      document.body.appendChild(area);
+      area.select();
+      if (document.execCommand('copy')) console.log('Copied bbcode to clipboard.');
+      else console.log('Failed to copy bbcode to clipboard.');
+      document.body.removeChild(area);
+    }
+  }
+  catch (e) {
+    console.log(e);
+  }
+}
+
 /* Validate distances. */
 function validate() {
   var valid = true;
@@ -37,6 +63,10 @@ function loaded() {
     input.addEventListener('change', changed_distance, true);
   }
   validate();
+
+  for (var raikogram of document.getElementsByClassName('raikogram')) {
+    raikogram.addEventListener('dblclick', copy_raikogram, true);
+  }
 }
 
 document.onload = loaded();

diff --git a/style.css b/style.css
index 08c1e41..b0d1b59 100644 (file)
--- a/style.css
+++ b/style.css
@@ -22,8 +22,8 @@ table.entries a { color: inherit; text-decoration-style: dotted; }
 table.entries a:hover { text-decoration-style: solid; }
 table.entries a:active { text-decoration-style: double; }
 table.entries th, table.entries td { text-align: center; }
-table.raikogram tr:first-child th { padding-left: 1em; padding-right: 1em; }
-.classification .bbcode { display: none; background-color: rgba(0, 0, 0, 0.1); }
+.raikogram table tr:first-child th { padding-left: 1em; padding-right: 1em; }
+.bbcode { display: none; background-color: rgba(0, 0, 0, 0.1); }
 #systems { overflow-x: auto; }
 #stations { overflow-x: auto; }
 #waypoints { overflow-x: auto; }