seating-planner / seating_planner / templates / index.html

<!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 a matrix of information about connections between these people.</li>
      <li>Enter other parameters that control the seating plan.</li>
      <li>Click a button, and a possible seating plan is generated and displayed.</li>
    </ul>

    <p><strong>Please note: this app does not save any data.</strong>.
      You must remember to save:</p>
    <ul>
      <li>The connections matrix</li>
      <li>Any generated plans that you want to keep. Since random numbers are
      used, there is no guarantee of getting the same plan generated again for
      the same input data.</li>
    </ul>

    <h2>Names</h2>
    <p>It is easiest if you group all the names sensibly before adding them to
    the connections matrix.</p>
    <table>
      <tr>
        <td>
          <p>Names to add:</p>
          <textarea id="names" rows="20" cols="30"></textarea>
          <p><input type="submit" id="add-names" value="Add to connections"></p>
        </td>
        <td>
          <p>Names to remove:</p>
          <textarea id="names-to-remove" rows="20" cols="30"></textarea>
          <p><input type="submit" id="remove-names" value="Remove from connections"></p>
        </td>
      </tr>
    </table>


    <h2>Connections</h2>

    <p>Define connections between people, on a range from -50 to 50:</p>
    <ul>
      <li>-50: 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</h3>

      <div class="download-form">
        Download connection data:
        <input type="submit" id="download-connections" value="Download">
        <div id="download-container" style="display: none;"></div>
      </div>


      <div class="upload-form">
        <form id="upload-form" method="POST">
          Upload connection data:
          <input type="file" id="upload-selector">
          <input type="submit" id="upload-connections" value="Upload">
        </form>
      </div>

      <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 style="display: none;">
      <textarea id="file-data-raw" rows="20" cols="50"></textarea>
      <input id="file-name" type="text">
    </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>

    <h3>Algorithm tuning:</h3>
    <p><label>Exploration steps<input type="text" id="exploration-steps" value="100"></label></p>
    <p><label>Annealing time in seconds<input type="text" id="annealing-time" value="6"></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>

    <p>Plans display groups of people, with the number of other people on their
    table that they know.</p>

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


  </body>
</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.