seating-planner / templates / index.html

Full commit
<!doctype html>
    <title>Seating planner</title>
    <script src="//"></script>
    <script src="//"></script>
    <link rel="stylesheet" media="screen" href="//">
    <script type=text/javascript>
      $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    <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') }}">
    <h1>Seating planner</h1>


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

      <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>Click a button, and a possible seating plan is generated and displayed.</li>

    <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>

          <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>
          <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>


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

    <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>

        <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:
            <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>

      <table id="connections-controls">
            <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">
            <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">
            <div id="connections" class="handsontable"></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">
      <p><input type="submit" id="update-matrix" value="Update matrix"></p>


    <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>


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

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