Source

seating-planner / templates / index.html

Full commit
<!doctype html>
<html>
  <head>
    <title>Seating planner</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//handsontable.com/dist/jquery.handsontable.full.js"></script>
    <link rel="stylesheet" media="screen" href="//handsontable.com/dist/jquery.handsontable.full.css">
    <script type=text/javascript>
      $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    </script>
    <script src="{{ url_for('static', filename='connections.js') }}"></script>
    <script src="{{ url_for('static', filename='plans.js') }}"></script>
    <link rel="stylesheet" media="screen" href="{{ url_for('static', filename='style.css') }}">
  <body>
    <h1>Seating planner</h1>

    <h2>Instructions</h2>

    <p>The steps in this process are:</p>

    <ul>
      <li>Enter the list of people who are at the event.</li>
      <li>Enter information about connections between these people.</li>
      <li>Enter other parameters that control the seating plan.</li>
      <li>Possible seating plans are generated and displayed.</li>
    </ul>


    <p><strong>Please note:</strong> This app does not save any data. It is up
    to you to copy-paste data that you edit on this page.</p>

    <h2>Names</h2>
    <p>Enter a list of names here:</p>
    <textarea id="names" rows="20" cols="30"></textarea>

    <p><input type="submit" id="add-names" value="Add to connections"></p>

    <h2>Connections</h2>

    <p>Define connections between people, on a range from -10 to 50:</p>
    <ul>
      <li>-10: People who must be kept apart</li>
      <li>0: People who don't know each other</li>
      <li>1: People who know each other, but don't need to be seated together</li>
      <li>50: People who must be kept together</li>
    </ul>

    <div id="connections-matrix-controls">
      <h3>Matrix <input type="submit" id="show-raw-connections" value="Show raw connections data"></h3>
      <p>Using the matrix:</p>

      <ul>
        <li>The matrix is symmetrical. Edit one half and the other will be filled in automatically.</li>
        <li>If you create a group, then values for all the people in the group will be edited together. Groups can be selected down the left, across the top, or both.</li>
        <li>To enter that a group of people all know each other:
          <ul>
            <li>Clear any group on the left</li>
            <li>Add all the people in the group on left</li>
            <li>Choose 'mirror group' on the left to create the same group across the top</li>
            <li>Edit one connection between two people, and all will be updated</li>
          </ul>
        </li>
      </ul>

      <table id="connections-controls">
        <tr>
          <td></td>
          <td>Groups:
            <input type="submit" value="Clear group" id="clear-group-top">
            <input type="submit" value="Add to group" id="add-to-group-top">
            <input type="submit" value="Remove from group" id="remove-from-group-top">
            <input type="submit" value="Mirror group" id="mirror-group-top">
          </td>
        </tr>
        <tr>
          <td>Groups:<br/>
            <input type="submit" value="Clear group" id="clear-group-left"><br/>
            <input type="submit" value="Add to group" id="add-to-group-left"><br/>
            <input type="submit" value="Remove from group" id="remove-from-group-left"><br/>
            <input type="submit" value="Mirror group" id="mirror-group-left">
          </td>
          <td>
            <div id="connections" class="handsontable"></div>
          </td>
        </tr>
      </table>
    </div>

    <div id="connections-raw-controls" style="display: none;">
      <h3>Data <input type="submit" id="hide-raw-connections" value="Hide raw data"></h3>
      <textarea id="connections-raw" rows="20" cols="50">
      </textarea>
      <p><input type="submit" id="update-matrix" value="Update matrix"></p>
    </div>

    <h2>Parameters</h2>

    <p><label>Table size <input type="text" id="table-size" value="8"></label></p>
    <p><label>Number of tables <input type="text" id="table-count" value="5"></label></p>

    <h2>Plans</h2>

    <p><input type="submit" id="find-solution" value="Find solution">
      <img id="loading" src="{{ url_for('static', filename='loading.gif') }}" style="display: none;">
    </p>

    <div class="plans-container">
      <table>
        <tr id="plans">
        </tr>
      </table>
    </div>


  </body>
</html>