yeet gulp from build system (involves lots of chaos)

Dockerfile

@@ -1,4 +1,22 @@
-FROM docker.io/python:3.12-bookworm
+FROM node:25-bookworm-slim AS build-frontend
+
+RUN mkdir /opt/conditional
+
+WORKDIR /opt/conditional
+
+RUN apt-get -yq update && \
+    apt-get -yq install curl git
+
+COPY package.json package-lock.json /opt/conditional/
+
+RUN npm ci 
+
+COPY build*.js /opt/conditional
+COPY frontend /opt/conditional/frontend
+
+RUN npm run build
+
+FROM docker.io/python:3.12-slim-bookworm
 MAINTAINER Computer Science House <[email protected]>
 
 RUN mkdir /opt/conditional
@@ -12,21 +30,13 @@ RUN apt-get -yq update && \
     pip install -r requirements.txt && \
     apt-get -yq clean all
 
-ENV NVM_DIR /usr/local/nvm
-ENV NODE_VERSION v10.24.1
-RUN mkdir -p $NVM_DIR
-
-RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
+ARG PORT=8080
+ENV PORT=${PORT}
+EXPOSE ${PORT}
 
-RUN /bin/bash -c "source $NVM_DIR/nvm.sh && nvm install $NODE_VERSION"
-
-ADD . /opt/conditional
-
-RUN /bin/bash -c "source $NVM_DIR/nvm.sh && nvm use --delete-prefix $NODE_VERSION && npm install && npm run production"
-
-RUN rm -rf node_modules && \
-    apt-get -yq clean all
+COPY . /opt/conditional
+COPY --from=build-frontend /opt/conditional/conditional/static /opt/conditional/conditional/static
 
 RUN ln -sf /usr/share/zoneinfo/America/New_York /etc/localtime
 
-CMD ["gunicorn", "conditional:app", "--bind=0.0.0.0:8080", "--access-logfile=-", "--timeout=256"]
+CMD ["sh", "-c", "gunicorn conditional:app --bind=0.0.0.0:${PORT} --access-logfile=- --timeout=256"]

build-css.js

@@ -0,0 +1,41 @@
+const { exec } = require('child_process');
+const path = require('path');
+
+// yes I know this is awkward. I want to actually use the node libraries but that gets SUBSTANTIALLY easier when node and all the dependinces are updated
+// So after I can update node and stuff I'll change this to do it in a sane way, probably in webpack
+
+const loadPaths = [
+  "./node_modules/csh-material-bootstrap/dist/css",
+  "./node_modules/datatables.net-bs/css",
+  "./node_modules/bootstrap-material-datetimepicker/css",
+  "./node_modules/selectize-scss/src",
+  "./node_modules/load-awesome/css",
+  "./node_modules/reveal.js/css",
+  "./node_modules",
+  ".",
+]
+
+const loadPathCommands = loadPaths.map((string) => "-I " + string);
+
+const loadPathString = loadPathCommands.join(" ");
+
+function compileFile(file) {
+  // you can use the node package but it doesn't like the version of node we're using for this rn fix later tm
+  const cmd = "sass " + loadPathString + " " + "frontend/stylesheets/" + file + ".scss" + " conditional/static/css/" + file + ".css";
+
+  exec(cmd, (error, stdout, stderr) => {
+    console.log(`stdout: ${stdout}`);
+    console.error(`stderr: ${stderr}`);
+    if (error) {
+      console.error(`exec error: ${error}`);
+      throw error;
+    }
+  })
+}
+
+exec("mkdir -p " + path.resolve("conditional/static/css"))
+
+compileFile("app")
+
+compileFile("presentations")
+

build-webpack.js

@@ -0,0 +1,76 @@
+var webpack = require("webpack")
+var path = require('path');
+
+var jsSrc = path.resolve('./frontend/javascript');
+var jsDest = path.resolve('./conditional/static/js');
+var publicPath = 'static/js';
+
+var babelQuery = {
+  "presets": ["@babel/preset-env"],
+  "plugins": []
+}
+
+var webpackConfig = {
+  context: jsSrc,
+  entry: ["./app.js"],
+  output: {
+    path: path.normalize(jsDest),
+    filename: '[name].js',
+    publicPath: publicPath
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify('production')
+      }
+    }),
+  ],
+  resolve: {
+    modules: [
+      path.join(__dirname, "frontend/javascript"),
+      path.join(__dirname, "frontend/node_modules"),
+    ],
+  },
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          query: babelQuery
+        }
+      },
+      {
+        test: require.resolve("jquery"),
+        use: {
+          loader: 'expose-loader'
+        }
+      },
+      {
+        test: /bootstrap-material-datetimepicker/,
+        use: {
+          loader: 'imports?moment'
+        }
+      },
+      {
+        test: /bootstrap-sweetalert.*$/,
+        use: {
+          loader: 'babel-loader',
+          query: {
+            query: babelQuery
+          }
+        }
+      },
+    ]
+  },
+  optimization: {
+    emitOnErrors: true,
+  }
+};
+
+webpack(webpackConfig, (err, stats) => {
+  console.log("Done!")
+  console.log(err, stats)
+});

conditional/__init__.py

@@ -40,13 +40,9 @@
                app.config['LDAP_BIND_PW'],
                ro=app.config['LDAP_RO'])
 
-client_metadata = ClientMetadata(
-    client_id = app.config['OIDC_CLIENT_ID'],
-    client_secret = app.config['OIDC_CLIENT_SECRET'],
-    post_logout_redirect_uris = app.config['OIDC_POST_LOGOUT_REDIRECT_URIS'],
-)
-provider_config = ProviderConfiguration(issuer=app.config["OIDC_ISSUER"], client_metadata=client_metadata)
-
+provider_config = ProviderConfiguration(
+    app.config['OIDC_ISSUER'],
+    client_metadata=ClientMetadata(**app.config['OIDC_CLIENT_CONFIG']))
 auth = OIDCAuthentication({'default': provider_config}, app)
 
 app.secret_key = app.config["SECRET_KEY"]

conditional/templates/attendance_history.html

@@ -23,7 +23,7 @@ <h5>{{meeting["name"]}}</h5>
             	</div><!--
                 --><div class="col-xs-12 col-sm-2 vcenter text-center">
             		<button type="button" class="btn btn-default navbar-btn" data-module="cmReview" data-modal="reviewMeeting" data-cid="{{meeting["id"]}}" data-meeting="cm">
-            		<span class="glyphicon glyphicon-eye-open attend-edit-icon"></span> Review
+            		<i class="bi bi-eye attend-edit-icon"></i> Review
             		</button>
             	</div>
             </div>
@@ -50,7 +50,7 @@ <h5>{{seminar["name"]}}</h5>
             	</div><!--
                 --><div class="col-xs-12 col-sm-2 vcenter text-center">
             		<button type="button" class="btn btn-default navbar-btn" data-module="cmReview" data-modal="reviewMeeting" data-cid="{{seminar["id"]}}" data-meeting="ts">
-            		<span class="glyphicon glyphicon-eye-open attend-edit-icon"></span> Review
+            		<i class="bi bi-eye attend-edit-icon"></i> Review
             		</button>
             	</div>
             </div>
@@ -76,7 +76,7 @@ <h5>{{meeting["name"]}}</h5>
             	</div><!--
                 --><div class="col-xs-12 col-sm-2 vcenter text-center">
             		<button type="button" class="btn btn-default navbar-btn" data-module="cmReview" data-modal="editMeeting" data-cid="{{meeting["id"]}}" data-meeting="{{meeting["type"]}}">
-            		<span class="glyphicon glyphicon-edit attend-edit-icon"></span> Edit
+            		<i class="bi bi-pencil-square attend-edit-icon"></i> Edit
             		</button>
             	</div>
             </div>

conditional/templates/co_op_management.html

@@ -30,7 +30,7 @@ <h3 class="panel-title">Co-Op Management</h3>
                         </td>
                         <td width=100px>
                             <a href="#" data-module="coopDelete" data-uid="{{c[1]}}">
-                                <span class="glyphicon glyphicon-trash red align-center" style="width: 100%"></span>
+                                <i class="bi bi-trash3 red align-center" style="width: 100%"></i>
                             </a>
                         </td>
                     </tr>

conditional/templates/conditional.html

@@ -10,7 +10,7 @@ <h3 class="panel-title">
                     Conditionals
                     {% if is_eval_director %}
                         <button type="button" class="btn btn-primary btn-sm btn-conditional pull-right" data-toggle="modal" data-target="#createConditional">
-                            <span class="glyphicon glyphicon-plus"></span> Add
+                            <i class="bi bi-plus"></i> Add
                         </button>
                     {% endif %}
                 </h3>
@@ -43,7 +43,7 @@ <h3 class="panel-title">
                                     <td data-module="conditionalActions" data-id="{{ c['id'] }}">
                                         <button role="button" class="btn btn-sm btn-success" data-action="pass">Pass</button>
                                         <button role="button" class="btn btn-sm btn-danger" data-action="fail">Fail</button>
-                                        <button role="button" class="btn btn-sm btn-default" data-action="delete"><span class="glyphicon glyphicon-trash"></span> Delete</button>
+                                        <button role="button" class="btn btn-sm btn-default" data-action="delete"><i class="bi bi-trash3"></bi> Delete</button>
                                     </td>
                                     {% endif %}
                                 </tr>