Handle JS libraries with webpack

.csslintrc

@@ -7,9 +7,6 @@
         "overqualified-elements"
     ],
     "exclude-list": [
-        "oioioi/base/static/bootstrap-datetimepicker-oioioi",
-        "oioioi/base/static/bootstrap-markdown",
-        "oioioi/portals/static/portals/jqtree.css",
-        "oioioi/timeline/static/jquery-ui"
+        "oioioi/base/static/bootstrap-datetimepicker-oioioi"
     ]
 }

.dockerignore

@@ -24,6 +24,10 @@
 /deployment/
 /venv*/
 /.idea/
+/.vscode/
+/.fleet/
+/dist_webpack/
+/node_modules/
 
 # docker specific
 

.gitignore

@@ -26,3 +26,5 @@
 /.idea/
 /.vscode/
 /.fleet/
+/dist_webpack/
+/node_modules/

Dockerfile

@@ -25,7 +25,9 @@ RUN apt-get update && \
         sox \
         flite \
         locales \
-        python3-pip && \
+        python3-pip \
+        nodejs \
+        npm && \
     apt-get clean
 
 # This is oioioi user linux uid. Setting it is useful in development.
@@ -64,8 +66,15 @@ RUN pip3 install -r requirements.txt --user filetracker[server]
 COPY --chown=oioioi:oioioi requirements_static.txt ./
 RUN pip3 install -r requirements_static.txt --user
 
+# Installing node dependencies
+ENV PATH $PATH:/sio2/oioioi/node_modules/.bin
+
+COPY --chown=oioioi:oioioi package.json package-lock.json ./
+RUN npm ci
+
 COPY --chown=oioioi:oioioi . /sio2/oioioi
 
+RUN npm run build
 RUN oioioi-create-config /sio2/deployment
 
 WORKDIR /sio2/deployment

INSTALL.rst

@@ -13,6 +13,7 @@ First, ensure that all dependencies are installed:
 * latex packages (*texlive-latex-extra*, *texlive-fonts-recommended*, *tex-gyre*,
   *texlive-pstricks*, *lmodern*),
 * Berkeley DB library (Ubuntu package: *libdb-dev*)
+* Node.js and npm (Ubuntu packages: *nodejs*, *npm*),
 
 It should be easier to begin with a separate folder at first::
 
@@ -29,7 +30,9 @@ Then OIOIOI and its dependencies can be installed using the following commands::
   git clone git://github.com/sio2project/oioioi.git
   cd oioioi
   pip install -r requirements.txt
-
+  npm install
+  npm run build
+
 OIOIOI is a set of Django applications, therefore you need to create a folder with
 Django settings and other deployment configuration::
 

docker-compose-dev.yml

@@ -40,6 +40,9 @@ services:
     # - "7887:7887"
     volumes:
       - .:/sio2/oioioi
+      # use docker's node_modules and dist_webpack instead of the host ones
+      - node_modules-dev:/sio2/oioioi/node_modules
+      - dist_webpack-dev:/sio2/oioioi/dist_webpack
       - filetracker-data-dev:/sio2/deployment/media
 #      - ./deployment:/sio2/deployment
     stop_grace_period: 3m
@@ -68,3 +71,5 @@ services:
 volumes:
   postgress-data-dev:
   filetracker-data-dev:
+  node_modules-dev:
+  dist_webpack-dev:

easy_toolbox.py

@@ -27,7 +27,8 @@
     ("up", "Run all SIO2 containers", "up -d"),
     ("down", "Stop and remove all SIO2 containers", "down"),
     ("wipe", "Stop all SIO2 containers and DESTROY all data", "down -v", True),
-    ("run", "Run server", "{exec} web python3 manage.py runserver 0.0.0.0:8000"),
+    ("run", "Run django server and webpack", 
+     '{exec} web conc -n js,py -c yellow,green -k "npm --prefix ../oioioi run -s watch" "python3 manage.py runserver 0.0.0.0:8000"'),
     ("stop", "Stop all SIO2 containers", "stop"),
     ("bash", "Open command prompt on web container.", "{exec} web bash"),
     ("exec", "Run a command in the web container.", "{exec} web {extra_args}"),
@@ -42,6 +43,8 @@
      "{exec} 'web' ../oioioi/test.sh oioioi/problems --cov-report term --cov-report xml:coverage.xml --cov=oioioi {extra_args}"),
     ("cypress-apply-settings", "Apply settings for CyPress.",
      '{exec} web bash -c "echo CAPTCHA_TEST_MODE=True >> settings.py"'),
+    ("npm", "Run npm command.", "{exec} web npm --prefix ../oioioi {extra_args}"),
+    ("eslint", "Run javascript linter.", "{exec} web npm --prefix ../oioioi run lint"),
 ]
 
 longest_command_arg = max([len(command[0]) for command in RAW_COMMANDS])

eslint.config.mjs

@@ -0,0 +1,33 @@
+import { defineConfig } from "eslint/config";
+import globals from "globals";
+import js from "@eslint/js";
+
+
+export default defineConfig([
+  {
+    files: ["oioioi/**/*.js"],
+    ignores: [
+      "**/*.min.js",
+      "oioioi/liveranking/**",
+      "oioioi/notifications/server/**",
+    ],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        $: "readonly",
+        jQuery: "readonly",
+        Cookies: "readonly",
+        Highcharts: "readonly",
+
+        django: "readonly",
+        gettext: "readonly",
+        ngettext: "readonly",
+        interpolate: "readonly",
+
+        oioioi_base_url: "readonly",
+      }
+    },
+    plugins: { js },
+    extends: ["js/recommended"]
+  },
+]);

oioioi/balloons/static/balloons/delivery-panel.js

@@ -89,7 +89,7 @@ $(function() {
                 data: {
                     id: id,
                     new_delivered: newDelivered,
-                    csrfmiddlewaretoken: $.cookie('csrftoken')
+                    csrfmiddlewaretoken: Cookies.get('csrftoken')
                 },
                 url: setDeliveredUrl,
                 success: function(data) { afterRequest(btn, data, moveRow); },

oioioi/balloons/static/balloons/refresh.js

@@ -1,4 +1,3 @@
-/* jshint unused:false */
 function startRefreshingBalloons(body_url) {
     var prev_body;
     setInterval(function() {

oioioi/balloons/templates/balloons/balloons.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
-{% load compress %}
+{% load compress static %}
 <html>
     <head>
         <title>{% block title %}OIOIOI{% endblock %}</title>
@@ -25,8 +25,8 @@
                 text-align: center;
             }
         </style>
+        <script src="{% static 'jquery.bundle.js' %}"></script>
         {% compress js %}
-            <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.9.1.min.js"></script>
             <script type="text/javascript" src="{{ STATIC_URL }}balloons/refresh.js"></script>
         {% endcompress %}
         <script>