Update alliance selection page for Bootstrap 5.

Team254 · May 11, 2024 · 57ebca5 · 57ebca5
1 parent 797780e
commit 57ebca5
Showing 1 changed file with 34 additions and 36 deletions.
diff --git a/templates/alliance_selection.html b/templates/alliance_selection.html
@@ -9,38 +9,38 @@
 <div class="row">
   {{if .ErrorMessage}}
     <div class="alert alert-dismissable alert-danger">
-      <button type="button" class="close" data-dismiss="alert">×</button>
+      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
       {{.ErrorMessage}}
     </div>
   {{end}}
   {{if len .Alliances | eq 0}}
     <div class="col-lg-3">
       <form action="/alliance_selection/start" method="POST">
         <legend>Alliance Selection</legend>
-        <button type="submit" class="btn btn-info">Start Alliance Selection</button>
+        <button type="submit" class="btn btn-primary">Start Alliance Selection</button>
       </form>
     </div>
   {{else}}
-    <form action="" method="POST">
-      <div class="col-lg-3 ">
-        <legend>Alliance Selection</legend>
-        <div class="form-group">
-          <button type="submit" class="btn btn-info">Update</button>
-        </div>
-        <div class="form-group">
-          <button type="button" class="btn btn-danger"
-              onclick="$('#confirmResetAllianceSelection').modal('show');">
-            Reset Alliance Selection
-          </button>
-        </div>
-        <div class="form-group">
-          <button type="button" class="btn btn-primary"
-              onclick="$('#confirmFinalizeAllianceSelection').modal('show');">
-            Finalize Alliance Selection
-          </button>
-        </div>
+    <div class="col-lg-3 ">
+      <legend>Alliance Selection</legend>
+      <div class="mb-2">
+        <button type="submit" class="btn btn-primary" form="alliancesForm">Update</button>
+      </div>
+      <div class="mb-2">
+        <button type="button" class="btn btn-warning"
+            onclick="$('#confirmResetAllianceSelection').modal('show');">
+          Reset Alliance Selection
+        </button>
       </div>
-      <div class="col-lg-5">
+      <div>
+        <button type="button" class="btn btn-danger"
+            onclick="$('#confirmFinalizeAllianceSelection').modal('show');">
+          Finalize Alliance Selection
+        </button>
+      </div>
+    </div>
+    <div class="col-lg-5">
+      <form id="alliancesForm" action="" method="POST">
         <table class="table table-striped table-hover">
           <thead>
             <tr>
@@ -76,8 +76,8 @@
           </tbody>
         </table>
         Hint: Press 'Enter' after entering each team number for easiest use.
-      </div>
-    </form>
+      </form>
+    </div>
     <div class="col-lg-2">
       <table class="table table-striped table-hover">
         <thead>
@@ -104,46 +104,44 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h4 class="modal-title">Confirm</h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <p>Are you sure you want to reset the alliance selection process?</p>
       </div>
       <div class="modal-footer">
         <form class="form-horizontal" action="/alliance_selection/reset" method="POST">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
           <button type="submit" class="btn btn-danger">Reset Alliance Selection</button>
         </form>
       </div>
     </div>
   </div>
 </div>
-<div id="confirmFinalizeAllianceSelection" class="modal" style="top: 20%;">
+<div id="confirmFinalizeAllianceSelection" class="modal modal-lg" style="top: 20%;">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h4 class="modal-title">Confirm</h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <form class="form-horizontal" action="/alliance_selection/finalize" method="POST">
         <div class="modal-body">
           <p>Are you sure you want to finalize the alliance selection process?</p>
-          <div class="form-group">
+          <div class="row mt-4">
             <label class="col-lg-6 control-label">Playoff Round Start Time</label>
             <div class="col-lg-6">
-              <div class="input-group date" id="startTimePicker" data-date-format="YYYY-MM-DD hh:mm:ss A">
-                <input type="text" class="form-control input-sm" name="startTime" />
-                <span class="input-group-addon input-sm">
-                  <span class="glyphicon glyphicon-calendar"></span>
-                </span>
+              <div class="input-group" id="startTimePicker">
+                <input type="text" class="form-control" name="startTime" />
+                <span class="input-group-text"><i class="bi-calendar-week"></i></span>
               </div>
             </div>
           </div>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-          <button type="submit" class="btn btn-primary">Finalize Alliance Selection</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button type="submit" class="btn btn-danger">Finalize Alliance Selection</button>
         </div>
       </form>
     </div>
@@ -154,7 +152,7 @@ <h4 class="modal-title">Confirm</h4>
 <script>
   $(function() {
     var startTime = moment(new Date()).hour(13).minute(0).second(0);
-    $("#startTimePicker").datetimepicker().data("DateTimePicker").setDate(startTime);
+    newDateTimePicker("startTimePicker", startTime.toDate());
   });
 </script>
 {{end}}