From mboxrd@z Thu Jan  1 00:00:00 1970
From: Leo-Andres Hofmann <hofmann@leo-andres.de>
To: development@lists.ipfire.org
Subject: Re: [PATCH 1/4] WUI: Start implementing a simple JavaScript framework
Date: Thu, 13 Apr 2023 17:21:05 +0200
Message-ID: <415f013d-bb30-0467-38e6-114dbad20fde@leo-andres.de>
In-Reply-To: <724ee528-2a00-7de1-3a66-eb0c695aaa88@ipfire.org>
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="===============6215340951967490503=="
List-Id: <development.lists.ipfire.org>

--===============6215340951967490503==
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: quoted-printable

Hi Adolf,

Thanks for the heads up!

Am 13.04.2023 um 13:42 schrieb Adolf Belka:
> Hi Leo,
>
> On 12/04/2023 09:14, Leo-Andres Hofmann wrote:
>>
>> Hi Michael,
>>
>> Am 11.04.2023 um 14:58 schrieb Michael Tremer:
>>> Hello,
>>>
>>> Thanks for the patchset.
>>>
>>> It is a lot of code to look through indeed.
>> Yes, I'm aware this is a bit unannounced and a lot of code. Thank you=20
>> for looking at it!
>>>> On 1 Apr 2023, at 15:43, Leo-Andres Hofmann<hofmann(a)leo-andres.de>=C2=
=A0=20
>>>> wrote:
>>>>
>>>> This patch is an effort to modernize and unify the WUI JavaScript.
>>>> It will be possible to share e.g. translation strings and common
>>>> functions between the different modules.
>>>>
>>>> This uses native ES6 modules that are supported by all major browsers.
>>>> Therefore, no change to the toolchain is necessary.
>>>>
>>>> Signed-off-by: Leo-Andres Hofmann<hofmann(a)leo-andres.de>
>>>> ---
>>>>
>>>> Hi all,
>>>>
>>>> this patchset brings new modern Javascript modules to the=20
>>>> webinterface.
>>> I suppose there is no way around this.
>> My thinking was: At the moment, the web interface is quite=20
>> old-fashined and uses relatively little javascript, scattered in=20
>> multiple files.
>> But new features are still added on a fairly regular basis. So I=20
>> think it makes sense to start a good structure now rather than later.
>>> Is this all written from scratch? Did you base this on anything or=20
>>> use some existing code as inspiration?
>> This is written from scratch, in the sense that it is not just a=20
>> modified copy of some existing library.
>> However, I have read the documentation of other libraries before, and=20
>> there are only so many reasonable ways to implement this.
>> So I haven't tried to reinvent the wheel, and you'll certainly be=20
>> able to find similarities to existing libraries. But the actual=20
>> source code in this patchset is 100% my own work.
>>
>> - The module.enable/readyState logic is inspired by jQuery's .ready=20
>> and the HTML DOM readyState property
>> - The i18n class is based on the work I did for pakfire.js and=20
>> extended to work with the module concept
>> - To learn how to create the CSS overlay window, I followed the=20
>> w3schools tutorial "Overlay"
> I have done some changes on the dhcp.cgi and urlxlrator.cgi pages to=20
> replace bgcolor, which was deprecated in HTML 4.x and no longer=20
> supported at all in HTML 5, with its CSS equivalent approach. I used=20
> your CSS approach on the zone config cgi page as the basis for what I=20
> changed.
>
> My plan was to go through the other cgi pages doing the same type of=20
> changes.
>
> Should I hold on that until you have made this change to the CSS=20
> approach with the CSS Overlay?

I mostly add new things here, so I don't think this could be a problem.=20
You can go ahead!

By the way, if you want to make things a bit easier for yourself: Check=20
out the nth-child CSS selector: "tr:nth-child(2n+3)"
With this, you can do the color assignment for odd/even rows entirely in=20
CSS and remove all the uncessary "if ($id % 2) color1..., else=20
color2..." Perl code.
Then you only need to print a plain HTML table, everything else is done=20
by the browser.

Best,
Leo

>
> Regards,
> Adolf.
>> - The async/await interface for the dialog box is inspired by=20
>> jQuery's deferred.then() interface for Ajax calls, but implemented=20
>> with native JS
>>> Are they any existing libraries that could be useful for example=20
>>> pulling in the translation?
>> I looked at a few popular libraries, but in my opinion they are too=20
>> extensive and do not fit well with the existing web interface.=20
>> (jquery.i18n, Polyglot, ...)
>> For example, some libraries I found prefer to load the texts from a=20
>> JSON file. This would result in additional language files parallel to=20
>> the existing system.
>> Besides, dynamically changing translations based on user agent=20
>> settings may break the form field mapping: if ($cgiparams{'ACTION'}=20
>> eq $Lang::tr{'save'} )...
>> If we didn't have to pay attention to many specifics of the old CGIs,=20
>> I would also prefer an existing library.
>>
>> Best,
>> Leo
>>> -Michael
>>>
>>>> Still on my to-do/wish list:
>>>> - run make.sh lang
>>>> - convert pakfire.js to a module
>>>> - convert/rewrite refreshInetInfo.js, maybe add load displays to=20
>>>> all interfaces in index.cgi
>>>>
>>>> I hope this is in a presentable state to see where it is headed.
>>>> Let me know what you think and as always thanks for=20
>>>> reading/testing/reviewing :)
>>>>
>>>> Best,
>>>> Leo
>>>>
>>>>
>>>> config/etc/mime.types=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0 |=C2=A0=C2=A0 1 +
>>>> html/html/include/wui.js=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 |=C2=
=A0 47 ++++++
>>>> html/html/include/wui_core.mjs=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 | 154 +++++++++++++++++++
>>>> html/html/include/wui_rrdimage.mjs=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0 |=C2=A0 30 ++++
>>>> html/html/themes/ipfire/include/functions.pl |=C2=A0=C2=A0 3 +-
>>>> 5 files changed, 234 insertions(+), 1 deletion(-)
>>>> create mode 100644 html/html/include/wui.js
>>>> create mode 100644 html/html/include/wui_core.mjs
>>>> create mode 100644 html/html/include/wui_rrdimage.mjs
>>>>
>>>> diff --git a/config/etc/mime.types b/config/etc/mime.types
>>>> index af82d4886..bb3816db9 100644
>>>> --- a/config/etc/mime.types
>>>> +++ b/config/etc/mime.types
>>>> @@ -252,6 +252,7 @@ multipart/voice-message
>>>> text/css css
>>>> text/directory
>>>> text/enriched
>>>> +text/javascript mjs
>>>> text/plain asc txt
>>>> text/prs.lines.tag
>>>> text/rfc822-headers
>>>> diff --git a/html/html/include/wui.js b/html/html/include/wui.js
>>>> new file mode 100644
>>>> index 000000000..e65924e29
>>>> --- /dev/null
>>>> +++ b/html/html/include/wui.js
>>>> @@ -0,0 +1,47 @@
>>>> +/*#####################################################################=
########=20
>>>>
>>>> +# #
>>>> +# IPFire.org - A linux based=20
>>>> firewall=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# Copyright (C) 2007-2023=C2=A0 IPFire=20
>>>> Team<info(a)ipfire.org>=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0 #
>>>> +# #
>>>> +# This program is free software: you can redistribute it and/or=20
>>>> modify=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# it under the terms of the GNU General Public License as=20
>>>> published by=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# the Free Software Foundation, either version 3 of the License,=20
>>>> or=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# (at your option) any later=20
>>>> version.=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# #
>>>> +# This program is distributed in the hope that it will be=20
>>>> useful,=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0 #
>>>> +# but WITHOUT ANY WARRANTY; without even the implied warranty=20
>>>> of=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0 #
>>>> +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.=C2=A0 See=20
>>>> the=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0 #
>>>> +# GNU General Public License for more=20
>>>> details.=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# #
>>>> +# You should have received a copy of the GNU General Public=20
>>>> License=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# along with this program.=C2=A0 If not,=20
>>>> see<http://www.gnu.org/licenses/>.=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# #
>>>> +#######################################################################=
######*/=20
>>>>
>>>> +
>>>> +// IPFire Web User Interface
>>>> +// Collection of JavaScript functions and modules (requires jQuery)
>>>> +
>>>> +import {WUIcore_i18n as WUI_i18n} from "./wui_core.mjs";
>>>> +
>>>> +import {WUImodule_rrdimage as WUI_rrdimage} from=20
>>>> "./wui_rrdimage.mjs";
>>>> +
>>>> +//--- WUI main class ---
>>>> +class WUImain {
>>>> + constructor() {
>>>> + //- Public properties -
>>>> + // Translation strings
>>>> + this.i18n =3D new WUI_i18n();
>>>> +
>>>> + //- Modules -
>>>> + // RRDtool graph images
>>>> + this.rrdimage =3D new WUI_rrdimage(this.i18n);
>>>> +
>>>> + //- Defaults -
>>>> + // These modules are available on every page:
>>>> + this.rrdimage.enabled =3D true;
>>>> + }
>>>> +}
>>>> +
>>>> +//### Initialize WUI ###
>>>> +const wui =3D new WUImain();
>>>> +export default wui;
>>>> diff --git a/html/html/include/wui_core.mjs=20
>>>> b/html/html/include/wui_core.mjs
>>>> new file mode 100644
>>>> index 000000000..b7b729396
>>>> --- /dev/null
>>>> +++ b/html/html/include/wui_core.mjs
>>>> @@ -0,0 +1,154 @@
>>>> +/*#####################################################################=
########=20
>>>>
>>>> +# #
>>>> +# IPFire.org - A linux based=20
>>>> firewall=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# Copyright (C) 2007-2023=C2=A0 IPFire=20
>>>> Team<info(a)ipfire.org>=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0 #
>>>> +# #
>>>> +# This program is free software: you can redistribute it and/or=20
>>>> modify=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# it under the terms of the GNU General Public License as=20
>>>> published by=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# the Free Software Foundation, either version 3 of the License,=20
>>>> or=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# (at your option) any later=20
>>>> version.=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# #
>>>> +# This program is distributed in the hope that it will be=20
>>>> useful,=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0 #
>>>> +# but WITHOUT ANY WARRANTY; without even the implied warranty=20
>>>> of=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0 #
>>>> +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.=C2=A0 See=20
>>>> the=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0 #
>>>> +# GNU General Public License for more=20
>>>> details.=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# #
>>>> +# You should have received a copy of the GNU General Public=20
>>>> License=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# along with this program.=C2=A0 If not, see<http://www.=20
>>>> gnu.org/licenses/>.=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# #
>>>> +#######################################################################=
######*/=20
>>>>
>>>> +
>>>> +// IPFire Web User Interface - JavaScript module
>>>> +// Core functions & module helpers
>>>> +
>>>> +//--- Module template ---
>>>> +// Make sure that overridden functions are still executed with=20
>>>> super()!
>>>> +export class WUIcore_moduleBase {
>>>> + //- Private properties -
>>>> + #enabled; // Activation state, disabled by default
>>>> + #readyState; // Loading state similar to Document.readyState
>>>> + #namespace; // Namespace derived from the class name (without=20
>>>> "WUImod_" prefix)
>>>> +
>>>> + //- Class constructor -
>>>> + constructor(translations) {
>>>> + this.i18n =3D translations;
>>>> +
>>>> + this.#enabled =3D false;
>>>> +
>>>> + this.#readyState =3D "loading";
>>>> + this.#namespace =3D this.constructor.name.slice(10);
>>>> + }
>>>> +
>>>> + // Module activation state
>>>> + // Note: Because a module likely changes the DOM, it is not=20
>>>> intended that it can
>>>> + // be cleanly disabled again. Disabling it anyway will trigger=20
>>>> "_handleModuleDestroy".
>>>> + set enabled(state) {
>>>> + if(this.#enabled !=3D=3D state) {
>>>> + this.#enabled =3D state;
>>>> +
>>>> + if(state) {
>>>> + this._handleModuleEnable();
>>>> + } else {
>>>> + this._handleModuleDestroy();
>>>> + }
>>>> + }
>>>> + }
>>>> + get enabled() {
>>>> + return this.#enabled;
>>>> + }
>>>> +
>>>> + // Module loading state
>>>> + // loading: Instance created
>>>> + // interactive: Module enabled, document not ready
>>>> + // complete: DOMContentLoaded/jQuery.ready event fired
>>>> + // destroyed: Module disabled, event handlers removed
>>>> + get readyState() {
>>>> + return this.#readyState;
>>>> + }
>>>> +
>>>> + // Module namespace
>>>> + get namespace() {
>>>> + return this.#namespace;
>>>> + }
>>>> +
>>>> + //### Protected properties ###
>>>> +
>>>> + // Module activation state event handlers
>>>> + _handleModuleEnable() {
>>>> + if(this.#readyState =3D=3D=3D "loading") {
>>>> + this.#readyState =3D "interactive";
>>>> +
>>>> + // Attach jQuery.ready event
>>>> + $(this._handleDOMReady.bind(this));
>>>> + }
>>>> + }
>>>> + _handleModuleDestroy() {
>>>> + this.#readyState =3D "destroyed";
>>>> +
>>>> + // Attempt to remove all event handlers of this module
>>>> + $("body").off(`.${this.namespace}`);
>>>> + }
>>>> +
>>>> + // DOMContentLoaded/jQuery.ready event handler
>>>> + // The module must be enabled for this event to be triggered once
>>>> + _handleDOMReady() {
>>>> + this.#readyState =3D "complete";
>>>> + }
>>>> +
>>>> + // Translations quick access in module namespace
>>>> + _i18n(key) {
>>>> + return this.i18n.get(key, this.namespace);
>>>> + }
>>>> +}
>>>> +
>>>> +//--- Simple translation strings helper ---
>>>> +export class WUIcore_i18n {
>>>> + //- Private properties -
>>>> + #strings;
>>>> +
>>>> + //- Class constructor -
>>>> + constructor() {
>>>> + this.#strings =3D Object.create(null); //Object without prototypes
>>>> + }
>>>> +
>>>> + // Default module prefix for general translations
>>>> + get #mainModule() {
>>>> + return "wui";
>>>> + }
>>>> +
>>>> + // Get translation
>>>> + get(key, module =3D this.#mainModule) {
>>>> + const index =3D `${module}%${key}`;
>>>> +
>>>> + if(Object.hasOwn(this.#strings, index)) {
>>>> + return this.#strings[index];
>>>> + }
>>>> + return `(missing string '${key}' in '${module}')`;
>>>> + }
>>>> +
>>>> + // Add translation
>>>> + add(key, value, module =3D this.#mainModule) {
>>>> + if(typeof value =3D=3D=3D "string" || typeof value =3D=3D=3D "number")=
 {
>>>> + this.#strings[`${module}%${key}`] =3D value;
>>>> + }
>>>> + }
>>>> +
>>>> + // Load key/translation JS object
>>>> + // Format: {"key": "translation"}
>>>> + load(translations, module =3D this.#mainModule) {
>>>> + if(translations instanceof Object) {
>>>> + Object.entries(translations).forEach(([key, value]) =3D> {
>>>> + this.add(key, value, module);
>>>> + });
>>>> + }
>>>> + }
>>>> +}
>>>> +
>>>> +//--- Static utility functions ---
>>>> +export class WUIcore_utilities {
>>>> + // Reload document (clears POST/GET data from history)
>>>> + static reloadDocument() {
>>>> + const url =3D window.location.origin + window.location.pathname;
>>>> + window.location.replace(url);
>>>> + }
>>>> +}
>>>> diff --git a/html/html/include/wui_rrdimage.mjs=20
>>>> b/html/html/include/wui_rrdimage.mjs
>>>> new file mode 100644
>>>> index 000000000..5254b1e98
>>>> --- /dev/null
>>>> +++ b/html/html/include/wui_rrdimage.mjs
>>>> @@ -0,0 +1,30 @@
>>>> +/*#####################################################################=
########=20
>>>>
>>>> +# #
>>>> +# IPFire.org - A linux based=20
>>>> firewall=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# Copyright (C) 2007-2023=C2=A0 IPFire=20
>>>> Team<info(a)ipfire.org>=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0 #
>>>> +# #
>>>> +# This program is free software: you can redistribute it and/or=20
>>>> modify=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# it under the terms of the GNU General Public License as=20
>>>> published by=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# the Free Software Foundation, either version 3 of the License,=20
>>>> or=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# (at your option) any later=20
>>>> version.=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# #
>>>> +# This program is distributed in the hope that it will be=20
>>>> useful,=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0 #
>>>> +# but WITHOUT ANY WARRANTY; without even the implied warranty=20
>>>> of=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0 #
>>>> +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.=C2=A0 See=20
>>>> the=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0 #
>>>> +# GNU General Public License for more=20
>>>> details.=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=
=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# #
>>>> +# You should have received a copy of the GNU General Public=20
>>>> License=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# along with this program.=C2=A0 If not,=20
>>>> see<http://www.gnu.org/licenses/>.=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 #
>>>> +# #
>>>> +#######################################################################=
######*/=20
>>>>
>>>> +
>>>> +// IPFire Web User Interface - JavaScript module
>>>> +
>>>> +import {WUIcore_moduleBase as WUI_module} from "./wui_core.mjs";
>>>> +
>>>> +//--- RRDtool graph images ---
>>>> +export class WUImodule_rrdimage extends WUI_module {
>>>> + constructor(translations) {
>>>> + super(translations);
>>>> + }
>>>> +}
>>>> diff --git a/html/html/themes/ipfire/include/functions.pl=20
>>>> b/html/html/themes/ipfire/include/functions.pl
>>>> index cbd05d109..445597e51 100644
>>>> --- a/html/html/themes/ipfire/include/functions.pl
>>>> +++ b/html/html/themes/ipfire/include/functions.pl
>>>> @@ -113,7 +113,8 @@ print <<END;
>>>> <title>$headline - $title</title>
>>>> <meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3DUTF-8"=
/>
>>>> <link rel=3D"shortcut icon" href=3D"/favicon.ico" />
>>>> - <script type=3D"text/javascript" src=3D"/include/jquery.js"></script>
>>>> + <script src=3D"/include/jquery.js"></script>
>>>> + <script src=3D"/include/wui.js" type=3D"module"></script>
>>>> <script src=3D"/include/rrdimage.js"></script>
>>>>
>>>> $extrahead
>>>> --=20
>>>> 2.37.1.windows.1
>>>>
>

--===============6215340951967490503==--