Bootstrap 5 Upgrade

.dockerignore

@@ -1 +1,3 @@
 node_modules/
+.env
+.env.example

.env.example

@@ -1,6 +1,7 @@
 PACKET_IP=0.0.0.0
-PACKET_SERVER_NAME=localhost.localdomain:8000
+PACKET_SERVER_NAME=localhost:8000
 PACKET_DATABASE_URI=postgresql://postgres:mysecretpassword@postgres:5432/postgres
+PACKET_OIDC_CLIENT_ID=develop
 PACKET_OIDC_CLIENT_SECRET=
 PACKET_LDAP_BIND_PASS=
 PACKET_LDAP_BIND_DN=

Dockerfile

@@ -1,4 +1,4 @@
-FROM docker.io/python:3.9-slim-trixie
+FROM docker.io/python:3.14-slim-trixie
 
 RUN ln -sf /usr/share/zoneinfo/America/New_York /etc/localtime
 RUN apt-get -yq update && \
@@ -32,4 +32,4 @@ RUN gulp production && \
 # Set version for apm
 RUN echo "export DD_VERSION=\"$(python3 packet/git.py)\"" >> /tmp/version
 
-CMD ["/bin/bash", "-c", "source /tmp/version && ddtrace-run gunicorn packet:app --bind=0.0.0.0:8080 --access-logfile=- --timeout=600"]
+CMD ["/bin/bash", "-c", "source /tmp/version && gunicorn packet:app --bind=0.0.0.0:8080 --access-logfile=- --timeout=600"]

README.md

@@ -14,7 +14,7 @@ the second major iteration of packet on the web. The first version was
 2. Build the dev environment with `docker compose build`
 3. Start the dev environment with `docker compose up`
 4. Run the database migrations with `docker exec -it packet-packet-1 flask db upgrade`
-5. Go check out the app at http://localhost.localdomain:8000
+5. Go check out the app at http://localhost:8080
 
 > Useful Tip: use `docker compose up --watch` so that you don't need to rebuild the container every time you want to test a change
 

config.env.py

@@ -24,7 +24,7 @@
 OIDC_CLIENT_SECRET = environ.get("PACKET_OIDC_CLIENT_SECRET", "PLEASE_REPLACE_ME")
 
 # SQLAlchemy config
-SQLALCHEMY_DATABASE_URI = environ.get("PACKET_DATABASE_URI", "postgresql://postgres:mysecretpassword@localhost:5432/postgres")
+SQLALCHEMY_DATABASE_URI = environ.get("PACKET_DATABASE_URI", "postgresql://postgres:mysecretpassword@postgres:5432/postgres")
 SQLALCHEMY_TRACK_MODIFICATIONS = False
 
 # LDAP config

docker-compose.yml

@@ -2,12 +2,11 @@ services:
   packet:
     build:
       context: .
-      dockerfile: ./Dockerfile.dev
     env_file:
       - path: ".env"
         required: true
     ports:
-      - "8000:8000"
+      - "8080:8080"
     develop:
       watch:
         - action: sync+restart
@@ -23,14 +22,15 @@ services:
       postgres:
         condition: service_healthy
         restart: true
+
   postgres:
-    image: "docker.io/postgres:17"
+    image: docker.io/postgres
     networks:
       - packet-network-dev
     environment:
-      POSTGRES_USER: "postgres"
-      POSTGRES_DB: "postgres"
-      POSTGRES_PASSWORD: "mysecretpassword"
+      POSTGRES_USER: postgres
+      POSTGRES_DATABASE: postgres
+      POSTGRES_PASSWORD: mysecretpassword
     ports:
       - "5432:5432"
     healthcheck:

frontend/scss/partials/_base.scss

@@ -1,6 +1,7 @@
 @use "sass:meta";
 body {
   padding-top: 40px;
+  background-color: #eee;
 }
 
 .main {

frontend/scss/partials/_global.scss

@@ -1,10 +1,5 @@
 $csh-pink: #b0197e;
 
-.navbar-fixed-bottom,
-.navbar-fixed-top {
-  z-index: 900;
-}
-
 .sub-header {
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
@@ -110,3 +105,24 @@ tr {
 select.form-control:not([size]):not([multiple]) {
   height: calc(3rem + 2px);
 }
+
+.bg-signed td {
+  background-color: #4caf505e !important;
+  box-shadow: none !important;
+}
+
+.invert-color {
+  filter: invert(100%);
+}
+
+.underline-only-hover {
+  text-decoration: none;
+}
+
+.underline-only-hover:hover {
+  text-decoration: underline;
+}
+
+.text-bg-grey {
+  background-color: var(--bs-gray-500);
+}

gulpfile.js/tasks/javascript.js

@@ -3,8 +3,8 @@ const minify = require('gulp-minify');
 
 gulp.task('js:minify', (done) => {
     gulp.src([
-        'packet/static/js/*.js',
-        '!packet/static/js/*.min.js'
+        'packet/static/js/**/*.js',
+        '!packet/static/js/**/*.min.js'
     ])
         .pipe(minify({
             ext: {

packet/__init__.py

@@ -44,7 +44,8 @@
 # Initialize the extensions
 db = SQLAlchemy(app)
 migrate = Migrate(app, db)
-app.logger.info('SQLAlchemy pointed at ' + repr(db.engine.url))
+with app.app_context():
+    app.logger.info('SQLAlchemy pointed at ' + repr(db.engine.url))
 
 APP_CONFIG = ProviderConfiguration(issuer=app.config['OIDC_ISSUER'],
                           client_metadata=ClientMetadata(app.config['OIDC_CLIENT_ID'],

packet/static/js/admin/freshmen.js

@@ -0,0 +1,89 @@
+$(document).ready(function () {
+
+    // let openPacketsTable = $('#open_packets_table');
+    // openPacketsTable.DataTable({
+    //     "searching": true,
+    //     "order": [],
+    //     "scrollX": false,
+    //     "paging": true,
+    //     "info": false,
+    //     "columnDefs": [
+    //         {
+    //             "targets": 0,
+    //             "max-width": "50%",
+    //         },
+    //         {
+    //             "type": "num-fmt",
+    //             "targets": 1,
+    //             "visible": true,
+    //             "max-width": "15%",
+    //         }
+    //     ]
+    // });
+
+    $('#all_freshmen_table').dataTable({
+        "searching": true,
+        "order": [],
+        "scrollX": false,
+        "paging": true,
+        "info": false,
+    });
+
+    // $("#create-packets").click(() => {
+    //     makePackets();
+    // });
+
+    $("#sync-freshmen").click(() => {
+        syncFreshmen();
+    })
+
+    // $("#sync-ldap").click(() => {
+    //     syncLdap();
+    // })
+
+});
+
+let syncFreshmen = () => {
+    let freshmen = [];
+    let fileUpload = document.getElementById("currentFroshFile");
+    let regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
+    if (regex.test(fileUpload.value.toLowerCase())) {
+        if (typeof (FileReader) != "undefined") {
+            let reader = new FileReader();
+            reader.onload = (e) => {
+                let rows = e.target.result.split("\n");
+                for (let i = 0; i < rows.length; i++) {
+                    let cells = rows[i].split(",");
+                    if (cells.length > 1) {
+                        freshmen.push({
+                            rit_username: cells[3],
+                            name: cells[0],
+                            onfloor: cells[1]
+                        });
+                    }
+                }
+                if (freshmen.length >= 1) {
+                    $("#sync-freshmen").append("&nbsp;<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>");
+                    $("#sync-freshmen").attr('disabled', true);
+                    fetch('/api/v1/freshmen',
+                        {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(freshmen)
+                        }
+                    ).then(response => {
+                        if (response.status < 300) {
+                            $('#sync-freshmen-modal').modal('hide');
+                            location.reload();
+                        } else {
+                            alert("There was an error syncing freshmen")
+                        }
+                    })
+                }
+            }
+            reader.readAsText(fileUpload.files[0]);
+        }
+    }
+}

packet/static/js/admin.js → packet/static/js/admin/packets.js

@@ -21,22 +21,21 @@ $(document).ready(function () {
         ]
     });
 
-    let allFreshmenTable = $('#all_freshmen_table');
-    allFreshmenTable.DataTable({
-        "searching": true,
-        "order": [],
-        "scrollX": false,
-        "paging": true,
-        "info": false,
-    });
+    // $('#all_freshmen_table').dataTable({
+    //     "searching": true,
+    //     "order": [],
+    //     "scrollX": false,
+    //     "paging": true,
+    //     "info": false,
+    // });
 
     $("#create-packets").click(() => {
         makePackets();
     });
 
-    $("#sync-freshmen").click(() => {
-        syncFreshmen();
-    })
+    // $("#sync-freshmen").click(() => {
+    //     syncFreshmen();
+    // })
 
     $("#sync-ldap").click(() => {
         syncLdap();
@@ -93,50 +92,50 @@ let makePackets = () => {
 }
 
 
-let syncFreshmen = () => {
-    let freshmen = [];
-    let fileUpload = document.getElementById("currentFroshFile");
-    let regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
-    if (regex.test(fileUpload.value.toLowerCase())) {
-        if (typeof (FileReader) != "undefined") {
-            let reader = new FileReader();
-            reader.onload = (e) => {
-                let rows = e.target.result.split("\n");
-                for (let i = 0; i < rows.length; i++) {
-                    let cells = rows[i].split(",");
-                    if (cells.length > 1) {
-                        freshmen.push({
-                            rit_username: cells[3],
-                            name: cells[0],
-                            onfloor: cells[1]
-                        });
-                    }
-                }
-                if (freshmen.length >= 1) {
-                    $("#sync-freshmen").append("&nbsp;<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>");
-                    $("#sync-freshmen").attr('disabled', true);
-                    fetch('/api/v1/freshmen',
-                        {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(freshmen)
-                        }
-                    ).then(response => {
-                        if (response.status < 300) {
-                            $('#sync-freshmen-modal').modal('hide');
-                            location.reload();
-                        } else {
-                            alert("There was an error syncing freshmen")
-                        }
-                    })
-                }
-            }
-            reader.readAsText(fileUpload.files[0]);
-        }
-    }
-}
+// let syncFreshmen = () => {
+//     let freshmen = [];
+//     let fileUpload = document.getElementById("currentFroshFile");
+//     let regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
+//     if (regex.test(fileUpload.value.toLowerCase())) {
+//         if (typeof (FileReader) != "undefined") {
+//             let reader = new FileReader();
+//             reader.onload = (e) => {
+//                 let rows = e.target.result.split("\n");
+//                 for (let i = 0; i < rows.length; i++) {
+//                     let cells = rows[i].split(",");
+//                     if (cells.length > 1) {
+//                         freshmen.push({
+//                             rit_username: cells[3],
+//                             name: cells[0],
+//                             onfloor: cells[1]
+//                         });
+//                     }
+//                 }
+//                 if (freshmen.length >= 1) {
+//                     $("#sync-freshmen").append("&nbsp;<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>");
+//                     $("#sync-freshmen").attr('disabled', true);
+//                     fetch('/api/v1/freshmen',
+//                         {
+//                             method: 'POST',
+//                             headers: {
+//                                 'Content-Type': 'application/json'
+//                             },
+//                             body: JSON.stringify(freshmen)
+//                         }
+//                     ).then(response => {
+//                         if (response.status < 300) {
+//                             $('#sync-freshmen-modal').modal('hide');
+//                             location.reload();
+//                         } else {
+//                             alert("There was an error syncing freshmen")
+//                         }
+//                     })
+//                 }
+//             }
+//             reader.readAsText(fileUpload.files[0]);
+//         }
+//     }
+// }
 
 let syncLdap = () => {
     $("#sync-ldap").append("&nbsp;<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>");