1. Luke Plant
  2. seating-planner


seating-planner / seating_planner / templates / index.html

<!doctype html>
    <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 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 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>

    <p><strong>Please note: this app does not save any data.</strong>
      You must remember to save:</p>
      <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>

    <p>It is easiest if you group all the names sensibly before adding them to
    the connections matrix.</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 -50 to 50:</p>
      <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>

    <div id="connections-matrix-controls">

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

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


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


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

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

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