Use DataTable for Name Selection

prijateli_tree/app/routers/administration.py

@@ -36,6 +36,7 @@
     KEY_LOGIN_SECRET,
     NETWORK_TYPE_INTEGRATED,
     NETWORK_TYPE_SEGREGATED,
+    NUMBER_OF_GAMES,
     NUMBER_OF_ROUNDS,
     ROLE_ADMIN,
     ROLE_STUDENT,
@@ -183,19 +184,22 @@ def dashboard_create_session(
 
 @router.post("/session", response_class=HTMLResponse)
 def create_session(
-    num_games: Annotated[int, Form()],
     player_one: Annotated[int, Form()],
     player_two: Annotated[int, Form()],
     player_three: Annotated[int, Form()],
     player_four: Annotated[int, Form()],
     player_five: Annotated[int, Form()],
     player_six: Annotated[int, Form()],
+    num_games: Annotated[int, Form()] | None = None,
     user=Depends(login_manager.optional),
     db: Session = Depends(Database),
 ) -> RedirectResponse:
     if user is None:
         return RedirectResponse("login", status_code=HTTPStatus.FOUND)
 
+    if num_games is None:
+        num_games = NUMBER_OF_GAMES
+        logging.info(f"Setting number of games to {num_games}")
     player_ids = [
         player_one,
         player_two,
@@ -235,7 +239,7 @@ def create_session(
             redirect_url,
             status_code=HTTPStatus.FOUND,
         )
-
+    logging.info("Setting up session")
     session = GameSession(
         created_by=user.id,
         num_games=num_games,

prijateli_tree/app/templates/base.html

@@ -17,6 +17,8 @@
     </title>
     <link href="{{ url_for('static', path='/css/bootstrap.min.css') }}"
           rel="stylesheet">
+    <link href="{{ url_for('static', path='css/datatables.min.css') }}"
+          rel="stylesheet">
     <link href="{{ url_for('static', path='/css/custom.css') }}"
           rel="stylesheet">
     <script type="text/javascript"
@@ -27,6 +29,8 @@
             src="{{ url_for('static', path='/js/jquery.dataTables.min.js') }}"></script>
     <script type="text/javascript"
             src="{{ url_for('static', path='/js/dataTables.bootstrap5.min.js') }}"></script>
+    <script type="text/javascript"
+            src="{{url_for('static', path='js/dataTables.select.min.js')}}"></script>
     {% block helper_script %}
     {% endblock helper_script %}
   </head>

prijateli_tree/app/templates/create_session.html

@@ -4,6 +4,50 @@
 {% endblock title %}
 {% block helper_script %}
   <script>
+  $(document).ready(function() {
+     $('#students').DataTable({
+       "select": 'multi',
+    });
+
+    $('#students tbody').on( 'click', 'tr', function () {
+        $(this).toggleClass('selected');
+    } );
+
+    $('#button').click( function () {
+      const selectedRows = $('#students').DataTable().rows('.selected').data().toArray();
+      const formData = new FormData();
+      const numbers = ["one", "two", "three", "four", "five", "six"]
+      const languageCounter = {}
+
+      for (i in selectedRows) {
+        formData.append("player_" + numbers[i], parseInt(selectedRows[i][0]))
+        lang = selectedRows[i][1]
+        languageCounter[lang] = languageCounter[lang] ? languageCounter[lang]  + 1 : 1;
+      }
+      const languageCounts = Object.values(languageCounter)
+      if (selectedRows.length != 6) {
+        alert("Must select 6 students")
+        return
+      } else if (languageCounts[0] != 3 || languageCounts[1] != 3) {
+        alert("A session must contain exactly 3 players from distinct mother tongues")
+        return
+      }
+
+      console.log(formData)
+
+      fetch('{{ url_for("create_session") }}', {
+          method: 'POST',
+          body: formData
+        })
+      .then(resp => {
+        window.location.href = resp.url
+      }) // or, resp.text(), etc
+      .catch(error => {
+          console.error(error);
+      });
+    });
+  });
+
   function cleanParams() {
       // Used to clear the URL of parameters after the banner alert is closed.
       window.history.replaceState(null, '', window.location.pathname);
@@ -21,7 +65,43 @@
               onclick="cleanParams()"></button>
     </div>
   {% endif %}
+  <!-- DataTable columns and headers go here -->
   <div class="container-sm">
+    <div class="row">
+      <table id="students" class="display  bg-light-subtle ">
+        <caption>List of Students</caption>
+        <thead>
+          <tr>
+            <th scope="col" hidden>ID</th>
+            <th scope="col" hidden>Language</th>
+            <th scope="col">Name</th>
+            <th scope="col">Email</th>
+            <th scope="col">Grade</th>
+            <th scope="col">High School</th>
+          </tr>
+        </thead>
+        <tbody class="table-group-divider">
+          {% if students|length == 0 %}
+            <tr class="empty-table">
+              <td colspan="7">There are no students currently in the system.</td>
+            </tr>
+          {% endif %}
+          {% for s in students|sort(attribute='high_school.name, last_name') %}
+            <tr>
+              <!-- hidden columns referenced in js-->
+              <td hidden>{{ s.id }}</td>
+              <td hidden>{{ s.language.abbr }}</td>
+              <td>{{ s.name_str }}</td>
+              <td>{{ s.email }}</td>
+              <td>{{ s.grade_level }}</td>
+              <td>{{ s.high_school.name }}</td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    <button id="button" class="btn btn-primary float-start">Save Selection</button>
+    <!--START OF FORM-->
     <div class="row">
       <div class="form-container bg-light-subtle col-xs-12 offset-md-1 col-md-10 offset-lg-1 col col-lg-10 offset-xl-3 col col-xl-6">
         <form method="post" action='{{ url_for("create_session") }}'>

prijateli_tree/app/utils/constants.py

@@ -18,6 +18,7 @@
 NETWORK_TYPE_SEGREGATED = "segregated"
 NETWORK_TYPE_SELF_SELECTED = "self-selected"
 NUMBER_OF_ROUNDS = 3
+NUMBER_OF_GAMES = 15
 ROLE_ADMIN = "admin"
 ROLE_STUDENT = "student"
 ROLE_SUPER_ADMIN = "super-admin"