Handle JS libraries with webpack (#488)

* Handle jquery and bootstrap using webpack, update to jquery 1.12.4

* Handle typeahead, clipboard and highlight in webpack

* Use js-cookie instead of jquery.cookie

* remove unnecessary timeline dependencies

* Handle jqtree with webpack

* Use native colorPicker in ColorWidget

* Fix timeline.js wrong date function name

* Download bootstrap-markdown and marked with npm

* Add eslint

* Use only .css to load fontawesome

* Update highcharts.js to 4.1.10 (earliest version in npm)

* Cleanup and split some js scripts

* Revert timeline.js changes (will fix it in separate PR)

* Remove jshint in favour of eslint

* Make webpack run on container start, add easytoolbox webpack command

* Make django server and webpack run in a single shell

* Cypress Github Action timeout not failing fix

* Add webpack docs

* Change Docker compose setup to use doccker's node_modules

* Install concurrently with npm

* Fix balloons loading old jquery bundle

* Refactor DateTimePicker widget to use Tempus Dominus

* datetimepicker use language setting

* Change DateTimePicker format to match js time picker

* Use tempus dominus in timeline.js

* Change how we call datetimepicker setValue

* Share code between datetimepicker.js and timeline.js

* Readd custom_undo

* Load select2 using npm

* Remove unnecessary csslintrc entry

Author: stopnoanime

.csslintrc

@@ -5,11 +5,5 @@
         "ids",
         "order-alphabetical",
         "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"
     ]
 }

.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/

.jshintignore

@@ -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

.jshintrc

@@ -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::
 

Dockerfile

@@ -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:

INSTALL.rst

@@ -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])

docker-compose-dev.yml

@@ -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"]
+  },
+]);