diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..48ba845e
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+/build
+/dev-dist
diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index f1ccc5c9..00000000
--- a/.eslintrc
+++ /dev/null
@@ -1,14 +0,0 @@
----
-"extends":
- - "eslint-config-airbnb-es5"
-
-rules:
- "no-undef": 0
- "no-console": ["warn", { allow: ["warn", "error"] }]
- "no-param-reassign": 0
- "func-names": 0
- "guard-for-in": 0
- "no-undefined": 0
- "consistent-return": 0
- "no-nested-ternary": 0
- "no-extend-native": ["error", { "exceptions": ["String"] }]
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 00000000..a2a14bbc
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,17 @@
+{
+ "root": true,
+ "parserOptions": {
+ "sourceType": "module"
+ },
+ "env": {
+ "browser": true,
+ "es2020": true,
+ "node": true
+ },
+ "extends": ["eslint:recommended", "prettier"],
+ "rules": {
+ "no-undef": "off",
+ "no-prototype-builtins": "off",
+ "no-useless-escape": "off"
+ }
+}
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 3d8f7d77..3cae9f63 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,7 +1,6 @@
---
name: Bug report
about: Create a report to help us improve the software
-
---
@@ -9,34 +8,43 @@ about: Create a report to help us improve the software
## Expected Behavior
+
## Current Behavior
+
## Possible Solution
+
## Steps to Reproduce
+
+
1.
2.
3.
4.
## Context
+
## Your Environment
+
-* Version used: ``
-* Browser Name and version: ``
-* Operating System and version (desktop or mobile): ``
-* Link to your project: ``
+
+- Version used: ``
+- Browser Name and version: ``
+- Operating System and version (desktop or mobile): ``
+- Link to your project: ``
## Screenshots
+
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index dc15e673..4e0ac57d 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,7 +1,6 @@
---
name: Feature request
about: Suggest an idea for this project
-
---
@@ -9,13 +8,17 @@ about: Suggest an idea for this project
## Is your feature request related to a problem? Please describe.
+
## Describe the solution you'd like
+
## Describe alternatives you've considered
+
## Additional context
+
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index aec7220a..48ddbeae 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -2,22 +2,28 @@
## Description
+
## Motivation and Context
+
## How Has This Been Tested?
+
## Screenshots/links:
+
## Checklist:
+
+
- [ ] My code follows the code style of this project. (CI will test it anyway and also needs approval)
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
diff --git a/.github/workflows/build-meshviewer.yml b/.github/workflows/build-meshviewer.yml
index d781394e..ae227e1b 100644
--- a/.github/workflows/build-meshviewer.yml
+++ b/.github/workflows/build-meshviewer.yml
@@ -12,11 +12,12 @@ jobs:
matrix:
node-version: [20.x]
steps:
- - uses: actions/checkout@v4
- - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v3
- with:
- node-version: ${{ matrix.node-version }}
- - run: npm install
- - run: npm audit
- - run: npm run gulp-ci
+ - uses: actions/checkout@v4
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v3
+ with:
+ node-version: ${{ matrix.node-version }}
+ - run: npm install
+ - run: npm audit
+ - run: npm run lint
+ - run: npm run build
diff --git a/.github/workflows/release-meshviewer.yml b/.github/workflows/release-meshviewer.yml
index 1bcc95bd..82665259 100644
--- a/.github/workflows/release-meshviewer.yml
+++ b/.github/workflows/release-meshviewer.yml
@@ -3,7 +3,7 @@ on:
push:
# Sequence of patterns matched against refs/tags
tags:
- - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
+ - "v*" # Push events to matching v*, i.e. v1.0, v20.15.10
jobs:
meshviewer-release:
runs-on: ubuntu-latest
@@ -11,31 +11,31 @@ jobs:
matrix:
node-version: [20.x]
steps:
- - uses: actions/checkout@v4
- - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v3
- with:
- node-version: ${{ matrix.node-version }}
- - run: npm install
- - run: npm run gulp
- - run: "cd build; zip -r ../meshviewer-build.zip .; cd .."
- - name: Create Release
- id: create_release
- uses: actions/create-release@v1
- env:
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- with:
- tag_name: ${{ github.ref }}
- release_name: Release ${{ github.ref }}
- draft: true
- prerelease: false
- - name: Upload Release Asset
- id: upload-release-asset
- uses: actions/upload-release-asset@v1
- env:
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- with:
- upload_url: ${{ steps.create_release.outputs.upload_url }}
- asset_path: ./meshviewer-build.zip
- asset_name: meshviewer-build.zip
- asset_content_type: application/zip
+ - uses: actions/checkout@v4
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v3
+ with:
+ node-version: ${{ matrix.node-version }}
+ - run: npm install
+ - run: npm run build
+ - run: "cd build; zip -r ../meshviewer-build.zip .; cd .."
+ - name: Create Release
+ id: create_release
+ uses: actions/create-release@v1
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ with:
+ tag_name: ${{ github.ref }}
+ release_name: Release ${{ github.ref }}
+ draft: true
+ prerelease: false
+ - name: Upload Release Asset
+ id: upload-release-asset
+ uses: actions/upload-release-asset@v1
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ with:
+ upload_url: ${{ steps.create_release.outputs.upload_url }}
+ asset_path: ./meshviewer-build.zip
+ asset_name: meshviewer-build.zip
+ asset_content_type: application/zip
diff --git a/.gitignore b/.gitignore
index c352fbc0..7eaa3a2d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,10 +10,12 @@
Thumbs.db
# IDE files
-/.idea/
+/.idea
# Project files
-node_modules/
-build/
-config.js
+/node_modules
+/build
+/config.js
*.zip
+/dev-dist
+/public/config.json
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..48ba845e
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+/build
+/dev-dist
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 00000000..963354f2
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+ "printWidth": 120
+}
diff --git a/.stylelintrc b/.stylelintrc
index 04d8082c..28808d94 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,9 +1,12 @@
{
"extends": "stylelint-config-standard",
"rules": {
- "at-rule-no-unknown": [true, {
- "ignoreAtRules": ["function", "if", "each", "include", "mixin"]
- }],
+ "at-rule-no-unknown": [
+ true,
+ {
+ "ignoreAtRules": ["function", "if", "each", "include", "mixin"]
+ }
+ ],
"number-leading-zero": "never",
"no-descending-specificity": null
}
diff --git a/LICENSE.md b/LICENSE.md
index 88f1b847..086381c9 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -204,23 +204,23 @@ produce it from the Program, in the form of source code under the
terms of section 4, provided that you also meet all of these
conditions:
-- a) The work must carry prominent notices stating that you modified
- it, and giving a relevant date.
-- b) The work must carry prominent notices stating that it is
- released under this License and any conditions added under
- section 7. This requirement modifies the requirement in section 4
- to "keep intact all notices".
-- c) You must license the entire work, as a whole, under this
- License to anyone who comes into possession of a copy. This
- License will therefore apply, along with any applicable section 7
- additional terms, to the whole of the work, and all its parts,
- regardless of how they are packaged. This License gives no
- permission to license the work in any other way, but it does not
- invalidate such permission if you have separately received it.
-- d) If the work has interactive user interfaces, each must display
- Appropriate Legal Notices; however, if the Program has interactive
- interfaces that do not display Appropriate Legal Notices, your
- work need not make them do so.
+- a) The work must carry prominent notices stating that you modified
+ it, and giving a relevant date.
+- b) The work must carry prominent notices stating that it is
+ released under this License and any conditions added under
+ section 7. This requirement modifies the requirement in section 4
+ to "keep intact all notices".
+- c) You must license the entire work, as a whole, under this
+ License to anyone who comes into possession of a copy. This
+ License will therefore apply, along with any applicable section 7
+ additional terms, to the whole of the work, and all its parts,
+ regardless of how they are packaged. This License gives no
+ permission to license the work in any other way, but it does not
+ invalidate such permission if you have separately received it.
+- d) If the work has interactive user interfaces, each must display
+ Appropriate Legal Notices; however, if the Program has interactive
+ interfaces that do not display Appropriate Legal Notices, your
+ work need not make them do so.
A compilation of a covered work with other separate and independent
works, which are not by their nature extensions of the covered work,
@@ -239,42 +239,42 @@ sections 4 and 5, provided that you also convey the machine-readable
Corresponding Source under the terms of this License, in one of these
ways:
-- a) Convey the object code in, or embodied in, a physical product
- (including a physical distribution medium), accompanied by the
- Corresponding Source fixed on a durable physical medium
- customarily used for software interchange.
-- b) Convey the object code in, or embodied in, a physical product
- (including a physical distribution medium), accompanied by a
- written offer, valid for at least three years and valid for as
- long as you offer spare parts or customer support for that product
- model, to give anyone who possesses the object code either (1) a
- copy of the Corresponding Source for all the software in the
- product that is covered by this License, on a durable physical
- medium customarily used for software interchange, for a price no
- more than your reasonable cost of physically performing this
- conveying of source, or (2) access to copy the Corresponding
- Source from a network server at no charge.
-- c) Convey individual copies of the object code with a copy of the
- written offer to provide the Corresponding Source. This
- alternative is allowed only occasionally and noncommercially, and
- only if you received the object code with such an offer, in accord
- with subsection 6b.
-- d) Convey the object code by offering access from a designated
- place (gratis or for a charge), and offer equivalent access to the
- Corresponding Source in the same way through the same place at no
- further charge. You need not require recipients to copy the
- Corresponding Source along with the object code. If the place to
- copy the object code is a network server, the Corresponding Source
- may be on a different server (operated by you or a third party)
- that supports equivalent copying facilities, provided you maintain
- clear directions next to the object code saying where to find the
- Corresponding Source. Regardless of what server hosts the
- Corresponding Source, you remain obligated to ensure that it is
- available for as long as needed to satisfy these requirements.
-- e) Convey the object code using peer-to-peer transmission,
- provided you inform other peers where the object code and
- Corresponding Source of the work are being offered to the general
- public at no charge under subsection 6d.
+- a) Convey the object code in, or embodied in, a physical product
+ (including a physical distribution medium), accompanied by the
+ Corresponding Source fixed on a durable physical medium
+ customarily used for software interchange.
+- b) Convey the object code in, or embodied in, a physical product
+ (including a physical distribution medium), accompanied by a
+ written offer, valid for at least three years and valid for as
+ long as you offer spare parts or customer support for that product
+ model, to give anyone who possesses the object code either (1) a
+ copy of the Corresponding Source for all the software in the
+ product that is covered by this License, on a durable physical
+ medium customarily used for software interchange, for a price no
+ more than your reasonable cost of physically performing this
+ conveying of source, or (2) access to copy the Corresponding
+ Source from a network server at no charge.
+- c) Convey individual copies of the object code with a copy of the
+ written offer to provide the Corresponding Source. This
+ alternative is allowed only occasionally and noncommercially, and
+ only if you received the object code with such an offer, in accord
+ with subsection 6b.
+- d) Convey the object code by offering access from a designated
+ place (gratis or for a charge), and offer equivalent access to the
+ Corresponding Source in the same way through the same place at no
+ further charge. You need not require recipients to copy the
+ Corresponding Source along with the object code. If the place to
+ copy the object code is a network server, the Corresponding Source
+ may be on a different server (operated by you or a third party)
+ that supports equivalent copying facilities, provided you maintain
+ clear directions next to the object code saying where to find the
+ Corresponding Source. Regardless of what server hosts the
+ Corresponding Source, you remain obligated to ensure that it is
+ available for as long as needed to satisfy these requirements.
+- e) Convey the object code using peer-to-peer transmission,
+ provided you inform other peers where the object code and
+ Corresponding Source of the work are being offered to the general
+ public at no charge under subsection 6d.
A separable portion of the object code, whose source code is excluded
from the Corresponding Source as a System Library, need not be
@@ -350,23 +350,23 @@ Notwithstanding any other provision of this License, for material you
add to a covered work, you may (if authorized by the copyright holders
of that material) supplement the terms of this License with terms:
-- a) Disclaiming warranty or limiting liability differently from the
- terms of sections 15 and 16 of this License; or
-- b) Requiring preservation of specified reasonable legal notices or
- author attributions in that material or in the Appropriate Legal
- Notices displayed by works containing it; or
-- c) Prohibiting misrepresentation of the origin of that material,
- or requiring that modified versions of such material be marked in
- reasonable ways as different from the original version; or
-- d) Limiting the use for publicity purposes of names of licensors
- or authors of the material; or
-- e) Declining to grant rights under trademark law for use of some
- trade names, trademarks, or service marks; or
-- f) Requiring indemnification of licensors and authors of that
- material by anyone who conveys the material (or modified versions
- of it) with contractual assumptions of liability to the recipient,
- for any liability that these contractual assumptions directly
- impose on those licensors and authors.
+- a) Disclaiming warranty or limiting liability differently from the
+ terms of sections 15 and 16 of this License; or
+- b) Requiring preservation of specified reasonable legal notices or
+ author attributions in that material or in the Appropriate Legal
+ Notices displayed by works containing it; or
+- c) Prohibiting misrepresentation of the origin of that material,
+ or requiring that modified versions of such material be marked in
+ reasonable ways as different from the original version; or
+- d) Limiting the use for publicity purposes of names of licensors
+ or authors of the material; or
+- e) Declining to grant rights under trademark law for use of some
+ trade names, trademarks, or service marks; or
+- f) Requiring indemnification of licensors and authors of that
+ material by anyone who conveys the material (or modified versions
+ of it) with contractual assumptions of liability to the recipient,
+ for any liability that these contractual assumptions directly
+ impose on those licensors and authors.
All other non-permissive additional terms are considered "further
restrictions" within the meaning of section 10. If the Program as you
@@ -657,4 +657,4 @@ the specific requirements.
You should also get your employer (if you work as a programmer) or
school, if any, to sign a "copyright disclaimer" for the program, if
necessary. For more information on this, and how to apply and follow
-the GNU AGPL, see
-
-
- #dc0067
-
-
-
diff --git a/assets/favicon/favicon-16x16.png b/assets/favicon/favicon-16x16.png
deleted file mode 100644
index 42ff0beb..00000000
Binary files a/assets/favicon/favicon-16x16.png and /dev/null differ
diff --git a/assets/favicon/favicon-32x32.png b/assets/favicon/favicon-32x32.png
deleted file mode 100644
index 7c478b7b..00000000
Binary files a/assets/favicon/favicon-32x32.png and /dev/null differ
diff --git a/assets/favicon/favicon.ico b/assets/favicon/favicon.ico
deleted file mode 100644
index fc79f4e7..00000000
Binary files a/assets/favicon/favicon.ico and /dev/null differ
diff --git a/assets/favicon/mstile-144x144.png b/assets/favicon/mstile-144x144.png
deleted file mode 100644
index 8131e67d..00000000
Binary files a/assets/favicon/mstile-144x144.png and /dev/null differ
diff --git a/assets/favicon/mstile-150x150.png b/assets/favicon/mstile-150x150.png
deleted file mode 100644
index c24fcfc6..00000000
Binary files a/assets/favicon/mstile-150x150.png and /dev/null differ
diff --git a/assets/favicon/mstile-310x150.png b/assets/favicon/mstile-310x150.png
deleted file mode 100644
index 0e044dca..00000000
Binary files a/assets/favicon/mstile-310x150.png and /dev/null differ
diff --git a/assets/favicon/mstile-310x310.png b/assets/favicon/mstile-310x310.png
deleted file mode 100644
index 1b00e9ad..00000000
Binary files a/assets/favicon/mstile-310x310.png and /dev/null differ
diff --git a/assets/favicon/mstile-70x70.png b/assets/favicon/mstile-70x70.png
deleted file mode 100644
index 5fa172ed..00000000
Binary files a/assets/favicon/mstile-70x70.png and /dev/null differ
diff --git a/assets/favicon/safari-pinned-tab.svg b/assets/favicon/safari-pinned-tab.svg
deleted file mode 100644
index 93d40d0f..00000000
--- a/assets/favicon/safari-pinned-tab.svg
+++ /dev/null
@@ -1 +0,0 @@
-Report Bug | Map data © OpenStreetMap contributor"
- }
+ "dataPath": ["https://yanic.batman15.ffffm.net/"],
+ "siteName": "Freifunk Frankfurt",
+ "maxAge": 21,
+ "nodeZoom": 19,
+ "mapLayers": [
+ {
+ "name": "OpenStreetMap",
+ "url": "https://tiles.ffm.freifunk.net/{z}/{x}/{y}.png",
+ "config": {
+ "type": "osm",
+ "maxZoom": 19,
+ "attribution": "Report Bug | Map data © OpenStreetMap contributor"
}
- ],
- "fixedCenter": [
- [
- 50.5099,
- 8.1393
- ],
- [
- 49.9282,
- 9.3164
- ]
- ],
- "siteNames": [
- { "site": "ffffm_60431", "name": "60431 Frankfurt am Main" } ,
- { "site": "ffffm_default", "name": "Default" }
- ],
- "domainNames": [
- { "site": "ffffm_60431", "name": "60431 Frankfurt am Main" } ,
- { "site": "ffffm_default", "name": "Default" }
- ],
- "nodeInfos": [
- {
- "name": "Clientstatistik",
- "href": "https://freifunk.fail/dashboard/db/nodes?var-name={NODE_CUSTOM}&from=now-7d&to=now",
- "image": "https://freifunk.fail/render/dashboard-solo/db/node-details-for-map?panelId=7&var-id={NODE_ID}&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
- "title": "Knoten {NODE_ID} ({NODE_NAME})"
- },
- {
- "name": "Traffic",
- "href": "https://freifunk.fail/dashboard/db/nodes?var-name={NODE_CUSTOM}&from=now-7d&to=now",
- "image": "https://freifunk.fail/render/dashboard-solo/db/node-details-for-map?panelId=1&var-id={NODE_ID}&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
- "title": "Knoten {NODE_ID} ({NODE_NAME})"
- },
- {
- "name": "Uptime",
- "href": "https://freifunk.fail/dashboard/db/nodes?var-name={NODE_CUSTOM}&from=now-7d&to=now",
- "image": "https://freifunk.fail/render/dashboard-solo/db/node-details-for-map?panelId=5&var-id={NODE_ID}&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
- "title": "Knoten {NODE_ID} ({NODE_NAME})"
- },
- {
- "name": "CPU Auslastung",
- "href": "https://freifunk.fail/dashboard/db/nodes?var-name={NODE_CUSTOM}&from=now-7d&to=now",
- "image": "https://freifunk.fail/render/dashboard-solo/db/node-details-for-map?panelId=2&var-id={NODE_ID}&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
- "title": "Knoten {NODE_ID} ({NODE_NAME})"
- },
- {
- "name": "Neighbours",
- "href": "https://freifunk.fail/dashboard/db/nodes?var-name={NODE_CUSTOM}&from=now-7d&to=now",
- "image": "https://freifunk.fail/render/dashboard-solo/db/node-details-for-map?panelId=4&var-id={NODE_ID}&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
- "title": "Knoten {NODE_ID} ({NODE_NAME})"
- }
- ],
- "globalInfos": [
- {
- "name": "Wochenstatistik",
- "href": "https://freifunk.fail/dashboard/db/deck?from=now-7d&to=now",
- "image": "https://freifunk.fail/render/dashboard-solo/db/deck?&panelId=22&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
- "title": "Bild der Wochenstatistik"
- }
- ],
- "hwImg": "https://map.aachen.freifunk.net/router-images/{MODEL_NORMALIZED}.svg",
- "node_custom": "/[^a-z0-9\\-\\.]/ig",
- "deprecation_text": "Hier kann ein eigener Text für die Deprecation Warning (inkl. HTML) stehen!",
- "deprecation_enabled": true
- }
+ }
+ ],
+ "fixedCenter": [
+ [50.5099, 8.1393],
+ [49.9282, 9.3164]
+ ],
+ "siteNames": [
+ { "site": "ffffm_60431", "name": "60431 Frankfurt am Main" },
+ { "site": "ffffm_default", "name": "Default" }
+ ],
+ "domainNames": [
+ { "site": "ffffm_60431", "name": "60431 Frankfurt am Main" },
+ { "site": "ffffm_default", "name": "Default" }
+ ],
+ "nodeInfos": [
+ {
+ "name": "Clientstatistik",
+ "href": "https://freifunk.fail/dashboard/db/nodes?var-name={NODE_CUSTOM}&from=now-7d&to=now",
+ "image": "https://freifunk.fail/render/dashboard-solo/db/node-details-for-map?panelId=7&var-id={NODE_ID}&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
+ "title": "Knoten {NODE_ID} ({NODE_NAME})"
+ },
+ {
+ "name": "Traffic",
+ "href": "https://freifunk.fail/dashboard/db/nodes?var-name={NODE_CUSTOM}&from=now-7d&to=now",
+ "image": "https://freifunk.fail/render/dashboard-solo/db/node-details-for-map?panelId=1&var-id={NODE_ID}&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
+ "title": "Knoten {NODE_ID} ({NODE_NAME})"
+ },
+ {
+ "name": "Uptime",
+ "href": "https://freifunk.fail/dashboard/db/nodes?var-name={NODE_CUSTOM}&from=now-7d&to=now",
+ "image": "https://freifunk.fail/render/dashboard-solo/db/node-details-for-map?panelId=5&var-id={NODE_ID}&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
+ "title": "Knoten {NODE_ID} ({NODE_NAME})"
+ },
+ {
+ "name": "CPU Auslastung",
+ "href": "https://freifunk.fail/dashboard/db/nodes?var-name={NODE_CUSTOM}&from=now-7d&to=now",
+ "image": "https://freifunk.fail/render/dashboard-solo/db/node-details-for-map?panelId=2&var-id={NODE_ID}&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
+ "title": "Knoten {NODE_ID} ({NODE_NAME})"
+ },
+ {
+ "name": "Neighbours",
+ "href": "https://freifunk.fail/dashboard/db/nodes?var-name={NODE_CUSTOM}&from=now-7d&to=now",
+ "image": "https://freifunk.fail/render/dashboard-solo/db/node-details-for-map?panelId=4&var-id={NODE_ID}&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
+ "title": "Knoten {NODE_ID} ({NODE_NAME})"
+ }
+ ],
+ "globalInfos": [
+ {
+ "name": "Wochenstatistik",
+ "href": "https://freifunk.fail/dashboard/db/deck?from=now-7d&to=now",
+ "image": "https://freifunk.fail/render/dashboard-solo/db/deck?&panelId=22&from=now-7d&to=now&width=600&height=300&theme=light&_t={TIME}",
+ "title": "Bild der Wochenstatistik"
+ }
+ ],
+ "hwImg": "https://map.aachen.freifunk.net/router-images/{MODEL_NORMALIZED}.svg",
+ "node_custom": "/[^a-z0-9\\-\\.]/ig",
+ "deprecation_text": "Hier kann ein eigener Text für die Deprecation Warning (inkl. HTML) stehen!",
+ "deprecation_enabled": true
+}
diff --git a/gulp/config.js b/gulp/config.js
deleted file mode 100644
index 2ce83564..00000000
--- a/gulp/config.js
+++ /dev/null
@@ -1,47 +0,0 @@
-module.exports = function () {
- const build = 'build';
-
- return {
- build: build,
- faviconData: 'assets/faviconData.json',
- src: {
- sass: 'scss/**/*.scss',
- javascript: ['./app.js', 'lib/**/*.js'],
- json: 'locale/*.json',
- html: ['html/*.html', './config*.js']
- },
- clean: [build + '/*.map', build + '/vendor', build + '/main.css'],
- browsersync: {
- open: false,
- server: {
- baseDir: build
- },
- files: [
- build + '/*.css',
- build + '/*.js',
- build + '/*.html',
- build + '/locale/*.json'
- ]
- },
- requireJs: {
- prod: {
- baseUrl: 'lib',
- name: '../node_modules/almond/almond',
- mainConfigFile: 'app.js',
- include: '../app',
- out: 'app.js',
- build: true,
- preserveLicenseComments: true
- },
- dev: {
- baseUrl: 'lib',
- name: '../node_modules/almond/almond',
- mainConfigFile: 'app.js',
- include: '../app',
- optimize: 'none',
- out: 'app.js',
- build: false
- }
- }
- };
-};
diff --git a/gulp/serve.js b/gulp/serve.js
deleted file mode 100644
index 53bc464b..00000000
--- a/gulp/serve.js
+++ /dev/null
@@ -1,39 +0,0 @@
-module.exports = function (gulp, plugins, config, env) {
- const browserSync = require('browser-sync');
-
- function getTask(task) {
- return require('./tasks/' + task)(gulp, plugins, config, env);
- }
-
- gulp.task('ws', () =>
- browserSync(config.browsersync)
- );
-
- gulp.task('watch:html', () =>
- gulp.watch(config.src.html,
- gulp.parallel(getTask('html'))
- )
- );
-
- gulp.task('watch:javascript', () =>
- gulp.watch(config.src.javascript,
- gulp.parallel(getTask('eslint'), getTask('javascript'))
- )
- );
-
- gulp.task('watch:styles', () =>
- gulp.watch(config.src.sass,
- gulp.parallel(getTask('sasslint'), getTask('sass'))
- )
- );
-
- gulp.task('watch:json', () =>
- gulp.watch(config.src.json,
- gulp.parallel(getTask('jsonMinify'))
- )
- );
-
- gulp.task('watch',
- gulp.parallel('watch:html', 'watch:styles', 'watch:javascript', 'watch:json')
- );
-};
diff --git a/gulp/tasks/clean.js b/gulp/tasks/clean.js
deleted file mode 100644
index fff6e481..00000000
--- a/gulp/tasks/clean.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const del = require('del');
-module.exports = function (gulp, plugins, config) {
- return function clean() {
- return del(config.clean);
- };
-};
diff --git a/gulp/tasks/copy.js b/gulp/tasks/copy.js
deleted file mode 100644
index 5fe457fa..00000000
--- a/gulp/tasks/copy.js
+++ /dev/null
@@ -1,14 +0,0 @@
-module.exports = function (gulp, plugins, config) {
- return function copy() {
- gulp.src(['config.example.json'])
- .pipe(gulp.dest(config.build));
- gulp.src(['html/*.html', 'assets/favicon/*'])
- .pipe(gulp.dest(config.build));
- gulp.src(['assets/logo.svg', 'service-worker.js'])
- .pipe(gulp.dest(config.build));
- gulp.src(['polyfill.js'])
- .pipe(gulp.dest(config.build + '/vendor'));
- return gulp.src(['assets/fonts/*', 'assets/icons/fonts/*'])
- .pipe(gulp.dest(config.build + '/fonts'));
- };
-};
diff --git a/gulp/tasks/eslint-fail.js b/gulp/tasks/eslint-fail.js
deleted file mode 100644
index 7395f5d8..00000000
--- a/gulp/tasks/eslint-fail.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = function (gulp, plugins) {
- return function eslint() {
- return gulp.src(['app.js', 'gulpfile.js', 'lib/**/*.js', 'gulp/**/*.js'])
- .pipe(plugins.eslint())
- .pipe(plugins.eslint.format())
- .pipe(plugins.eslint.failAfterError());
- };
-};
diff --git a/gulp/tasks/eslint.js b/gulp/tasks/eslint.js
deleted file mode 100644
index c8154206..00000000
--- a/gulp/tasks/eslint.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = function (gulp, plugins, config, env) {
- return function eslint() {
- return gulp.src(['app.js', 'gulpfile.js', 'lib/**/*.js', 'gulp/**/*.js'])
- .pipe(plugins.eslint())
- .pipe(plugins.eslint.format())
- .pipe(env.production(plugins.eslint.failAfterError()));
- };
-};
diff --git a/gulp/tasks/favicon.js b/gulp/tasks/favicon.js
deleted file mode 100644
index 9f3036fe..00000000
--- a/gulp/tasks/favicon.js
+++ /dev/null
@@ -1,65 +0,0 @@
-module.exports = function (gulp, plugins, config) {
- return function javascript(cb) {
- plugins.realFavicon.generateFavicon({
- masterPicture: 'assets/logo.svg',
- dest: 'assets/favicon',
- iconsPath: '.',
- design: {
- ios: {
- pictureAspect: 'backgroundAndMargin',
- backgroundColor: '#ffffff',
- margin: '14%',
- assets: {
- ios6AndPriorIcons: false,
- ios7AndLaterIcons: false,
- precomposedIcons: false,
- declareOnlyDefaultIcon: true
- },
- appName: 'Meshviewer'
- },
- desktopBrowser: {},
- windows: {
- pictureAspect: 'whiteSilhouette',
- backgroundColor: '#dc0067',
- onConflict: 'override',
- assets: {
- windows80Ie10Tile: false,
- windows10Ie11EdgeTiles: {
- small: true,
- medium: true,
- big: true,
- rectangle: false
- }
- },
- appName: 'Meshviewer'
- },
- androidChrome: {
- // pictureAspect: 'shadow',
- themeColor: '#dc0067',
- manifest: {
- name: 'Meshviewer',
- display: 'standalone',
- orientation: 'portrait',
- onConflict: 'override',
- declared: true
- },
- assets: {
- legacyIcon: false,
- lowResolutionIcons: false
- }
- },
- safariPinnedTab: {
- pictureAspect: 'silhouette',
- themeColor: '#dc0067'
- }
- },
- settings: {
- compression: 2,
- scalingAlgorithm: 'Mitchell',
- errorOnImageTooSmall: false
- },
- markupFile: config.faviconData
- });
- return cb();
- };
-};
diff --git a/gulp/tasks/html.js b/gulp/tasks/html.js
deleted file mode 100644
index a4b42bd3..00000000
--- a/gulp/tasks/html.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const fs = require('fs');
-
-module.exports = function (gulp, plugins, config, env) {
- return function html() {
- return gulp.src(env.production() ? config.build + '/*.html' : 'html/*.html')
- .pipe(plugins.realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(config.faviconData)).favicon.html_code))
- .pipe(env.production(plugins.inlineSource({ compress: false })))
- .pipe(plugins.cacheBust({
- type: 'timestamp'
- }))
- .pipe(plugins.htmlmin({
- removeComments: true,
- collapseWhitespace: true,
- minifyJS: true
- }))
- .pipe(gulp.dest(config.build));
- };
-};
diff --git a/gulp/tasks/javascript.js b/gulp/tasks/javascript.js
deleted file mode 100644
index 88e7137a..00000000
--- a/gulp/tasks/javascript.js
+++ /dev/null
@@ -1,13 +0,0 @@
-module.exports = function (gulp, plugins, config, env) {
- return function javascript() {
- return gulp.src('app.js')
- .pipe(env.development(plugins.sourcemaps.init()))
- .pipe(plugins.requirejsOptimize(env.production() ? config.requireJs.prod : config.requireJs.dev))
- .on('error', function () {
- this.emit('end');
- })
- .pipe(env.production(plugins.uglify({ output: { comments: 'all' } })))
- .pipe(env.development(plugins.sourcemaps.write('.', { addComment: true })))
- .pipe(gulp.dest(config.build));
- };
-};
diff --git a/gulp/tasks/jsonMinify.js b/gulp/tasks/jsonMinify.js
deleted file mode 100644
index 412f7a84..00000000
--- a/gulp/tasks/jsonMinify.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = function (gulp, plugins, config) {
- return function jsonMinify() {
- return gulp.src(config.src.json)
- .pipe(plugins.jsonminify())
- .pipe(gulp.dest(config.build + '/locale'));
- };
-};
diff --git a/gulp/tasks/sass.js b/gulp/tasks/sass.js
deleted file mode 100644
index f78df896..00000000
--- a/gulp/tasks/sass.js
+++ /dev/null
@@ -1,18 +0,0 @@
-module.exports = function (gulp, plugins, config, env) {
- return function sass() {
- return gulp.src('scss/*.scss')
- .pipe(env.development(plugins.sourcemaps.init()))
- .pipe(require('gulp-sass')(require('sass'))({
- outputStyle: 'compressed',
- sourceMap: false
- }))
- .on('error', function () {
- this.emit('end');
- })
- .pipe(plugins.autoprefixer({
- browsers: config.autoprefixer
- }))
- .pipe(env.development(plugins.sourcemaps.write('.', { addComment: true })))
- .pipe(gulp.dest(config.build));
- };
-};
diff --git a/gulp/tasks/sasslint.js b/gulp/tasks/sasslint.js
deleted file mode 100644
index 488ddc3f..00000000
--- a/gulp/tasks/sasslint.js
+++ /dev/null
@@ -1,12 +0,0 @@
-module.exports = function (gulp, plugins, config, env) {
- return function sasslint() {
- return gulp.src('scss/**/*.scss')
- .pipe(plugins.stylelint({
- syntax: 'scss',
- failAfterError: env.production(),
- reporters: [
- { formatter: 'string', console: true }
- ]
- }));
- };
-};
diff --git a/gulp/tasks/setDevelopment.js b/gulp/tasks/setDevelopment.js
deleted file mode 100644
index f464b54f..00000000
--- a/gulp/tasks/setDevelopment.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = function (gulp, plugins, config, env) {
- return function setDevelopment(done) {
- plugins.environments.current(env.development);
- done();
- };
-};
diff --git a/gulpfile.js b/gulpfile.js
deleted file mode 100644
index d1494c55..00000000
--- a/gulpfile.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const gulp = require('gulp');
-const plugins = require('gulp-load-plugins')();
-const config = require('./gulp/config')();
-
-const env = {
- development: plugins.environments.development,
- production: plugins.environments.production
-};
-
-// Default environment is production
-plugins.environments.current(env.production);
-
-function getTask(task) {
- return require('./gulp/tasks/' + task)(gulp, plugins, config, env);
-}
-
-gulp.task('generate-favicon',
- getTask('favicon')
-);
-
-require('./gulp/serve')(gulp, plugins, config, env);
-gulp.task('serve',
- gulp.series(
- getTask('setDevelopment'),
- gulp.parallel(getTask('eslint'), getTask('sasslint')),
- gulp.parallel(getTask('copy'), getTask('javascript'), getTask('sass'), getTask('jsonMinify')),
- getTask('html'),
- gulp.parallel('watch', 'ws')
- )
-);
-
-gulp.task('ci',
- gulp.series(
- gulp.parallel(getTask('eslint-fail'), getTask('sasslint')),
- gulp.parallel(getTask('copy'), getTask('javascript'), getTask('sass'), getTask('jsonMinify')),
- getTask('html'),
- getTask('clean')
- )
-);
-
-gulp.task('default',
- gulp.series(
- gulp.parallel(getTask('eslint'), getTask('sasslint')),
- gulp.parallel(getTask('copy'), getTask('javascript'), getTask('sass'), getTask('jsonMinify')),
- getTask('html'),
- getTask('clean')
- )
-);
diff --git a/html/index.html b/html/index.html
deleted file mode 100644
index 953fa810..00000000
--- a/html/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-
- Meshviewer - loading...
-
-
-
-
-
-
-
-
-
- Lade
-
- JavaScript required
-
-
Meshviewer Loading
-
-
- You are Offline!Try to reload
-
- JavaScript required
-
-
Meshviewer - loading...
+
+
+
+ Lade
+
+ JavaScript required
+
+
' + _.t('node.nodes') + ' ' +
- '' +
- '
' +
- '' + _.t('node.clients') + ' ' +
- '' +
- '
' +
- 'Feel free to contribute! ' +
- 'Please support this meshviewer-fork by opening issues or sending pull requests!
' +
- '' +
- 'https://github.com/freifunk/meshviewer
' +
- 'Fork maintained by Freifunk Frankfurt
' +
- 'AGPL 3 ' +
-
- 'Copyright (C) Milan Pässler
' +
- 'Copyright (C) Nils Schneider
' +
-
- 'This program is free software: you can redistribute it and/or ' +
- 'modify it under the terms of the GNU Affero General Public ' +
- 'License as published by the Free Software Foundation, either ' +
- 'version 3 of the License, or (at your option) any later version.
' +
-
- 'This program is distributed in the hope that it will be useful, ' +
- 'but WITHOUT ANY WARRANTY; without even the implied warranty of ' +
- 'MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the ' +
- 'GNU Affero General Public License for more details.
' +
-
- 'You should have received a copy of the GNU Affero General ' +
- 'Public License along with this program. If not, see ' +
- '' +
- 'https://www.gnu.org/licenses/ .
' +
-
- 'The source code is available at ' +
- '' +
- 'https://github.com/freifunk/meshviewer .
';
- };
+export const About = function () {
+ this.render = function render(d) {
+ d.innerHTML =
+ _.t("sidebar.aboutInfo") +
+ "" +
+ _.t("node.nodes") +
+ " " +
+ '' +
+ '
" +
+ "" +
+ _.t("node.clients") +
+ " " +
+ '' +
+ '
" +
+ "Feel free to contribute! " +
+ "Please support this meshviewer-fork by opening issues or sending pull requests!
" +
+ '' +
+ "https://github.com/freifunk/meshviewer
" +
+ 'Fork maintained by Freifunk Frankfurt
' +
+ "AGPL 3 " +
+ "Copyright (C) Milan Pässler
" +
+ "Copyright (C) Nils Schneider
" +
+ "This program is free software: you can redistribute it and/or " +
+ "modify it under the terms of the GNU Affero General Public " +
+ "License as published by the Free Software Foundation, either " +
+ "version 3 of the License, or (at your option) any later version.
" +
+ "This program is distributed in the hope that it will be useful, " +
+ "but WITHOUT ANY WARRANTY; without even the implied warranty of " +
+ "MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the " +
+ "GNU Affero General Public License for more details.
" +
+ "You should have received a copy of the GNU Affero General " +
+ "Public License along with this program. If not, see " +
+ '' +
+ "https://www.gnu.org/licenses/ .
" +
+ "The source code is available at " +
+ '' +
+ "https://github.com/freifunk/meshviewer .
";
};
-});
+};
diff --git a/lib/config_default.js b/lib/config_default.js
index 5ea2ae78..cf8d1e8a 100644
--- a/lib/config_default.js
+++ b/lib/config_default.js
@@ -1,229 +1,282 @@
-define([], function () {
- return {
- 'reverseGeocodingApi': 'https://nominatim.openstreetmap.org/reverse',
- 'maxAge': 14,
- 'maxAgeAlert': 3,
- 'nodeZoom': 18,
- 'labelZoom': 13,
- 'clientZoom': 15,
- 'fullscreen': true,
- 'fullscreenFrame': true,
- 'nodeAttr': [
- // value can be a node attribute (1 depth) or a a function in utils/node with prefix show
- {
- 'name': 'node.status',
- 'value': 'Status'
- },
- {
- 'name': 'node.gateway',
- 'value': 'Gateway'
- },
- {
- 'name': 'node.coordinates',
- 'value': 'GeoURI'
- },
- // {
- // "name": "node.contact",
- // "value": "owner"
- // },
+export const config = {
+ reverseGeocodingApi: "https://nominatim.openstreetmap.org/reverse",
+ maxAge: 14,
+ maxAgeAlert: 3,
+ nodeZoom: 18,
+ labelZoom: 13,
+ clientZoom: 15,
+ fullscreen: true,
+ fullscreenFrame: true,
+ nodeAttr: [
+ // value can be a node attribute (1 depth) or a a function in utils/node with prefix show
+ {
+ name: "node.status",
+ value: "Status",
+ },
+ {
+ name: "node.gateway",
+ value: "Gateway",
+ },
+ {
+ name: "node.coordinates",
+ value: "GeoURI",
+ },
+ // {
+ // "name": "node.contact",
+ // "value": "owner"
+ // },
- // Examples for functions
- // {
- // // no name will remove first column
- // 'value': function (d) {
- // var moment = require('moment');
- // var V = require('snabbdom').default;
- // return V.h('td', { props: { colSpan: 2 }, style: { background: '#49a' } },
- // _.t('sidebar.nodeOnline') + ' translate, ' + moment(d.firstseen).get('month') +
- // ' Month require libs like moment, access config ' + config.siteName);
- // }
- // },
- // {
- // 'name': 'Neighbour first seen',
- // 'value': function (d, nodeDict) {
- // return nodeDict[d.gateway_nexthop].firstseen.format() + 'access node object';
- // }
- // },
- {
- 'name': 'node.hardware',
- 'value': 'model'
- },
- {
- 'name': 'node.primaryMac',
- 'value': 'mac'
- },
- {
- 'name': 'node.firmware',
- 'value': 'Firmware'
- },
- {
- 'name': 'node.uptime',
- 'value': 'Uptime'
- },
- {
- 'name': 'node.firstSeen',
- 'value': 'FirstSeen'
- },
- {
- 'name': 'node.systemLoad',
- 'value': 'Load'
- },
- {
- 'name': 'node.ram',
- 'value': 'RAM'
- },
- {
- 'name': 'node.ipAddresses',
- 'value': 'IPs'
- },
- {
- 'name': 'node.update',
- 'value': 'Autoupdate'
- },
- {
- 'name': 'node.domain',
- 'value': 'Domain'
- },
- {
- 'name': 'node.clients',
- 'value': 'Clients'
- }
- ],
- 'supportedLocale': [
- 'en',
- 'de',
- 'cz',
- 'fr',
- 'tr',
- 'ru'
- ],
- // Color configs
- 'icon': {
- 'base': {
- 'fillOpacity': 0.6,
- 'opacity': 0.6,
- 'weight': 2,
- 'radius': 6,
- 'className': 'stroke-first'
- },
- 'online': {
- 'color': '#1566A9',
- 'fillColor': '#1566A9',
- 'radius': 8,
- 'stroke': false
- },
- 'online.uplink': {
- 'fillColor': '#cde',
- 'stroke': true,
- 'radius': 4,
- 'weight': 10
- },
- 'offline': {
- 'color': '#D43E2A',
- 'fillColor': '#D43E2A',
- 'radius': 3
- },
- 'lost': {
- 'color': '#D43E2A',
- 'fillColor': '#D43E2A',
- 'radius': 4
- },
- 'alert': {
- 'color': '#D43E2A',
- 'fillColor': '#D43E2A',
- 'radius': 5
- },
- 'new': {
- 'color': '#1566A9',
- 'fillColor': '#93E929'
- },
- 'new.uplink': {
- 'stroke': true,
- 'radius': 4,
- 'weight': 10
- }
- },
- 'client': {
- 'wifi24': 'rgba(220, 0, 103, 0.7)',
- 'wifi5': 'rgba(10, 156, 146, 0.7)',
- 'other': 'rgba(227, 166, 25, 0.7)'
- },
- 'map': {
- 'labelNewColor': '#459c18',
- 'tqFrom': '#F02311',
- 'tqTo': '#04C714',
- 'highlightNode': {
- 'color': '#ad2358',
- 'weight': 8,
- 'fillOpacity': 1,
- 'opacity': 0.4,
- 'className': 'stroke-first'
- },
- 'highlightLink': {
- 'weight': 4,
- 'opacity': 1,
- 'dashArray': '5, 10'
- }
- },
- 'forceGraph': {
- 'nodeColor': '#fff',
- 'nodeOfflineColor': '#D43E2A',
- 'highlightColor': 'rgba(255, 255, 255, 0.2)',
- 'labelColor': '#fff',
- 'tqFrom': '#770038',
- 'tqTo': '#dc0067',
- 'zoomModifier': 1
- },
- 'locate': {
- 'outerCircle': {
- 'stroke': false,
- 'color': '#4285F4',
- 'opacity': 1,
- 'fillOpacity': 0.3,
- 'clickable': false,
- 'radius': 16
- },
- 'innerCircle': {
- 'stroke:': true,
- 'color': '#ffffff',
- 'fillColor': '#4285F4',
- 'weight': 1.5,
- 'clickable': false,
- 'opacity': 1,
- 'fillOpacity': 1,
- 'radius': 7
- },
- 'accuracyCircle': {
- 'stroke': true,
- 'color': '#4285F4',
- 'weight': 1,
- 'clickable': false,
- 'opacity': 0.7,
- 'fillOpacity': 0.2
- }
- },
- 'deprecated': ['TP-Link TL-WR740N/ND v1',
- 'AP121', 'AP121U', 'D-Link DIR-615', 'D-Link DIR-615 D',
- 'AVM FRITZ!Box 7320', 'AVM FRITZ!Box 7330', 'AVM FRITZ!Box 7330 SL',
- 'TP-Link TL-MR13U v1', 'TP-Link TL-MR3020 v1', 'TP-Link TL-MR3040 v1', 'TP-Link TL-MR3040 v2',
- 'TP-Link TL-MR3220 v1', 'TP-Link TL-MR3220 v2', 'TP-Link TL-MR3420 v1', 'TP-Link TL-MR3420 v2',
- 'TP-Link TL-WA701N/ND v1', 'TP-Link TL-WA701N/ND v2', 'TP-Link TL-WA730RE v1', 'TP-Link TL-WA750RE v1',
- 'TP-Link TL-WA801N/ND v1', 'TP-Link TL-WA801N/ND v2', 'TP-Link TL-WA801N/ND v3',
- 'TP-Link TL-WA830RE v1', 'TP-Link TL-WA830RE v2', 'TP-Link TL-WA850RE v1', 'TP-Link TL-WA860RE v1',
- 'TP-Link TL-WA901N/ND v1', 'TP-Link TL-WA901N/ND v2', 'TP-Link TL-WA901N/ND v3', 'TP-Link TL-WA901N/ND v4', 'TP-Link TL-WA901N/ND v5',
- 'TP-Link TL-WA7210N v2', 'TP-Link TL-WA7510N v1', 'TP-Link TL-WR703N v1', 'TP-Link TL-WR710N v2',
- 'TP-Link TL-WR740N/ND v1', 'TP-Link TL-WR740N/ND v3', 'TP-Link TL-WR740N/ND v4', 'TP-Link TL-WR740N/ND v5',
- 'TP-Link TL-WR741N/ND v1', 'TP-Link TL-WR741N/ND v3', 'TP-Link TL-WR741N/ND v4', 'TP-Link TL-WR741N/ND v5',
- 'TP-Link TL-WR743N/ND v1', 'TP-Link TL-WR743N/ND v2',
- 'TP-Link TL-WR840N v2',
- 'TP-Link TL-WR841N/ND v3', 'TP-Link TL-WR841N/ND v5', 'TP-Link TL-WR841N/ND v7', 'TP-Link TL-WR841N/ND v8', 'TP-Link TL-WR841N/ND v9', 'TP-Link TL-WR841N/ND v10', 'TP-Link TL-WR841N/ND v11', 'TP-Link TL-WR841N/ND v12',
- 'TP-Link TL-WR841N/ND Mod (16M) v11', 'TP-Link TL-WR841N/ND Mod (16M) v10', 'TP-Link TL-WR841N/ND Mod (16M) v8', 'TP-Link TL-WR841N/ND Mod (16M) v9', 'TP-Link TL-WR841N/ND Mod (8M) v10',
- 'TP-Link TL-WR842N/ND v1', 'TP-Link TL-WR842N/ND v2',
- 'TP-Link TL-WR843N/ND v1',
- 'TP-Link TL-WR940N v1', 'TP-Link TL-WR940N v2', 'TP-Link TL-WR940N v3', 'TP-Link TL-WR940N v4', 'TP-Link TL-WR940N v5', 'TP-Link TL-WR940N v6',
- 'TP-Link TL-WR941N/ND v2', 'TP-Link TL-WR941N/ND v3', 'TP-Link TL-WR941N/ND v4', 'TP-Link TL-WR941N/ND v5', 'TP-Link TL-WR941N/ND v6',
- 'TP-Link TL-WR1043N/ND v1',
- 'A5-V11', 'D-Link DIR-615 D1', 'D-Link DIR-615 D2', 'D-Link DIR-615 D3', 'D-Link DIR-615 D4', 'D-Link DIR-615 H1',
- 'VoCore 8M', 'VoCore 16M']
- };
-});
+ // Examples for functions
+ // {
+ // // no name will remove first column
+ // 'value': function (d) {
+ // var moment = require('moment');
+ // var V = require('snabbdom').default;
+ // return V.h('td', { props: { colSpan: 2 }, style: { background: '#49a' } },
+ // _.t('sidebar.nodeOnline') + ' translate, ' + moment(d.firstseen).get('month') +
+ // ' Month require libs like moment, access config ' + config.siteName);
+ // }
+ // },
+ // {
+ // 'name': 'Neighbour first seen',
+ // 'value': function (d, nodeDict) {
+ // return nodeDict[d.gateway_nexthop].firstseen.format() + 'access node object';
+ // }
+ // },
+ {
+ name: "node.hardware",
+ value: "model",
+ },
+ {
+ name: "node.primaryMac",
+ value: "mac",
+ },
+ {
+ name: "node.firmware",
+ value: "Firmware",
+ },
+ {
+ name: "node.uptime",
+ value: "Uptime",
+ },
+ {
+ name: "node.firstSeen",
+ value: "FirstSeen",
+ },
+ {
+ name: "node.systemLoad",
+ value: "Load",
+ },
+ {
+ name: "node.ram",
+ value: "RAM",
+ },
+ {
+ name: "node.ipAddresses",
+ value: "IPs",
+ },
+ {
+ name: "node.update",
+ value: "Autoupdate",
+ },
+ {
+ name: "node.domain",
+ value: "Domain",
+ },
+ {
+ name: "node.clients",
+ value: "Clients",
+ },
+ ],
+ supportedLocale: ["en", "de", "cz", "fr", "tr", "ru"],
+ // Color configs
+ icon: {
+ base: {
+ fillOpacity: 0.6,
+ opacity: 0.6,
+ weight: 2,
+ radius: 6,
+ className: "stroke-first",
+ },
+ online: {
+ color: "#1566A9",
+ fillColor: "#1566A9",
+ radius: 8,
+ stroke: false,
+ },
+ "online.uplink": {
+ fillColor: "#cde",
+ stroke: true,
+ radius: 4,
+ weight: 10,
+ },
+ offline: {
+ color: "#D43E2A",
+ fillColor: "#D43E2A",
+ radius: 3,
+ },
+ lost: {
+ color: "#D43E2A",
+ fillColor: "#D43E2A",
+ radius: 4,
+ },
+ alert: {
+ color: "#D43E2A",
+ fillColor: "#D43E2A",
+ radius: 5,
+ },
+ new: {
+ color: "#1566A9",
+ fillColor: "#93E929",
+ },
+ "new.uplink": {
+ stroke: true,
+ radius: 4,
+ weight: 10,
+ },
+ },
+ client: {
+ wifi24: "rgba(220, 0, 103, 0.7)",
+ wifi5: "rgba(10, 156, 146, 0.7)",
+ other: "rgba(227, 166, 25, 0.7)",
+ },
+ map: {
+ labelNewColor: "#459c18",
+ tqFrom: "#F02311",
+ tqTo: "#04C714",
+ highlightNode: {
+ color: "#ad2358",
+ weight: 8,
+ fillOpacity: 1,
+ opacity: 0.4,
+ className: "stroke-first",
+ },
+ highlightLink: {
+ weight: 4,
+ opacity: 1,
+ dashArray: "5, 10",
+ },
+ },
+ forceGraph: {
+ nodeColor: "#fff",
+ nodeOfflineColor: "#D43E2A",
+ highlightColor: "rgba(255, 255, 255, 0.2)",
+ labelColor: "#fff",
+ tqFrom: "#770038",
+ tqTo: "#dc0067",
+ zoomModifier: 1,
+ },
+ locate: {
+ outerCircle: {
+ stroke: false,
+ color: "#4285F4",
+ opacity: 1,
+ fillOpacity: 0.3,
+ clickable: false,
+ radius: 16,
+ },
+ innerCircle: {
+ "stroke:": true,
+ color: "#ffffff",
+ fillColor: "#4285F4",
+ weight: 1.5,
+ clickable: false,
+ opacity: 1,
+ fillOpacity: 1,
+ radius: 7,
+ },
+ accuracyCircle: {
+ stroke: true,
+ color: "#4285F4",
+ weight: 1,
+ clickable: false,
+ opacity: 0.7,
+ fillOpacity: 0.2,
+ },
+ },
+ deprecated: [
+ "TP-Link TL-WR740N/ND v1",
+ "AP121",
+ "AP121U",
+ "D-Link DIR-615",
+ "D-Link DIR-615 D",
+ "AVM FRITZ!Box 7320",
+ "AVM FRITZ!Box 7330",
+ "AVM FRITZ!Box 7330 SL",
+ "TP-Link TL-MR13U v1",
+ "TP-Link TL-MR3020 v1",
+ "TP-Link TL-MR3040 v1",
+ "TP-Link TL-MR3040 v2",
+ "TP-Link TL-MR3220 v1",
+ "TP-Link TL-MR3220 v2",
+ "TP-Link TL-MR3420 v1",
+ "TP-Link TL-MR3420 v2",
+ "TP-Link TL-WA701N/ND v1",
+ "TP-Link TL-WA701N/ND v2",
+ "TP-Link TL-WA730RE v1",
+ "TP-Link TL-WA750RE v1",
+ "TP-Link TL-WA801N/ND v1",
+ "TP-Link TL-WA801N/ND v2",
+ "TP-Link TL-WA801N/ND v3",
+ "TP-Link TL-WA830RE v1",
+ "TP-Link TL-WA830RE v2",
+ "TP-Link TL-WA850RE v1",
+ "TP-Link TL-WA860RE v1",
+ "TP-Link TL-WA901N/ND v1",
+ "TP-Link TL-WA901N/ND v2",
+ "TP-Link TL-WA901N/ND v3",
+ "TP-Link TL-WA901N/ND v4",
+ "TP-Link TL-WA901N/ND v5",
+ "TP-Link TL-WA7210N v2",
+ "TP-Link TL-WA7510N v1",
+ "TP-Link TL-WR703N v1",
+ "TP-Link TL-WR710N v2",
+ "TP-Link TL-WR740N/ND v1",
+ "TP-Link TL-WR740N/ND v3",
+ "TP-Link TL-WR740N/ND v4",
+ "TP-Link TL-WR740N/ND v5",
+ "TP-Link TL-WR741N/ND v1",
+ "TP-Link TL-WR741N/ND v3",
+ "TP-Link TL-WR741N/ND v4",
+ "TP-Link TL-WR741N/ND v5",
+ "TP-Link TL-WR743N/ND v1",
+ "TP-Link TL-WR743N/ND v2",
+ "TP-Link TL-WR840N v2",
+ "TP-Link TL-WR841N/ND v3",
+ "TP-Link TL-WR841N/ND v5",
+ "TP-Link TL-WR841N/ND v7",
+ "TP-Link TL-WR841N/ND v8",
+ "TP-Link TL-WR841N/ND v9",
+ "TP-Link TL-WR841N/ND v10",
+ "TP-Link TL-WR841N/ND v11",
+ "TP-Link TL-WR841N/ND v12",
+ "TP-Link TL-WR841N/ND Mod (16M) v11",
+ "TP-Link TL-WR841N/ND Mod (16M) v10",
+ "TP-Link TL-WR841N/ND Mod (16M) v8",
+ "TP-Link TL-WR841N/ND Mod (16M) v9",
+ "TP-Link TL-WR841N/ND Mod (8M) v10",
+ "TP-Link TL-WR842N/ND v1",
+ "TP-Link TL-WR842N/ND v2",
+ "TP-Link TL-WR843N/ND v1",
+ "TP-Link TL-WR940N v1",
+ "TP-Link TL-WR940N v2",
+ "TP-Link TL-WR940N v3",
+ "TP-Link TL-WR940N v4",
+ "TP-Link TL-WR940N v5",
+ "TP-Link TL-WR940N v6",
+ "TP-Link TL-WR941N/ND v2",
+ "TP-Link TL-WR941N/ND v3",
+ "TP-Link TL-WR941N/ND v4",
+ "TP-Link TL-WR941N/ND v5",
+ "TP-Link TL-WR941N/ND v6",
+ "TP-Link TL-WR1043N/ND v1",
+ "A5-V11",
+ "D-Link DIR-615 D1",
+ "D-Link DIR-615 D2",
+ "D-Link DIR-615 D3",
+ "D-Link DIR-615 D4",
+ "D-Link DIR-615 H1",
+ "VoCore 8M",
+ "VoCore 16M",
+ ],
+};
diff --git a/lib/container.js b/lib/container.js
index 914eecb5..1274ed0d 100644
--- a/lib/container.js
+++ b/lib/container.js
@@ -1,22 +1,18 @@
-define([], function () {
- 'use strict';
+export const Container = function (tag) {
+ if (!tag) {
+ tag = "div";
+ }
- return function (tag) {
- if (!tag) {
- tag = 'div';
- }
+ var self = this;
+ var container = document.createElement(tag);
- var self = this;
- var container = document.createElement(tag);
-
- self.add = function add(d) {
- d.render(container);
- };
-
- self.render = function render(el) {
- el.appendChild(container);
- };
+ self.add = function add(d) {
+ d.render(container);
+ };
- return self;
+ self.render = function render(el) {
+ el.appendChild(container);
};
-});
+
+ return self;
+};
diff --git a/lib/datadistributor.js b/lib/datadistributor.js
index 385f65ac..bcb94e36 100644
--- a/lib/datadistributor.js
+++ b/lib/datadistributor.js
@@ -1,103 +1,104 @@
-define(['filters/nodefilter'], function (NodeFilter) {
- 'use strict';
-
- return function () {
- var targets = [];
- var filterObservers = [];
- var filters = [];
- var filteredData;
- var data;
-
- function remove(d) {
- targets = targets.filter(function (e) {
- return d !== e;
- });
+import { NodeFilter } from "./filters/nodefilter";
+
+export const DataDistributor = function () {
+ var targets = [];
+ var filterObservers = [];
+ var filters = [];
+ var filteredData;
+ var data;
+
+ function remove(d) {
+ targets = targets.filter(function (e) {
+ return d !== e;
+ });
+ }
+
+ function add(d) {
+ targets.push(d);
+
+ if (filteredData !== undefined) {
+ d.setData(filteredData);
}
+ }
- function add(d) {
- targets.push(d);
-
- if (filteredData !== undefined) {
- d.setData(filteredData);
- }
- }
+ function setData(d) {
+ data = d;
+ refresh();
+ }
- function setData(d) {
- data = d;
- refresh();
+ function refresh() {
+ if (data === undefined) {
+ return;
}
- function refresh() {
- if (data === undefined) {
- return;
- }
-
- var filter = filters.reduce(function (a, f) {
+ var filter = filters.reduce(
+ function (a, f) {
return function (d) {
return a(d) && f.run(d);
};
- }, function () {
+ },
+ function () {
return true;
- });
+ },
+ );
- filteredData = new NodeFilter(filter)(data);
+ filteredData = new NodeFilter(filter)(data);
- targets.forEach(function (t) {
- t.setData(filteredData);
- });
- }
+ targets.forEach(function (t) {
+ t.setData(filteredData);
+ });
+ }
- function notifyObservers() {
- filterObservers.forEach(function (d) {
- d.filtersChanged(filters);
- });
- }
-
- function addFilter(d) {
- var newItem = true;
+ function notifyObservers() {
+ filterObservers.forEach(function (d) {
+ d.filtersChanged(filters);
+ });
+ }
- filters.forEach(function (f) {
- if (f.getKey && f.getKey() === d.getKey()) {
- removeFilter(f);
- newItem = false;
- }
- });
+ function addFilter(d) {
+ var newItem = true;
- if (newItem) {
- filters.push(d);
- notifyObservers();
- d.setRefresh(refresh);
- refresh();
+ filters.forEach(function (f) {
+ if (f.getKey && f.getKey() === d.getKey()) {
+ removeFilter(f);
+ newItem = false;
}
- }
+ });
- function removeFilter(d) {
- filters = filters.filter(function (e) {
- return d !== e;
- });
+ if (newItem) {
+ filters.push(d);
notifyObservers();
+ d.setRefresh(refresh);
refresh();
}
+ }
- function watchFilters(d) {
- filterObservers.push(d);
+ function removeFilter(d) {
+ filters = filters.filter(function (e) {
+ return d !== e;
+ });
+ notifyObservers();
+ refresh();
+ }
- d.filtersChanged(filters);
+ function watchFilters(d) {
+ filterObservers.push(d);
- return function () {
- filterObservers = filterObservers.filter(function (e) {
- return d !== e;
- });
- };
- }
+ d.filtersChanged(filters);
- return {
- add: add,
- remove: remove,
- setData: setData,
- addFilter: addFilter,
- removeFilter: removeFilter,
- watchFilters: watchFilters
+ return function () {
+ filterObservers = filterObservers.filter(function (e) {
+ return d !== e;
+ });
};
+ }
+
+ return {
+ add: add,
+ remove: remove,
+ setData: setData,
+ addFilter: addFilter,
+ removeFilter: removeFilter,
+ watchFilters: watchFilters,
};
-});
+};
diff --git a/lib/filters/filtergui.js b/lib/filters/filtergui.js
index 767d5f92..fb6d823d 100644
--- a/lib/filters/filtergui.js
+++ b/lib/filters/filtergui.js
@@ -1,44 +1,40 @@
-define(function () {
- 'use strict';
+export const FilterGui = function (distributor) {
+ var container = document.createElement("ul");
+ container.classList.add("filters");
+ var div = document.createElement("div");
- return function (distributor) {
- var container = document.createElement('ul');
- container.classList.add('filters');
- var div = document.createElement('div');
+ function render(el) {
+ el.appendChild(div);
+ }
- function render(el) {
- el.appendChild(div);
+ function filtersChanged(filters) {
+ while (container.firstChild) {
+ container.removeChild(container.firstChild);
}
- function filtersChanged(filters) {
- while (container.firstChild) {
- container.removeChild(container.firstChild);
- }
+ filters.forEach(function (d) {
+ var li = document.createElement("li");
+ container.appendChild(li);
+ d.render(li);
- filters.forEach(function (d) {
- var li = document.createElement('li');
- container.appendChild(li);
- d.render(li);
+ var button = document.createElement("button");
+ button.classList.add("ion-close");
+ button.setAttribute("aria-label", _.t("remove"));
+ button.onclick = function onclick() {
+ distributor.removeFilter(d);
+ };
+ li.appendChild(button);
+ });
- var button = document.createElement('button');
- button.classList.add('ion-close');
- button.setAttribute('aria-label', _.t('remove'));
- button.onclick = function onclick() {
- distributor.removeFilter(d);
- };
- li.appendChild(button);
- });
-
- if (container.parentNode === div && filters.length === 0) {
- div.removeChild(container);
- } else if (filters.length > 0) {
- div.appendChild(container);
- }
+ if (container.parentNode === div && filters.length === 0) {
+ div.removeChild(container);
+ } else if (filters.length > 0) {
+ div.appendChild(container);
}
+ }
- return {
- render: render,
- filtersChanged: filtersChanged
- };
+ return {
+ render: render,
+ filtersChanged: filtersChanged,
};
-});
+};
diff --git a/lib/filters/genericnode.js b/lib/filters/genericnode.js
index ca43a382..128906a3 100644
--- a/lib/filters/genericnode.js
+++ b/lib/filters/genericnode.js
@@ -1,63 +1,61 @@
-define(['helper'], function (helper) {
- 'use strict';
+import * as helper from "../utils/helper";
- return function (name, key, value, f) {
- var negate = false;
- var refresh;
+export const GenericNodeFilter = function (name, key, value, f) {
+ var negate = false;
+ var refresh;
- var label = document.createElement('label');
- var strong = document.createElement('strong');
- label.textContent = name + ': ';
- label.appendChild(strong);
+ var label = document.createElement("label");
+ var strong = document.createElement("strong");
+ label.textContent = name + ": ";
+ label.appendChild(strong);
- function run(d) {
- var o = helper.dictGet(d, key.slice(0));
+ function run(d) {
+ var o = helper.dictGet(d, key.slice(0));
- if (f) {
- o = f(o);
- }
-
- return o === value ? !negate : negate;
+ if (f) {
+ o = f(o);
}
- function setRefresh(r) {
- refresh = r;
- }
+ return o === value ? !negate : negate;
+ }
- function draw(el) {
- if (negate) {
- el.classList.add('not');
- } else {
- el.classList.remove('not');
- }
+ function setRefresh(r) {
+ refresh = r;
+ }
- strong.textContent = value;
+ function draw(el) {
+ if (negate) {
+ el.classList.add("not");
+ } else {
+ el.classList.remove("not");
}
- function render(el) {
- el.appendChild(label);
- draw(el);
-
- label.onclick = function onclick() {
- negate = !negate;
+ strong.textContent = value;
+ }
- draw(el);
+ function render(el) {
+ el.appendChild(label);
+ draw(el);
- if (refresh) {
- refresh();
- }
- };
- }
+ label.onclick = function onclick() {
+ negate = !negate;
- function getKey() {
- return value.concat(name);
- }
+ draw(el);
- return {
- run: run,
- setRefresh: setRefresh,
- render: render,
- getKey: getKey
+ if (refresh) {
+ refresh();
+ }
};
+ }
+
+ function getKey() {
+ return value.concat(name);
+ }
+
+ return {
+ run: run,
+ setRefresh: setRefresh,
+ render: render,
+ getKey: getKey,
};
-});
+};
diff --git a/lib/filters/hostname.js b/lib/filters/hostname.js
index 6fbc9327..c964a9bb 100644
--- a/lib/filters/hostname.js
+++ b/lib/filters/hostname.js
@@ -1,42 +1,38 @@
-define(function () {
- 'use strict';
+export const HostnameFilter = function () {
+ var refreshFunctions = [];
+ var timer;
+ var input = document.createElement("input");
- return function () {
- var refreshFunctions = [];
- var timer;
- var input = document.createElement('input');
+ function refresh() {
+ clearTimeout(timer);
+ timer = setTimeout(function () {
+ refreshFunctions.forEach(function (f) {
+ f();
+ });
+ }, 250);
+ }
- function refresh() {
- clearTimeout(timer);
- timer = setTimeout(function () {
- refreshFunctions.forEach(function (f) {
- f();
- });
- }, 250);
- }
+ function run(d) {
+ return d.hostname.toLowerCase().includes(input.value.toLowerCase());
+ }
- function run(d) {
- return d.hostname.toLowerCase().includes(input.value.toLowerCase());
- }
+ function setRefresh(f) {
+ refreshFunctions.push(f);
+ }
- function setRefresh(f) {
- refreshFunctions.push(f);
- }
+ function render(el) {
+ input.type = "search";
+ input.placeholder = _.t("sidebar.nodeFilter");
+ input.setAttribute("aria-label", _.t("sidebar.nodeFilter"));
+ input.addEventListener("input", refresh);
+ el.classList.add("filter-node");
+ el.classList.add("ion-filter");
+ el.appendChild(input);
+ }
- function render(el) {
- input.type = 'search';
- input.placeholder = _.t('sidebar.nodeFilter');
- input.setAttribute('aria-label', _.t('sidebar.nodeFilter'));
- input.addEventListener('input', refresh);
- el.classList.add('filter-node');
- el.classList.add('ion-filter');
- el.appendChild(input);
- }
-
- return {
- run: run,
- setRefresh: setRefresh,
- render: render
- };
+ return {
+ run: run,
+ setRefresh: setRefresh,
+ render: render,
};
-});
+};
diff --git a/lib/filters/nodefilter.js b/lib/filters/nodefilter.js
index b8e24a8b..7811c0fc 100644
--- a/lib/filters/nodefilter.js
+++ b/lib/filters/nodefilter.js
@@ -1,22 +1,18 @@
-define(function () {
- 'use strict';
+export const NodeFilter = function (filter) {
+ return function (data) {
+ var n = Object.create(data);
+ n.nodes = {};
- return function (filter) {
- return function (data) {
- var n = Object.create(data);
- n.nodes = {};
-
- for (var key in data.nodes) {
- if (data.nodes.hasOwnProperty(key)) {
- n.nodes[key] = data.nodes[key].filter(filter);
- }
+ for (var key in data.nodes) {
+ if (data.nodes.hasOwnProperty(key)) {
+ n.nodes[key] = data.nodes[key].filter(filter);
}
+ }
- n.links = data.links.filter(function (d) {
- return filter(d.source) && filter(d.target);
- });
+ n.links = data.links.filter(function (d) {
+ return filter(d.source) && filter(d.target);
+ });
- return n;
- };
+ return n;
};
-});
+};
diff --git a/lib/forcegraph.js b/lib/forcegraph.js
index df415f8a..e4e28849 100644
--- a/lib/forcegraph.js
+++ b/lib/forcegraph.js
@@ -1,288 +1,294 @@
-define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'd3-timer', 'd3-ease', 'd3-interpolate', 'utils/math', 'forcegraph/draw'],
- function (d3Selection, d3Force, d3Zoom, d3Drag, d3Timer, d3Ease, d3Interpolate, math, draw) {
- 'use strict';
-
- return function (linkScale, sidebar) {
- var self = this;
- var el;
- var canvas;
- var ctx;
- var force;
- var forceLink;
-
- var transform = d3Zoom.zoomIdentity;
- var intNodes = [];
- var dictNodes = {};
- var intLinks = [];
- var movetoTimer;
- var initial = 1.8;
-
- var NODE_RADIUS_DRAG = 10;
- var NODE_RADIUS_SELECT = 15;
- var LINK_RADIUS_SELECT = 12;
- var ZOOM_ANIMATE_DURATION = 350;
-
- var ZOOM_MIN = 1 / 8;
- var ZOOM_MAX = 3;
-
- var FORCE_ALPHA = 0.01;
-
- draw.setTransform(transform);
-
- function resizeCanvas() {
- canvas.width = el.offsetWidth;
- canvas.height = el.offsetHeight;
- draw.setMaxArea(canvas.width, canvas.height);
+import * as d3Drag from "d3-drag";
+import * as d3Ease from "d3-ease";
+import * as d3Force from "d3-force";
+import * as d3Interpolate from "d3-interpolate";
+import * as d3Selection from "d3-selection";
+import * as d3Timer from "d3-timer";
+import * as d3Zoom from "d3-zoom";
+
+import math from "./utils/math";
+import draw from "./forcegraph/draw";
+
+export const ForceGraph = function (linkScale, sidebar) {
+ var self = this;
+ var el;
+ var canvas;
+ var ctx;
+ var force;
+ var forceLink;
+
+ var transform = d3Zoom.zoomIdentity;
+ var intNodes = [];
+ var dictNodes = {};
+ var intLinks = [];
+ var movetoTimer;
+ var initial = 1.8;
+
+ var NODE_RADIUS_DRAG = 10;
+ var NODE_RADIUS_SELECT = 15;
+ var LINK_RADIUS_SELECT = 12;
+ var ZOOM_ANIMATE_DURATION = 350;
+
+ var ZOOM_MIN = 1 / 8;
+ var ZOOM_MAX = 3;
+
+ var FORCE_ALPHA = 0.01;
+
+ draw.setTransform(transform);
+
+ function resizeCanvas() {
+ canvas.width = el.offsetWidth;
+ canvas.height = el.offsetHeight;
+ draw.setMaxArea(canvas.width, canvas.height);
+ }
+
+ function transformPosition(p) {
+ transform.x = p.x;
+ transform.y = p.y;
+ transform.k = p.k;
+ }
+
+ function moveTo(callback, forceMove) {
+ clearTimeout(movetoTimer);
+ if (!forceMove && force.alpha() > 0.3) {
+ movetoTimer = setTimeout(function timerOfMoveTo() {
+ moveTo(callback);
+ }, 300);
+ return;
+ }
+ var result = callback();
+ var x = result[0];
+ var y = result[1];
+ var k = result[2];
+ var end = { k: k };
+
+ end.x = (canvas.width + sidebar.getWidth()) / 2 - x * k;
+ end.y = canvas.height / 2 - y * k;
+
+ var start = { x: transform.x, y: transform.y, k: transform.k };
+
+ var interpolate = d3Interpolate.interpolateObject(start, end);
+
+ var timer = d3Timer.timer(function (t) {
+ if (t >= ZOOM_ANIMATE_DURATION) {
+ timer.stop();
+ return;
}
- function transformPosition(p) {
- transform.x = p.x;
- transform.y = p.y;
- transform.k = p.k;
+ var v = interpolate(d3Ease.easeQuadInOut(t / ZOOM_ANIMATE_DURATION));
+ transformPosition(v);
+ window.requestAnimationFrame(redraw);
+ });
+ }
+
+ function onClick(event) {
+ if (event.defaultPrevented) {
+ return;
+ }
+
+ var e = transform.invert([event.clientX, event.clientY]);
+ var n = force.find(e[0], e[1], NODE_RADIUS_SELECT);
+
+ if (n !== undefined) {
+ router.fullUrl({ node: n.o.node_id });
+ return;
+ }
+
+ e = { x: e[0], y: e[1] };
+
+ var closedLink;
+ var radius = LINK_RADIUS_SELECT;
+ intLinks.forEach(function (d) {
+ var distance = math.distanceLink(e, d.source, d.target);
+ if (distance < radius) {
+ closedLink = d;
+ radius = distance;
}
+ });
- function moveTo(callback, forceMove) {
- clearTimeout(movetoTimer);
- if (!forceMove && force.alpha() > 0.3) {
- movetoTimer = setTimeout(function timerOfMoveTo() {
- moveTo(callback);
- }, 300);
- return;
- }
- var result = callback();
- var x = result[0];
- var y = result[1];
- var k = result[2];
- var end = { k: k };
-
- end.x = (canvas.width + sidebar.getWidth()) / 2 - x * k;
- end.y = canvas.height / 2 - y * k;
-
- var start = { x: transform.x, y: transform.y, k: transform.k };
-
- var interpolate = d3Interpolate.interpolateObject(start, end);
-
- var timer = d3Timer.timer(function (t) {
- if (t >= ZOOM_ANIMATE_DURATION) {
- timer.stop();
- return;
- }
-
- var v = interpolate(d3Ease.easeQuadInOut(t / ZOOM_ANIMATE_DURATION));
- transformPosition(v);
- window.requestAnimationFrame(redraw);
- });
- }
+ if (closedLink !== undefined) {
+ router.fullUrl({ link: closedLink.o.id });
+ }
+ }
+
+ function redraw() {
+ ctx.save();
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.translate(transform.x, transform.y);
+ ctx.scale(transform.k, transform.k);
- function onClick(event) {
- if (event.defaultPrevented) {
- return;
- }
-
- var e = transform.invert([event.clientX, event.clientY]);
- var n = force.find(e[0], e[1], NODE_RADIUS_SELECT);
-
- if (n !== undefined) {
- router.fullUrl({ node: n.o.node_id });
- return;
- }
-
- e = { x: e[0], y: e[1] };
-
- var closedLink;
- var radius = LINK_RADIUS_SELECT;
- intLinks
- .forEach(function (d) {
- var distance = math.distanceLink(e, d.source, d.target);
- if (distance < radius) {
- closedLink = d;
- radius = distance;
- }
- });
-
- if (closedLink !== undefined) {
- router.fullUrl({ link: closedLink.o.id });
- }
+ intLinks.forEach(draw.drawLink);
+ intNodes.forEach(draw.drawNode);
+
+ ctx.restore();
+ }
+
+ el = document.createElement("div");
+ el.classList.add("graph");
+
+ forceLink = d3Force
+ .forceLink()
+ .distance(function (d) {
+ if (d.o.type.indexOf("vpn") === 0) {
+ return 0;
}
+ return 75;
+ })
+ .strength(function (d) {
+ if (d.o.type.indexOf("vpn") === 0) {
+ return 0.02;
+ }
+ return Math.max(0.5, d.o.source_tq);
+ });
+
+ var zoom = d3Zoom
+ .zoom()
+ .scaleExtent([ZOOM_MIN, ZOOM_MAX])
+ .on("zoom", function (event) {
+ transform = event.transform;
+ draw.setTransform(transform);
+ redraw();
+ });
+
+ force = d3Force
+ .forceSimulation()
+ .force("link", forceLink)
+ .force("charge", d3Force.forceManyBody())
+ .force("x", d3Force.forceX().strength(0.02))
+ .force("y", d3Force.forceY().strength(0.02))
+ .force("collide", d3Force.forceCollide())
+ .on("tick", redraw)
+ .alphaDecay(0.025);
+
+ var drag = d3Drag
+ .drag()
+ .subject(function (event) {
+ var e = transform.invert([event.x, event.y]);
+ var n = force.find(e[0], e[1], NODE_RADIUS_DRAG);
+
+ if (n !== undefined) {
+ n.x = event.x;
+ n.y = event.y;
+ return n;
+ }
+ return undefined;
+ })
+ .on("start", function (event) {
+ if (!event.active) {
+ force.alphaTarget(FORCE_ALPHA).restart();
+ }
+ event.subject.fx = transform.invertX(event.subject.x);
+ event.subject.fy = transform.invertY(event.subject.y);
+ })
+ .on("drag", function (event) {
+ event.subject.fx = transform.invertX(event.x);
+ event.subject.fy = transform.invertY(event.y);
+ })
+ .on("end", function (event) {
+ if (!event.active) {
+ force.alphaTarget(0);
+ }
+ event.subject.fx = null;
+ event.subject.fy = null;
+ });
- function redraw() {
- ctx.save();
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.translate(transform.x, transform.y);
- ctx.scale(transform.k, transform.k);
+ canvas = d3Selection.select(el).append("canvas").on("click", onClick).call(drag).call(zoom).node();
- intLinks.forEach(draw.drawLink);
- intNodes.forEach(draw.drawNode);
+ ctx = canvas.getContext("2d");
+ draw.setCTX(ctx);
+
+ window.addEventListener("resize", function () {
+ resizeCanvas();
+ redraw();
+ });
- ctx.restore();
+ self.setData = function setData(data) {
+ intNodes = data.nodes.all.map(function (d) {
+ var e = dictNodes[d.node_id];
+ if (!e) {
+ e = {};
+ dictNodes[d.node_id] = e;
}
- el = document.createElement('div');
- el.classList.add('graph');
-
- forceLink = d3Force.forceLink()
- .distance(function (d) {
- if (d.o.type.indexOf('vpn') === 0) {
- return 0;
- }
- return 75;
- })
- .strength(function (d) {
- if (d.o.type.indexOf('vpn') === 0) {
- return 0.02;
- }
- return Math.max(0.5, d.o.source_tq);
- });
-
- var zoom = d3Zoom.zoom()
- .scaleExtent([ZOOM_MIN, ZOOM_MAX])
- .on('zoom', function (event) {
- transform = event.transform;
- draw.setTransform(transform);
- redraw();
- });
-
- force = d3Force.forceSimulation()
- .force('link', forceLink)
- .force('charge', d3Force.forceManyBody())
- .force('x', d3Force.forceX().strength(0.02))
- .force('y', d3Force.forceY().strength(0.02))
- .force('collide', d3Force.forceCollide())
- .on('tick', redraw)
- .alphaDecay(0.025);
-
- var drag = d3Drag.drag()
- .subject(function (event) {
- var e = transform.invert([event.x, event.y]);
- var n = force.find(e[0], e[1], NODE_RADIUS_DRAG);
-
- if (n !== undefined) {
- n.x = event.x;
- n.y = event.y;
- return n;
- }
- return undefined;
- })
- .on('start', function (event) {
- if (!event.active) {
- force.alphaTarget(FORCE_ALPHA).restart();
- }
- event.subject.fx = transform.invertX(event.subject.x);
- event.subject.fy = transform.invertY(event.subject.y);
- })
- .on('drag', function (event) {
- event.subject.fx = transform.invertX(event.x);
- event.subject.fy = transform.invertY(event.y);
- })
- .on('end', function (event) {
- if (!event.active) {
- force.alphaTarget(0);
- }
- event.subject.fx = null;
- event.subject.fy = null;
- });
-
- canvas = d3Selection.select(el)
- .append('canvas')
- .on('click', onClick)
- .call(drag)
- .call(zoom)
- .node();
-
- ctx = canvas.getContext('2d');
- draw.setCTX(ctx);
-
- window.addEventListener('resize', function () {
- resizeCanvas();
- redraw();
+ e.o = d;
+
+ return e;
+ });
+
+ intLinks = data.links
+ .filter(function (d) {
+ return data.nodeDict[d.source.node_id].is_online && data.nodeDict[d.target.node_id].is_online;
+ })
+ .map(function (d) {
+ return {
+ o: d,
+ source: dictNodes[d.source.node_id],
+ target: dictNodes[d.target.node_id],
+ color: linkScale(d.source_tq),
+ color_to: linkScale(d.target_tq),
+ };
});
- self.setData = function setData(data) {
- intNodes = data.nodes.all.map(function (d) {
- var e = dictNodes[d.node_id];
- if (!e) {
- e = {};
- dictNodes[d.node_id] = e;
- }
-
- e.o = d;
-
- return e;
- });
-
- intLinks = data.links.filter(function (d) {
- return data.nodeDict[d.source.node_id].is_online && data.nodeDict[d.target.node_id].is_online;
- }).map(function (d) {
- return {
- o: d,
- source: dictNodes[d.source.node_id],
- target: dictNodes[d.target.node_id],
- color: linkScale(d.source_tq),
- color_to: linkScale(d.target_tq)
- };
- });
-
- force.nodes(intNodes);
- forceLink.links(intLinks);
-
- force.alpha(initial).velocityDecay(0.15).restart();
- if (initial === 1.8) {
- initial = 0.5;
- }
-
- resizeCanvas();
- };
-
- self.resetView = function resetView() {
- moveTo(function calcToReset() {
- draw.setHighlight(null);
- return [0, 0, (ZOOM_MIN + config.forceGraph.zoomModifier) / 2];
- }, true);
- };
-
- self.gotoNode = function gotoNode(d) {
- moveTo(function calcToNode() {
- draw.setHighlight({ type: 'node', id: d.node_id });
- var n = dictNodes[d.node_id];
- if (n) {
- return [n.x, n.y, (ZOOM_MAX + 1) / 2];
- }
- return self.resetView();
- });
- };
-
- self.gotoLink = function gotoLink(d) {
- moveTo(function calcToLink() {
- draw.setHighlight({ type: 'link', id: d[0].id });
- var l = intLinks.find(function (link) {
- return link.o.id === d[0].id;
- });
- if (l) {
- return [(l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2, (ZOOM_MAX / 2) + ZOOM_MIN];
- }
- return self.resetView();
- });
- };
-
- self.gotoLocation = function gotoLocation() {
- // ignore
- };
-
- self.destroy = function destroy() {
- force.stop();
- canvas.parentNode.removeChild(canvas);
- force = null;
-
- if (el.parentNode) {
- el.parentNode.removeChild(el);
- }
- };
-
- self.render = function render(d) {
- d.appendChild(el);
- resizeCanvas();
- };
-
- return self;
- };
- });
+ force.nodes(intNodes);
+ forceLink.links(intLinks);
+
+ force.alpha(initial).velocityDecay(0.15).restart();
+ if (initial === 1.8) {
+ initial = 0.5;
+ }
+
+ resizeCanvas();
+ };
+
+ self.resetView = function resetView() {
+ moveTo(function calcToReset() {
+ draw.setHighlight(null);
+ return [0, 0, (ZOOM_MIN + config.forceGraph.zoomModifier) / 2];
+ }, true);
+ };
+
+ self.gotoNode = function gotoNode(d) {
+ moveTo(function calcToNode() {
+ draw.setHighlight({ type: "node", id: d.node_id });
+ var n = dictNodes[d.node_id];
+ if (n) {
+ return [n.x, n.y, (ZOOM_MAX + 1) / 2];
+ }
+ return self.resetView();
+ });
+ };
+
+ self.gotoLink = function gotoLink(d) {
+ moveTo(function calcToLink() {
+ draw.setHighlight({ type: "link", id: d[0].id });
+ var l = intLinks.find(function (link) {
+ return link.o.id === d[0].id;
+ });
+ if (l) {
+ return [(l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2, ZOOM_MAX / 2 + ZOOM_MIN];
+ }
+ return self.resetView();
+ });
+ };
+
+ self.gotoLocation = function gotoLocation() {
+ // ignore
+ };
+
+ self.destroy = function destroy() {
+ force.stop();
+ canvas.parentNode.removeChild(canvas);
+ force = null;
+
+ if (el.parentNode) {
+ el.parentNode.removeChild(el);
+ }
+ };
+
+ self.render = function render(d) {
+ d.appendChild(el);
+ resizeCanvas();
+ };
+
+ return self;
+};
diff --git a/lib/forcegraph/draw.js b/lib/forcegraph/draw.js
index 29e5e9a4..4bbb68bd 100644
--- a/lib/forcegraph/draw.js
+++ b/lib/forcegraph/draw.js
@@ -1,120 +1,129 @@
-define(['helper'], function (helper) {
- var self = {};
-
- var ctx;
- var width;
- var height;
- var transform;
- var highlight;
-
- var NODE_RADIUS = 15;
- var LINE_RADIUS = 12;
-
- function drawDetailNode(d) {
- if (transform.k > 1 && d.o.is_online) {
- helper.positionClients(ctx, d, Math.PI, d.o, 15);
- ctx.beginPath();
- var name = d.o.node_id;
- if (d.o) {
- name = d.o.hostname;
- }
- ctx.textAlign = 'center';
- ctx.fillStyle = config.forceGraph.labelColor;
- ctx.fillText(name, d.x, d.y + 20);
- }
- }
+import * as helper from "../utils/helper";
- function drawHighlightNode(d) {
- if (highlight && highlight.type === 'node' && d.o.node_id === highlight.id) {
- ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
- ctx.fillStyle = config.forceGraph.highlightColor;
- ctx.fill();
- ctx.beginPath();
- }
- }
+var self = {};
- function drawHighlightLink(d, to) {
- if (highlight && highlight.type === 'link' && d.o.id === highlight.id) {
- ctx.lineTo(to[0], to[1]);
- ctx.strokeStyle = config.forceGraph.highlightColor;
- ctx.lineWidth = LINE_RADIUS * 2;
- ctx.lineCap = 'round';
- ctx.stroke();
- to = [d.source.x, d.source.y];
- }
- return to;
- }
+var ctx;
+var width;
+var height;
+var transform;
+var highlight;
- self.drawNode = function drawNode(d) {
- if (d.x < transform.invertX(0) || d.y < transform.invertY(0) || transform.invertX(width) < d.x || transform.invertY(height) < d.y) {
- return;
- }
- ctx.beginPath();
+var NODE_RADIUS = 15;
+var LINE_RADIUS = 12;
- drawHighlightNode(d);
-
- if (d.o.is_online) {
- ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI);
- if (d.o.is_gateway) {
- ctx.rect(d.x - 9, d.y - 9, 18, 18);
- }
- ctx.fillStyle = config.forceGraph.nodeColor;
- } else {
- ctx.arc(d.x, d.y, 6, 0, 2 * Math.PI);
- ctx.fillStyle = config.forceGraph.nodeOfflineColor;
+function drawDetailNode(d) {
+ if (transform.k > 1 && d.o.is_online) {
+ helper.positionClients(ctx, d, Math.PI, d.o, 15);
+ ctx.beginPath();
+ var name = d.o.node_id;
+ if (d.o) {
+ name = d.o.hostname;
}
+ ctx.textAlign = "center";
+ ctx.fillStyle = config.forceGraph.labelColor;
+ ctx.fillText(name, d.x, d.y + 20);
+ }
+}
+function drawHighlightNode(d) {
+ if (highlight && highlight.type === "node" && d.o.node_id === highlight.id) {
+ ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
+ ctx.fillStyle = config.forceGraph.highlightColor;
ctx.fill();
-
- drawDetailNode(d);
- };
-
- self.drawLink = function drawLink(d) {
- var zero = transform.invert([0, 0]);
- var area = transform.invert([width, height]);
- if (d.source.x < zero[0] && d.target.x < zero[0] || d.source.y < zero[1] && d.target.y < zero[1] ||
- d.source.x > area[0] && d.target.x > area[0] || d.source.y > area[1] && d.target.y > area[1]) {
- return;
- }
ctx.beginPath();
- ctx.moveTo(d.source.x, d.source.y);
- var to = [d.target.x, d.target.y];
+ }
+}
- to = drawHighlightLink(d, to);
+function drawHighlightLink(d, to) {
+ if (highlight && highlight.type === "link" && d.o.id === highlight.id) {
+ ctx.lineTo(to[0], to[1]);
+ ctx.strokeStyle = config.forceGraph.highlightColor;
+ ctx.lineWidth = LINE_RADIUS * 2;
+ ctx.lineCap = "round";
+ ctx.stroke();
+ to = [d.source.x, d.source.y];
+ }
+ return to;
+}
+
+self.drawNode = function drawNode(d) {
+ if (
+ d.x < transform.invertX(0) ||
+ d.y < transform.invertY(0) ||
+ transform.invertX(width) < d.x ||
+ transform.invertY(height) < d.y
+ ) {
+ return;
+ }
+ ctx.beginPath();
- var grd = ctx.createLinearGradient(d.source.x, d.source.y, d.target.x, d.target.y);
- grd.addColorStop(0.45, d.color);
- grd.addColorStop(0.55, d.color_to);
+ drawHighlightNode(d);
- ctx.lineTo(to[0], to[1]);
- ctx.strokeStyle = grd;
- if (d.o.type.indexOf('vpn') === 0) {
- ctx.globalAlpha = 0.2;
- ctx.lineWidth = 1.5;
- } else {
- ctx.globalAlpha = 0.8;
- ctx.lineWidth = 2.5;
+ if (d.o.is_online) {
+ ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI);
+ if (d.o.is_gateway) {
+ ctx.rect(d.x - 9, d.y - 9, 18, 18);
}
- ctx.stroke();
- ctx.globalAlpha = 1;
- };
+ ctx.fillStyle = config.forceGraph.nodeColor;
+ } else {
+ ctx.arc(d.x, d.y, 6, 0, 2 * Math.PI);
+ ctx.fillStyle = config.forceGraph.nodeOfflineColor;
+ }
+
+ ctx.fill();
+
+ drawDetailNode(d);
+};
+
+self.drawLink = function drawLink(d) {
+ var zero = transform.invert([0, 0]);
+ var area = transform.invert([width, height]);
+ if (
+ (d.source.x < zero[0] && d.target.x < zero[0]) ||
+ (d.source.y < zero[1] && d.target.y < zero[1]) ||
+ (d.source.x > area[0] && d.target.x > area[0]) ||
+ (d.source.y > area[1] && d.target.y > area[1])
+ ) {
+ return;
+ }
+ ctx.beginPath();
+ ctx.moveTo(d.source.x, d.source.y);
+ var to = [d.target.x, d.target.y];
+
+ to = drawHighlightLink(d, to);
+
+ var grd = ctx.createLinearGradient(d.source.x, d.source.y, d.target.x, d.target.y);
+ grd.addColorStop(0.45, d.color);
+ grd.addColorStop(0.55, d.color_to);
+
+ ctx.lineTo(to[0], to[1]);
+ ctx.strokeStyle = grd;
+ if (d.o.type.indexOf("vpn") === 0) {
+ ctx.globalAlpha = 0.2;
+ ctx.lineWidth = 1.5;
+ } else {
+ ctx.globalAlpha = 0.8;
+ ctx.lineWidth = 2.5;
+ }
+ ctx.stroke();
+ ctx.globalAlpha = 1;
+};
- self.setCTX = function setCTX(newValue) {
- ctx = newValue;
- };
+self.setCTX = function setCTX(newValue) {
+ ctx = newValue;
+};
- self.setHighlight = function setHighlight(newValue) {
- highlight = newValue;
- };
+self.setHighlight = function setHighlight(newValue) {
+ highlight = newValue;
+};
- self.setTransform = function setTransform(newValue) {
- transform = newValue;
- };
+self.setTransform = function setTransform(newValue) {
+ transform = newValue;
+};
- self.setMaxArea = function setMaxArea(newWidth, newHeight) {
- width = newWidth;
- height = newHeight;
- };
+self.setMaxArea = function setMaxArea(newWidth, newHeight) {
+ width = newWidth;
+ height = newHeight;
+};
- return self;
-});
+export default self;
diff --git a/lib/gui.js b/lib/gui.js
index f4b7d4a4..fb116dd7 100644
--- a/lib/gui.js
+++ b/lib/gui.js
@@ -1,143 +1,153 @@
-define(['d3-interpolate', 'map', 'sidebar', 'tabs', 'container', 'legend',
- 'linklist', 'nodelist', 'simplenodelist', 'infobox/main',
- 'proportions', 'forcegraph', 'title', 'about', 'datadistributor',
- 'filters/filtergui', 'filters/hostname', 'helper'],
-function (d3Interpolate, Map, Sidebar, Tabs, Container, Legend, Linklist,
- Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
- Title, About, DataDistributor, FilterGUI, HostnameFilter, helper) {
- 'use strict';
+import { interpolate } from "d3-interpolate";
+
+import { About } from "./about";
+import { Container } from "./container";
+import { DataDistributor } from "./datadistributor";
+import { ForceGraph } from "./forcegraph";
+import { Legend } from "./legend";
+import { Linklist } from "./linklist";
+import { Nodelist } from "./nodelist";
+import { Map } from "./map";
+import { Proportions } from "./proportions";
+import { SimpleNodelist } from "./simplenodelist";
+import { Sidebar } from "./sidebar";
+import { Tabs } from "./tabs";
+import { Title } from "./title";
+import { Main as Infobox } from "./infobox/main";
+import { FilterGui } from "./filters/filtergui";
+import { HostnameFilter } from "./filters/hostname";
+import * as helper from "./utils/helper";
+
+export const Gui = function (language) {
+ var self = this;
+ var content;
+ var contentDiv;
+
+ var linkScale = interpolate(config.map.tqFrom, config.map.tqTo);
+ var sidebar;
+
+ var buttons = document.createElement("div");
+ buttons.classList.add("buttons");
+
+ var fanout = new DataDistributor();
+ var fanoutUnfiltered = new DataDistributor();
+ fanoutUnfiltered.add(fanout);
+
+ function removeContent() {
+ if (!content) {
+ return;
+ }
- return function (language) {
- var self = this;
- var content;
- var contentDiv;
+ router.removeTarget(content);
+ fanout.remove(content);
- var linkScale = d3Interpolate.interpolate(config.map.tqFrom, config.map.tqTo);
- var sidebar;
+ content.destroy();
- var buttons = document.createElement('div');
- buttons.classList.add('buttons');
+ content = null;
+ }
- var fanout = new DataDistributor();
- var fanoutUnfiltered = new DataDistributor();
- fanoutUnfiltered.add(fanout);
+ function addContent(K) {
+ removeContent();
- function removeContent() {
- if (!content) {
- return;
- }
+ content = new K(linkScale, sidebar, buttons);
+ content.render(contentDiv);
- router.removeTarget(content);
- fanout.remove(content);
+ fanout.add(content);
+ router.addTarget(content);
+ }
- content.destroy();
+ function mkView(K) {
+ return function () {
+ addContent(K);
+ };
+ }
- content = null;
- }
+ var loader = document.getElementsByClassName("loader")[0];
+ loader.classList.add("hide");
- function addContent(K) {
- removeContent();
+ contentDiv = document.createElement("div");
+ contentDiv.classList.add("content");
+ document.body.appendChild(contentDiv);
- content = new K(linkScale, sidebar, buttons);
- content.render(contentDiv);
+ sidebar = new Sidebar(document.body);
- fanout.add(content);
- router.addTarget(content);
- }
+ contentDiv.appendChild(buttons);
- function mkView(K) {
- return function () {
- addContent(K);
- };
+ var buttonToggle = document.createElement("button");
+ buttonToggle.classList.add("ion-eye");
+ buttonToggle.setAttribute("aria-label", _.t("button.switchView"));
+ buttonToggle.onclick = function onclick() {
+ var data;
+ if (content.constructor === Map) {
+ data = { view: "graph", lat: undefined, lng: undefined, zoom: undefined };
+ } else {
+ data = { view: "map" };
}
+ router.fullUrl(data, false, true);
+ };
- var loader = document.getElementsByClassName('loader')[0];
- loader.classList.add('hide');
-
- contentDiv = document.createElement('div');
- contentDiv.classList.add('content');
- document.body.appendChild(contentDiv);
-
- sidebar = new Sidebar(document.body);
-
- contentDiv.appendChild(buttons);
+ buttons.appendChild(buttonToggle);
- var buttonToggle = document.createElement('button');
- buttonToggle.classList.add('ion-eye');
- buttonToggle.setAttribute('aria-label', _.t('button.switchView'));
- buttonToggle.onclick = function onclick() {
- var data;
- if (content.constructor === Map) {
- data = { view: 'graph', lat: undefined, lng: undefined, zoom: undefined };
- } else {
- data = { view: 'map' };
- }
- router.fullUrl(data, false, true);
+ if (config.fullscreen || (config.fullscreenFrame && window.frameElement)) {
+ var buttonFullscreen = document.createElement("button");
+ buttonFullscreen.classList.add("ion-full-enter");
+ buttonFullscreen.setAttribute("aria-label", _.t("button.fullscreen"));
+ buttonFullscreen.onclick = function onclick() {
+ helper.fullscreen(buttonFullscreen);
};
- buttons.appendChild(buttonToggle);
-
- if (config.fullscreen || config.fullscreenFrame && window.frameElement) {
- var buttonFullscreen = document.createElement('button');
- buttonFullscreen.classList.add('ion-full-enter');
- buttonFullscreen.setAttribute('aria-label', _.t('button.fullscreen'));
- buttonFullscreen.onclick = function onclick() {
- helper.fullscreen(buttonFullscreen);
- };
-
- buttons.appendChild(buttonFullscreen);
- }
-
- var title = new Title();
-
- var header = new Container('header');
- var infobox = new Infobox(sidebar, linkScale);
- var tabs = new Tabs();
- var overview = new Container();
- var legend = new Legend(language);
- var newnodeslist = new SimpleNodelist('new', 'firstseen', _.t('node.new'));
- var lostnodeslist = new SimpleNodelist('lost', 'lastseen', _.t('node.missing'));
- var nodelist = new Nodelist();
- var linklist = new Linklist(linkScale);
- var statistics = new Proportions(fanout);
- var about = new About();
-
- fanoutUnfiltered.add(legend);
- fanoutUnfiltered.add(newnodeslist);
- fanoutUnfiltered.add(lostnodeslist);
- fanoutUnfiltered.add(infobox);
- fanout.add(nodelist);
- fanout.add(linklist);
- fanout.add(statistics);
-
- sidebar.add(header);
- header.add(legend);
-
- overview.add(newnodeslist);
- overview.add(lostnodeslist);
-
- var filterGUI = new FilterGUI(fanout);
- fanout.watchFilters(filterGUI);
- header.add(filterGUI);
-
- var hostnameFilter = new HostnameFilter();
- fanout.addFilter(hostnameFilter);
-
- sidebar.add(tabs);
- tabs.add('sidebar.actual', overview);
- tabs.add('node.nodes', nodelist);
- tabs.add('node.links', linklist);
- tabs.add('sidebar.stats', statistics);
- tabs.add('sidebar.about', about);
-
- router.addTarget(title);
- router.addTarget(infobox);
-
- router.addView('map', mkView(Map));
- router.addView('graph', mkView(ForceGraph));
-
- self.setData = fanoutUnfiltered.setData;
-
- return self;
- };
-});
+ buttons.appendChild(buttonFullscreen);
+ }
+
+ var title = new Title();
+
+ var header = new Container("header");
+ var infobox = new Infobox(sidebar, linkScale);
+ var tabs = new Tabs();
+ var overview = new Container();
+ var legend = new Legend(language);
+ var newnodeslist = new SimpleNodelist("new", "firstseen", _.t("node.new"));
+ var lostnodeslist = new SimpleNodelist("lost", "lastseen", _.t("node.missing"));
+ var nodelist = new Nodelist();
+ var linklist = new Linklist(linkScale);
+ var statistics = new Proportions(fanout);
+ var about = new About();
+
+ fanoutUnfiltered.add(legend);
+ fanoutUnfiltered.add(newnodeslist);
+ fanoutUnfiltered.add(lostnodeslist);
+ fanoutUnfiltered.add(infobox);
+ fanout.add(nodelist);
+ fanout.add(linklist);
+ fanout.add(statistics);
+
+ sidebar.add(header);
+ header.add(legend);
+
+ overview.add(newnodeslist);
+ overview.add(lostnodeslist);
+
+ var filterGui = new FilterGui(fanout);
+ fanout.watchFilters(filterGui);
+ header.add(filterGui);
+
+ var hostnameFilter = new HostnameFilter();
+ fanout.addFilter(hostnameFilter);
+
+ sidebar.add(tabs);
+ tabs.add("sidebar.actual", overview);
+ tabs.add("node.nodes", nodelist);
+ tabs.add("node.links", linklist);
+ tabs.add("sidebar.stats", statistics);
+ tabs.add("sidebar.about", about);
+
+ router.addTarget(title);
+ router.addTarget(infobox);
+
+ router.addView("map", mkView(Map));
+ router.addView("graph", mkView(ForceGraph));
+
+ self.setData = fanoutUnfiltered.setData;
+
+ return self;
+};
diff --git a/lib/index.js b/lib/index.js
new file mode 100644
index 00000000..89977f16
--- /dev/null
+++ b/lib/index.js
@@ -0,0 +1,4 @@
+import "../scss/main.scss";
+import { load } from "./load";
+
+load();
diff --git a/lib/infobox/link.js b/lib/infobox/link.js
index ba2092fc..78e27171 100644
--- a/lib/infobox/link.js
+++ b/lib/infobox/link.js
@@ -1,89 +1,111 @@
-define(['helper', 'snabbdom'], function (helper, V) {
- 'use strict';
- V = V.default;
+import V from "snabbdom/dist/snabbdom-patch";
- function showStatImg(img, o, d, time) {
- var subst = {
- '{SOURCE_ID}': d.source.node_id,
- '{SOURCE_NAME}': d.source.hostname.replace(/[^a-z0-9\-]/ig, '_'),
- '{SOURCE_ADDR}': d.source_addr,
- '{SOURCE_MAC}': d.source_mac ? d.source_mac : d.source_addr,
- '{TARGET_ID}': d.target.node_id,
- '{TARGET_NAME}': d.target.hostname.replace(/[^a-z0-9\-]/ig, '_'),
- '{TARGET_ADDR}': d.target_addr,
- '{TARGET_MAC}': d.target_mac ? d.target_mac : d.target_addr,
- '{TYPE}': d.type,
- '{TIME}': time,
- '{LOCALE}': _.locale()
- };
+import * as helper from "../utils/helper";
- img.push(V.h('h4', helper.listReplace(o.name, subst)));
- img.push(helper.showStat(V, o, subst));
- }
+function showStatImg(img, o, d, time) {
+ var subst = {
+ "{SOURCE_ID}": d.source.node_id,
+ "{SOURCE_NAME}": d.source.hostname.replace(/[^a-z0-9\-]/gi, "_"),
+ "{SOURCE_ADDR}": d.source_addr,
+ "{SOURCE_MAC}": d.source_mac ? d.source_mac : d.source_addr,
+ "{TARGET_ID}": d.target.node_id,
+ "{TARGET_NAME}": d.target.hostname.replace(/[^a-z0-9\-]/gi, "_"),
+ "{TARGET_ADDR}": d.target_addr,
+ "{TARGET_MAC}": d.target_mac ? d.target_mac : d.target_addr,
+ "{TYPE}": d.type,
+ "{TIME}": time,
+ "{LOCALE}": _.locale(),
+ };
- return function (el, d, linkScale) {
- var self = this;
- var header = document.createElement('div');
- var table = document.createElement('table');
- var images = document.createElement('div');
- el.appendChild(header);
- el.appendChild(table);
- el.appendChild(images);
+ img.push(V.h("h4", helper.listReplace(o.name, subst)));
+ img.push(helper.showStat(V, o, subst));
+}
- self.render = function render() {
- var children = [];
- var img = [];
- var time = d[0].target.lastseen.format('DDMMYYYYHmmss');
+export const Link = function (el, d, linkScale) {
+ var self = this;
+ var header = document.createElement("div");
+ var table = document.createElement("table");
+ var images = document.createElement("div");
+ el.appendChild(header);
+ el.appendChild(table);
+ el.appendChild(images);
- header = V.patch(header, V.h('div', V.h('h2', [
- V.h('a', {
- props: { href: router.generateLink({ node: d[0].source.node_id }) }
- }, d[0].source.hostname),
- V.h('span', ' - '),
- V.h('a', {
- props: { href: router.generateLink({ node: d[0].target.node_id }) }
- }, d[0].target.hostname)
- ])));
+ self.render = function render() {
+ var children = [];
+ var img = [];
+ var time = d[0].target.lastseen.format("DDMMYYYYHmmss");
- helper.attributeEntry(V, children, 'node.hardware', (d[0].source.model ? d[0].source.model + ' – ' : '') +
- (d[0].target.model ? d[0].target.model : ''));
- helper.attributeEntry(V, children, 'node.distance', helper.showDistance(d[0]));
+ header = V.patch(
+ header,
+ V.h(
+ "div",
+ V.h("h2", [
+ V.h(
+ "a",
+ {
+ props: { href: router.generateLink({ node: d[0].source.node_id }) },
+ },
+ d[0].source.hostname,
+ ),
+ V.h("span", " - "),
+ V.h(
+ "a",
+ {
+ props: { href: router.generateLink({ node: d[0].target.node_id }) },
+ },
+ d[0].target.hostname,
+ ),
+ ]),
+ ),
+ );
- d.forEach(function (link) {
- children.push(V.h('tr', { props: { className: 'header' } }, [
- V.h('th', _.t('node.connectionType')),
- V.h('th', link.type)
- ]));
- helper.attributeEntry(V, children, 'node.tq', V.h('span',
- { style: { color: linkScale((link.source_tq + link.target_tq) / 2) } },
- helper.showTq(link.source_tq) + ' - ' + helper.showTq(link.target_tq))
- );
+ helper.attributeEntry(
+ V,
+ children,
+ "node.hardware",
+ (d[0].source.model ? d[0].source.model + " – " : "") + (d[0].target.model ? d[0].target.model : ""),
+ );
+ helper.attributeEntry(V, children, "node.distance", helper.showDistance(d[0]));
- if (config.linkTypeInfos) {
- config.linkTypeInfos.forEach(function (o) {
- showStatImg(img, o, link, time);
- });
- }
- });
+ d.forEach(function (link) {
+ children.push(
+ V.h("tr", { props: { className: "header" } }, [V.h("th", _.t("node.connectionType")), V.h("th", link.type)]),
+ );
+ helper.attributeEntry(
+ V,
+ children,
+ "node.tq",
+ V.h(
+ "span",
+ { style: { color: linkScale((link.source_tq + link.target_tq) / 2) } },
+ helper.showTq(link.source_tq) + " - " + helper.showTq(link.target_tq),
+ ),
+ );
- if (config.linkInfos) {
- config.linkInfos.forEach(function (o) {
- showStatImg(img, o, d[0], time);
+ if (config.linkTypeInfos) {
+ config.linkTypeInfos.forEach(function (o) {
+ showStatImg(img, o, link, time);
});
}
+ });
- var elNew = V.h('table', children);
- table = V.patch(table, elNew);
- table.elm.classList.add('attributes');
- images = V.patch(images, V.h('div', img));
- };
-
- self.setData = function setData(data) {
- d = data.links.filter(function (a) {
- return a.id === d[0].id;
+ if (config.linkInfos) {
+ config.linkInfos.forEach(function (o) {
+ showStatImg(img, o, d[0], time);
});
- self.render();
- };
- return self;
+ }
+
+ var elNew = V.h("table", children);
+ table = V.patch(table, elNew);
+ table.elm.classList.add("attributes");
+ images = V.patch(images, V.h("div", img));
+ };
+
+ self.setData = function setData(data) {
+ d = data.links.filter(function (a) {
+ return a.id === d[0].id;
+ });
+ self.render();
};
-});
+ return self;
+};
diff --git a/lib/infobox/location.js b/lib/infobox/location.js
index cc4bcf5a..d747889d 100644
--- a/lib/infobox/location.js
+++ b/lib/infobox/location.js
@@ -1,71 +1,82 @@
-define(['helper'], function (helper) {
- 'use strict';
+import * as helper from "../utils/helper";
- return function (el, d) {
- var sidebarTitle = document.createElement('h2');
- sidebarTitle.textContent = _.t('location.location');
- el.appendChild(sidebarTitle);
+export const location = function (el, d) {
+ var sidebarTitle = document.createElement("h2");
+ sidebarTitle.textContent = _.t("location.location");
+ el.appendChild(sidebarTitle);
- helper.getJSON(config.reverseGeocodingApi + '?format=json&lat=' + d.lat + '&lon=' + d.lng + '&zoom=18&addressdetails=0&accept-language=' + _.locale())
- .then(function (result) {
- if (result.display_name) {
- sidebarTitle.outerHTML += '' + result.display_name + '
';
- }
- });
+ helper
+ .getJSON(
+ config.reverseGeocodingApi +
+ "?format=json&lat=" +
+ d.lat +
+ "&lon=" +
+ d.lng +
+ "&zoom=18&addressdetails=0&accept-language=" +
+ _.locale(),
+ )
+ .then(function (result) {
+ if (result.display_name) {
+ sidebarTitle.outerHTML += "" + result.display_name + "
";
+ }
+ });
- var editLat = document.createElement('input');
- editLat.setAttribute('aria-label', _.t('location.latitude'));
- editLat.type = 'text';
- editLat.value = d.lat.toFixed(9);
- el.appendChild(createBox('lat', _.t('location.latitude'), editLat));
+ var editLat = document.createElement("input");
+ editLat.setAttribute("aria-label", _.t("location.latitude"));
+ editLat.type = "text";
+ editLat.value = d.lat.toFixed(9);
+ el.appendChild(createBox("lat", _.t("location.latitude"), editLat));
- var editLng = document.createElement('input');
- editLng.setAttribute('aria-label', _.t('location.longitude'));
- editLng.type = 'text';
- editLng.value = d.lng.toFixed(9);
- el.appendChild(createBox('lng', _.t('location.longitude'), editLng));
+ var editLng = document.createElement("input");
+ editLng.setAttribute("aria-label", _.t("location.longitude"));
+ editLng.type = "text";
+ editLng.value = d.lng.toFixed(9);
+ el.appendChild(createBox("lng", _.t("location.longitude"), editLng));
- var editUci = document.createElement('textarea');
- editUci.setAttribute('aria-label', 'Uci');
- editUci.value =
- "uci set gluon-node-info.@location[0]='location'; " +
- "uci set gluon-node-info.@location[0].share_location='1';" +
- "uci set gluon-node-info.@location[0].latitude='" + d.lat.toFixed(9) + "';" +
- "uci set gluon-node-info.@location[0].longitude='" + d.lng.toFixed(9) + "';" +
- 'uci commit gluon-node-info';
+ var editUci = document.createElement("textarea");
+ editUci.setAttribute("aria-label", "Uci");
+ editUci.value =
+ "uci set gluon-node-info.@location[0]='location'; " +
+ "uci set gluon-node-info.@location[0].share_location='1';" +
+ "uci set gluon-node-info.@location[0].latitude='" +
+ d.lat.toFixed(9) +
+ "';" +
+ "uci set gluon-node-info.@location[0].longitude='" +
+ d.lng.toFixed(9) +
+ "';" +
+ "uci commit gluon-node-info";
- el.appendChild(createBox('uci', 'Uci', editUci));
+ el.appendChild(createBox("uci", "Uci", editUci));
- function createBox(name, title, inputElem) {
- var box = document.createElement('div');
- var heading = document.createElement('h3');
- heading.textContent = title;
- box.appendChild(heading);
- var btn = document.createElement('button');
- btn.classList.add('ion-clipboard');
- btn.title = _.t('location.copy');
- btn.setAttribute('aria-label', _.t('location.copy'));
- btn.onclick = function onclick() {
- copy2clip(inputElem.id);
- };
- inputElem.id = 'location-' + name;
- inputElem.readOnly = true;
- var line = document.createElement('p');
- line.appendChild(inputElem);
- line.appendChild(btn);
- box.appendChild(line);
- box.id = 'box-' + name;
- return box;
- }
+ function createBox(name, title, inputElem) {
+ var box = document.createElement("div");
+ var heading = document.createElement("h3");
+ heading.textContent = title;
+ box.appendChild(heading);
+ var btn = document.createElement("button");
+ btn.classList.add("ion-clipboard");
+ btn.title = _.t("location.copy");
+ btn.setAttribute("aria-label", _.t("location.copy"));
+ btn.onclick = function onclick() {
+ copy2clip(inputElem.id);
+ };
+ inputElem.id = "location-" + name;
+ inputElem.readOnly = true;
+ var line = document.createElement("p");
+ line.appendChild(inputElem);
+ line.appendChild(btn);
+ box.appendChild(line);
+ box.id = "box-" + name;
+ return box;
+ }
- function copy2clip(id) {
- var copyField = document.querySelector('#' + id);
- copyField.select();
- try {
- document.execCommand('copy');
- } catch (err) {
- console.warn(err);
- }
+ function copy2clip(id) {
+ var copyField = document.querySelector("#" + id);
+ copyField.select();
+ try {
+ document.execCommand("copy");
+ } catch (err) {
+ console.warn(err);
}
- };
-});
+ }
+};
diff --git a/lib/infobox/main.js b/lib/infobox/main.js
index b6070756..859b900b 100644
--- a/lib/infobox/main.js
+++ b/lib/infobox/main.js
@@ -1,70 +1,70 @@
-define(['infobox/link', 'infobox/node', 'infobox/location'], function (Link, Node, location) {
- 'use strict';
+import { Link } from "./link";
+import { Node } from "./node";
+import { location } from "./location";
- return function (sidebar, linkScale) {
- var self = this;
- var el;
- var node;
- var link;
+export const Main = function (sidebar, linkScale) {
+ var self = this;
+ var el;
+ var node;
+ var link;
- function destroy() {
- if (el && el.parentNode) {
- el.parentNode.removeChild(el);
- node = link = el = undefined;
- sidebar.reveal();
- }
+ function destroy() {
+ if (el && el.parentNode) {
+ el.parentNode.removeChild(el);
+ node = link = el = undefined;
+ sidebar.reveal();
}
+ }
- function create() {
- destroy();
- sidebar.ensureVisible();
- sidebar.hide();
+ function create() {
+ destroy();
+ sidebar.ensureVisible();
+ sidebar.hide();
- el = document.createElement('div');
- sidebar.container.children[1].appendChild(el);
+ el = document.createElement("div");
+ sidebar.container.children[1].appendChild(el);
- el.scrollIntoView(false);
- el.classList.add('infobox');
- el.destroy = destroy;
+ el.scrollIntoView(false);
+ el.classList.add("infobox");
+ el.destroy = destroy;
- var closeButton = document.createElement('button');
- closeButton.classList.add('close');
- closeButton.classList.add('ion-close');
- closeButton.setAttribute('aria-label', _.t('close'));
- closeButton.onclick = function () {
- router.fullUrl();
- };
- el.appendChild(closeButton);
- }
-
- self.resetView = destroy;
-
- self.gotoNode = function gotoNode(d, nodeDict) {
- create();
- node = new Node(el, d, linkScale, nodeDict);
- node.render();
+ var closeButton = document.createElement("button");
+ closeButton.classList.add("close");
+ closeButton.classList.add("ion-close");
+ closeButton.setAttribute("aria-label", _.t("close"));
+ closeButton.onclick = function () {
+ router.fullUrl();
};
+ el.appendChild(closeButton);
+ }
- self.gotoLink = function gotoLink(d) {
- create();
- link = new Link(el, d, linkScale);
- link.render();
- };
+ self.resetView = destroy;
- self.gotoLocation = function gotoLocation(d) {
- create();
- location(el, d);
- };
+ self.gotoNode = function gotoNode(d, nodeDict) {
+ create();
+ node = new Node(el, d, linkScale, nodeDict);
+ node.render();
+ };
- self.setData = function setData(d) {
- if (typeof node === 'object') {
- node.setData(d);
- }
- if (typeof link === 'object') {
- link.setData(d);
- }
- };
+ self.gotoLink = function gotoLink(d) {
+ create();
+ link = new Link(el, d, linkScale);
+ link.render();
+ };
+
+ self.gotoLocation = function gotoLocation(d) {
+ create();
+ location(el, d);
+ };
- return self;
+ self.setData = function setData(d) {
+ if (typeof node === "object") {
+ node.setData(d);
+ }
+ if (typeof link === "object") {
+ link.setData(d);
+ }
};
-});
+
+ return self;
+};
diff --git a/lib/infobox/node.js b/lib/infobox/node.js
index fe304cbd..c0d82ab6 100644
--- a/lib/infobox/node.js
+++ b/lib/infobox/node.js
@@ -1,239 +1,249 @@
-define(['sorttable', 'snabbdom', 'd3-interpolate', 'helper', 'utils/node'],
- function (SortTable, V, d3Interpolate, helper, nodef) {
- 'use strict';
- V = V.default;
-
- function showStatImg(o, d) {
- var subst = {
- '{NODE_ID}': d.node_id,
- '{NODE_NAME}': d.hostname.replace(/[^a-z0-9\-]/ig, '_'),
- '{NODE_CUSTOM}': d.hostname.replace(config.node_custom, '_'),
- '{TIME}': d.lastseen.format('DDMMYYYYHmmss'),
- '{LOCALE}': _.locale()
- };
- return helper.showStat(V, o, subst);
+import V from "snabbdom/dist/snabbdom-patch";
+
+import { SortTable } from "../sorttable";
+import * as helper from "../utils/helper";
+import nodef from "../utils/node";
+
+function showStatImg(o, d) {
+ var subst = {
+ "{NODE_ID}": d.node_id,
+ "{NODE_NAME}": d.hostname.replace(/[^a-z0-9\-]/gi, "_"),
+ "{NODE_CUSTOM}": d.hostname.replace(config.node_custom, "_"),
+ "{TIME}": d.lastseen.format("DDMMYYYYHmmss"),
+ "{LOCALE}": _.locale(),
+ };
+ return helper.showStat(V, o, subst);
+}
+
+function showHwImg(o, d) {
+ if (!d.model) {
+ return null;
+ }
+ var subst = {
+ "{MODEL}": d.model,
+ "{NODE_NAME}": d.hostname,
+ "{MODEL_HASH}": d.model.split("").reduce(function (a, b) {
+ a = (a << 5) - a + b.charCodeAt(0);
+ return a & a;
+ }, 0),
+ "{MODEL_NORMALIZED}": d.model
+ .toLowerCase()
+ .replace(/[^a-z0-9\.\-]+/gi, "-")
+ .replace(/^-+/, "")
+ .replace(/-+$/, ""),
+ };
+ return helper.showHwImg(V, o, subst);
+}
+
+export function Node(el, d, linkScale, nodeDict) {
+ function nodeLink(node) {
+ return V.h(
+ "a",
+ {
+ props: {
+ className: node.is_online ? "online" : "offline",
+ href: router.generateLink({ node: node.node_id }),
+ },
+ on: {
+ click: function (e) {
+ router.fullUrl({ node: node.node_id }, e);
+ },
+ },
+ },
+ node.hostname,
+ );
+ }
+
+ function nodeIdLink(nodeId) {
+ if (nodeDict[nodeId]) {
+ return nodeLink(nodeDict[nodeId]);
}
-
- function showHwImg(o, d) {
- if (!d.model) {
- return null;
- }
- var subst = {
- '{MODEL}': d.model,
- '{NODE_NAME}': d.hostname,
- '{MODEL_HASH}': d.model.split('').reduce(function (a, b) {
- a = ((a << 5) - a) + b.charCodeAt(0);
- return a & a;
- }, 0),
- '{MODEL_NORMALIZED}': d.model.toLowerCase()
- .replace(/[^a-z0-9\.\-]+/ig, '-')
- .replace(/^-+/, '')
- .replace(/-+$/, '')
- };
- return helper.showHwImg(V, o, subst);
+ return nodeId;
+ }
+
+ function showGateway(node) {
+ var gatewayCols = [
+ V.h("span", [nodeIdLink(node.gateway_nexthop), V.h("br"), _.t("node.nexthop")]),
+ V.h("span", { props: { className: "ion-arrow-right-c" } }),
+ V.h("span", [nodeIdLink(node.gateway), V.h("br"), "IPv4"]),
+ ];
+
+ if (node.gateway6 !== undefined) {
+ gatewayCols.push(V.h("span", [nodeIdLink(node.gateway6), V.h("br"), "IPv6"]));
}
- return function (el, d, linkScale, nodeDict) {
- function nodeLink(node) {
- return V.h('a', {
- props: {
- className: node.is_online ? 'online' : 'offline',
- href: router.generateLink({ node: node.node_id })
- }, on: {
- click: function (e) {
- router.fullUrl({ node: node.node_id }, e);
- }
- }
- }, node.hostname);
- }
-
- function nodeIdLink(nodeId) {
- if (nodeDict[nodeId]) {
- return nodeLink(nodeDict[nodeId]);
- }
- return nodeId;
- }
-
- function showGateway(node) {
- var gatewayCols = [
- V.h('span', [
- nodeIdLink(node.gateway_nexthop),
- V.h('br'),
- _.t('node.nexthop')
- ]),
- V.h('span', { props: { className: 'ion-arrow-right-c' } }),
- V.h('span', [
- nodeIdLink(node.gateway),
- V.h('br'),
- 'IPv4'
- ])
- ];
-
- if (node.gateway6 !== undefined) {
- gatewayCols.push(V.h('span', [
- nodeIdLink(node.gateway6),
- V.h('br'),
- 'IPv6'
- ]));
- }
+ return V.h("td", { props: { className: "gateway" } }, gatewayCols);
+ }
- return V.h('td', { props: { className: 'gateway' } }, gatewayCols);
- }
-
- function renderNeighbourRow(n) {
- var icons = [V.h('span', { props: { className: 'icon ion-' + (n.link.type.indexOf('wifi') === 0 ? 'wifi' : 'share-alt'), title: _.t(n.link.type) } })];
- if (helper.hasLocation(n.node)) {
- icons.push(V.h('span', { props: { className: 'ion-location', title: _.t('location.location') } }));
- }
+ function renderNeighbourRow(n) {
+ var icons = [
+ V.h("span", {
+ props: {
+ className: "icon ion-" + (n.link.type.indexOf("wifi") === 0 ? "wifi" : "share-alt"),
+ title: _.t(n.link.type),
+ },
+ }),
+ ];
+ if (helper.hasLocation(n.node)) {
+ icons.push(V.h("span", { props: { className: "ion-location", title: _.t("location.location") } }));
+ }
- return V.h('tr', [
- V.h('td', icons),
- V.h('td', nodeLink(n.node)),
- V.h('td', n.node.clients),
- V.h('td', [V.h('a', {
+ return V.h("tr", [
+ V.h("td", icons),
+ V.h("td", nodeLink(n.node)),
+ V.h("td", n.node.clients),
+ V.h("td", [
+ V.h(
+ "a",
+ {
style: {
- color: linkScale((n.link.source_tq + n.link.target_tq) / 2)
+ color: linkScale((n.link.source_tq + n.link.target_tq) / 2),
},
props: {
- title: n.link.source.hostname + ' - ' + n.link.target.hostname,
- href: router.generateLink({ link: n.link.id })
- }, on: {
+ title: n.link.source.hostname + " - " + n.link.target.hostname,
+ href: router.generateLink({ link: n.link.id }),
+ },
+ on: {
click: function (e) {
router.fullUrl({ link: n.link.id }, e);
- }
- }
- }, helper.showTq(n.link.source_tq) + ' - ' + helper.showTq(n.link.target_tq))]),
- V.h('td', helper.showDistance(n.link))
- ]);
- }
-
- var self = this;
- var header = document.createElement('h2');
- var hwImage = document.createElement('div');
- var table = document.createElement('table');
- var images = document.createElement('div');
- var neighbours = document.createElement('h3');
- var headings = [{
- name: '',
- sort: function (a, b) {
- return a.link.type.localeCompare(b.link.type);
- }
- }, {
- name: 'node.nodes',
- sort: function (a, b) {
- return a.node.hostname.localeCompare(b.node.hostname);
- },
- reverse: false
- }, {
- name: 'node.clients',
- class: 'ion-people',
- sort: function (a, b) {
- return a.node.clients - b.node.clients;
- },
- reverse: true
- }, {
- name: 'node.tq',
- class: 'ion-connection-bars',
- sort: function (a, b) {
- return a.link.source_tq - b.link.source_tq;
- },
- reverse: true
- }, {
- name: 'node.distance',
- class: 'ion-arrow-resize',
- sort: function (a, b) {
- return (a.link.distance === undefined ? -1 : a.link.distance) -
- (b.link.distance === undefined ? -1 : b.link.distance);
- },
- reverse: true
- }];
- var tableNeighbour = new SortTable(headings, 1, renderNeighbourRow);
-
- // Prepare deprecation warning. At first not displayed, text follows later
- var deprecation = document.createElement('div');
- deprecation.setAttribute('class', 'deprecated');
- deprecation.setAttribute('style', 'display: none;');
- deprecation.innerHTML = '' + (config.deprecation_text || _.t('deprecation')) + '
';
-
- el.appendChild(header);
- el.appendChild(hwImage);
- el.appendChild(deprecation);
- el.appendChild(table);
- el.appendChild(neighbours);
- el.appendChild(tableNeighbour.el);
- el.appendChild(images);
-
- self.render = function render() {
- V.patch(header, V.h('h2', d.hostname));
-
- var hwImg = showHwImg(config.hwImg, d);
- var hwImgContainerData = {
- attrs: {
- class: 'hw-img-container'
- }
- };
- hwImage = V.patch(hwImage, hwImg ? V.h('div', hwImgContainerData, hwImg) : V.h('div'));
+ },
+ },
+ },
+ helper.showTq(n.link.source_tq) + " - " + helper.showTq(n.link.target_tq),
+ ),
+ ]),
+ V.h("td", helper.showDistance(n.link)),
+ ]);
+ }
+
+ var self = this;
+ var header = document.createElement("h2");
+ var hwImage = document.createElement("div");
+ var table = document.createElement("table");
+ var images = document.createElement("div");
+ var neighbours = document.createElement("h3");
+ var headings = [
+ {
+ name: "",
+ sort: function (a, b) {
+ return a.link.type.localeCompare(b.link.type);
+ },
+ },
+ {
+ name: "node.nodes",
+ sort: function (a, b) {
+ return a.node.hostname.localeCompare(b.node.hostname);
+ },
+ reverse: false,
+ },
+ {
+ name: "node.clients",
+ class: "ion-people",
+ sort: function (a, b) {
+ return a.node.clients - b.node.clients;
+ },
+ reverse: true,
+ },
+ {
+ name: "node.tq",
+ class: "ion-connection-bars",
+ sort: function (a, b) {
+ return a.link.source_tq - b.link.source_tq;
+ },
+ reverse: true,
+ },
+ {
+ name: "node.distance",
+ class: "ion-arrow-resize",
+ sort: function (a, b) {
+ return (
+ (a.link.distance === undefined ? -1 : a.link.distance) -
+ (b.link.distance === undefined ? -1 : b.link.distance)
+ );
+ },
+ reverse: true,
+ },
+ ];
+ var tableNeighbour = new SortTable(headings, 1, renderNeighbourRow);
+
+ // Prepare deprecation warning. At first not displayed, text follows later
+ var deprecation = document.createElement("div");
+ deprecation.setAttribute("class", "deprecated");
+ deprecation.setAttribute("style", "display: none;");
+ deprecation.innerHTML = "" + (config.deprecation_text || _.t("deprecation")) + "
";
+
+ el.appendChild(header);
+ el.appendChild(hwImage);
+ el.appendChild(deprecation);
+ el.appendChild(table);
+ el.appendChild(neighbours);
+ el.appendChild(tableNeighbour.el);
+ el.appendChild(images);
+
+ self.render = function render() {
+ V.patch(header, V.h("h2", d.hostname));
+
+ var hwImg = showHwImg(config.hwImg, d);
+ var hwImgContainerData = {
+ attrs: {
+ class: "hw-img-container",
+ },
+ };
+ hwImage = V.patch(hwImage, hwImg ? V.h("div", hwImgContainerData, hwImg) : V.h("div"));
- var children = [];
+ var children = [];
- config.nodeAttr.forEach(function (row) {
- var field = d[row.value];
- if (typeof row.value === 'function') {
- field = row.value(d, nodeDict);
- } else if (nodef['show' + row.value] !== undefined) {
- field = nodef['show' + row.value](d);
- }
- // Check if device is in list of deprecated devices. If so, display the deprecation warning
- if (config.deprecation_enabled) {
- if (row.name === 'node.hardware') {
- if (config.deprecated && field && config.deprecated.includes(field)) {
- deprecation.setAttribute('style', 'display: block;');
- }
- }
+ config.nodeAttr.forEach(function (row) {
+ var field = d[row.value];
+ if (typeof row.value === "function") {
+ field = row.value(d, nodeDict);
+ } else if (nodef["show" + row.value] !== undefined) {
+ field = nodef["show" + row.value](d);
+ }
+ // Check if device is in list of deprecated devices. If so, display the deprecation warning
+ if (config.deprecation_enabled) {
+ if (row.name === "node.hardware") {
+ if (config.deprecated && field && config.deprecated.includes(field)) {
+ deprecation.setAttribute("style", "display: block;");
}
+ }
+ }
- if (field) {
- if (typeof field !== 'object') {
- field = V.h('td', field);
- }
- children.push(V.h('tr', [
- row.name !== undefined ? V.h('th', _.t(row.name)) : null,
- field
- ]));
- }
- });
+ if (field) {
+ if (typeof field !== "object") {
+ field = V.h("td", field);
+ }
+ children.push(V.h("tr", [row.name !== undefined ? V.h("th", _.t(row.name)) : null, field]));
+ }
+ });
- children.push(V.h('tr', [
- V.h('th', _.t('node.gateway')),
- showGateway(d)
- ]));
+ children.push(V.h("tr", [V.h("th", _.t("node.gateway")), showGateway(d)]));
- var elNew = V.h('table', children);
- table = V.patch(table, elNew);
- table.elm.classList.add('attributes');
+ var elNew = V.h("table", children);
+ table = V.patch(table, elNew);
+ table.elm.classList.add("attributes");
- V.patch(neighbours, V.h('h3', _.t('node.link', d.neighbours.length) + ' (' + d.neighbours.length + ')'));
- if (d.neighbours.length > 0) {
- tableNeighbour.setData(d.neighbours);
- tableNeighbour.el.elm.classList.add('node-links');
- }
+ V.patch(neighbours, V.h("h3", _.t("node.link", d.neighbours.length) + " (" + d.neighbours.length + ")"));
+ if (d.neighbours.length > 0) {
+ tableNeighbour.setData(d.neighbours);
+ tableNeighbour.el.elm.classList.add("node-links");
+ }
- if (config.nodeInfos) {
- var img = [];
- config.nodeInfos.forEach(function (nodeInfo) {
- img.push(V.h('h4', nodeInfo.name));
- img.push(showStatImg(nodeInfo, d));
- });
- images = V.patch(images, V.h('div', img));
- }
- };
+ if (config.nodeInfos) {
+ var img = [];
+ config.nodeInfos.forEach(function (nodeInfo) {
+ img.push(V.h("h4", nodeInfo.name));
+ img.push(showStatImg(nodeInfo, d));
+ });
+ images = V.patch(images, V.h("div", img));
+ }
+ };
- self.setData = function setData(data) {
- if (data.nodeDict[d.node_id]) {
- d = data.nodeDict[d.node_id];
- }
- self.render();
- };
- return self;
- };
- });
+ self.setData = function setData(data) {
+ if (data.nodeDict[d.node_id]) {
+ d = data.nodeDict[d.node_id];
+ }
+ self.render();
+ };
+ return self;
+}
diff --git a/lib/legend.js b/lib/legend.js
index 45091f24..e5f935b0 100644
--- a/lib/legend.js
+++ b/lib/legend.js
@@ -1,55 +1,62 @@
-define(['helper'], function (helper) {
- 'use strict';
-
- return function (language) {
- var self = this;
- var stats = document.createTextNode('');
- var timestamp = document.createTextNode('');
-
- self.setData = function setData(d) {
- var totalNodes = Object.keys(d.nodeDict).length;
- var totalOnlineNodes = d.nodes.online.length;
- var totalClients = helper.sum(d.nodes.online.map(function (n) {
+import * as helper from "./utils/helper";
+
+export const Legend = function (language) {
+ var self = this;
+ var stats = document.createTextNode("");
+ var timestamp = document.createTextNode("");
+
+ self.setData = function setData(d) {
+ var totalNodes = Object.keys(d.nodeDict).length;
+ var totalOnlineNodes = d.nodes.online.length;
+ var totalClients = helper.sum(
+ d.nodes.online.map(function (n) {
return n.clients;
- }));
- var totalGateways = helper.sum(d.nodes.online.filter(function (n) {
- return n.is_gateway;
- }).map(helper.one));
-
- stats.textContent = _.t('sidebar.nodes', { total: totalNodes, online: totalOnlineNodes }) + ' ' +
- _.t('sidebar.clients', { smart_count: totalClients }) + ' ' +
- _.t('sidebar.gateway', { smart_count: totalGateways });
-
- timestamp.textContent = _.t('sidebar.lastUpdate') + ' ' + d.timestamp.fromNow();
- };
-
- self.render = function render(el) {
- var h1 = document.createElement('h1');
- h1.textContent = config.siteName;
- el.appendChild(h1);
-
- language.languageSelect(el);
-
- var p = document.createElement('p');
- p.classList.add('legend');
-
- p.appendChild(stats);
- p.appendChild(document.createElement('br'));
- p.appendChild(timestamp);
-
- if (config.linkList) {
- p.appendChild(document.createElement('br'));
- config.linkList.forEach(function (link) {
- var a = document.createElement('a');
- a.innerText = link.title;
- a.href = link.href;
- p.appendChild(a);
- });
- }
-
- el.appendChild(p);
- };
-
- return self;
+ }),
+ );
+ var totalGateways = helper.sum(
+ d.nodes.online
+ .filter(function (n) {
+ return n.is_gateway;
+ })
+ .map(helper.one),
+ );
+
+ stats.textContent =
+ _.t("sidebar.nodes", { total: totalNodes, online: totalOnlineNodes }) +
+ " " +
+ _.t("sidebar.clients", { smart_count: totalClients }) +
+ " " +
+ _.t("sidebar.gateway", { smart_count: totalGateways });
+
+ timestamp.textContent = _.t("sidebar.lastUpdate") + " " + d.timestamp.fromNow();
};
-});
+
+ self.render = function render(el) {
+ var h1 = document.createElement("h1");
+ h1.textContent = config.siteName;
+ el.appendChild(h1);
+
+ language.languageSelect(el);
+
+ var p = document.createElement("p");
+ p.classList.add("legend");
+
+ p.appendChild(stats);
+ p.appendChild(document.createElement("br"));
+ p.appendChild(timestamp);
+
+ if (config.linkList) {
+ p.appendChild(document.createElement("br"));
+ config.linkList.forEach(function (link) {
+ var a = document.createElement("a");
+ a.innerText = link.title;
+ a.href = link.href;
+ p.appendChild(a);
+ });
+ }
+
+ el.appendChild(p);
+ };
+
+ return self;
+};
diff --git a/lib/linklist.js b/lib/linklist.js
index cc5b190f..1fff4f97 100644
--- a/lib/linklist.js
+++ b/lib/linklist.js
@@ -1,71 +1,94 @@
-define(['sorttable', 'snabbdom', 'helper'], function (SortTable, V, helper) {
- 'use strict';
- V = V.default;
+import V from "snabbdom/dist/snabbdom-patch";
- function linkName(d) {
- return (d.source ? d.source.hostname : d.source.id) + ' – ' + d.target.hostname;
- }
+import { SortTable } from "./sorttable";
+import * as helper from "./utils/helper";
+
+function linkName(d) {
+ return (d.source ? d.source.hostname : d.source.id) + " – " + d.target.hostname;
+}
- var headings = [{
- name: '',
+var headings = [
+ {
+ name: "",
sort: function (a, b) {
return a.type.localeCompare(b.type);
- }
- }, {
- name: 'node.nodes',
+ },
+ },
+ {
+ name: "node.nodes",
sort: function (a, b) {
return linkName(a).localeCompare(linkName(b));
},
- reverse: false
- }, {
- name: 'node.tq',
- class: 'ion-connection-bars',
+ reverse: false,
+ },
+ {
+ name: "node.tq",
+ class: "ion-connection-bars",
sort: function (a, b) {
return (a.source_tq + a.target_tq) / 2 - (b.source_tq + b.target_tq) / 2;
},
- reverse: true
- }, {
- name: 'node.distance',
- class: 'ion-arrow-resize',
+ reverse: true,
+ },
+ {
+ name: "node.distance",
+ class: "ion-arrow-resize",
sort: function (a, b) {
- return (a.distance === undefined ? -1 : a.distance) -
- (b.distance === undefined ? -1 : b.distance);
+ return (a.distance === undefined ? -1 : a.distance) - (b.distance === undefined ? -1 : b.distance);
},
- reverse: true
- }];
+ reverse: true,
+ },
+];
- return function (linkScale) {
- var table = new SortTable(headings, 3, renderRow);
+export const Linklist = function (linkScale) {
+ var table = new SortTable(headings, 3, renderRow);
- function renderRow(d) {
- var td1Content = [V.h('a', {
- props: {
- href: router.generateLink({ link: d.id })
- }, on: {
- click: function (e) {
- router.fullUrl({ link: d.id }, e);
- }
- }
- }, linkName(d))];
+ function renderRow(d) {
+ var td1Content = [
+ V.h(
+ "a",
+ {
+ props: {
+ href: router.generateLink({ link: d.id }),
+ },
+ on: {
+ click: function (e) {
+ router.fullUrl({ link: d.id }, e);
+ },
+ },
+ },
+ linkName(d),
+ ),
+ ];
- return V.h('tr', [
- V.h('td', V.h('span', { props: { className: 'icon ion-' + (d.type.indexOf('wifi') === 0 ? 'wifi' : 'share-alt'), title: _.t(d.type) } })),
- V.h('td', td1Content),
- V.h('td', { style: { color: linkScale((d.source_tq + d.target_tq) / 2) } }, helper.showTq(d.source_tq) + ' - ' + helper.showTq(d.target_tq)),
- V.h('td', helper.showDistance(d))
- ]);
- }
+ return V.h("tr", [
+ V.h(
+ "td",
+ V.h("span", {
+ props: {
+ className: "icon ion-" + (d.type.indexOf("wifi") === 0 ? "wifi" : "share-alt"),
+ title: _.t(d.type),
+ },
+ }),
+ ),
+ V.h("td", td1Content),
+ V.h(
+ "td",
+ { style: { color: linkScale((d.source_tq + d.target_tq) / 2) } },
+ helper.showTq(d.source_tq) + " - " + helper.showTq(d.target_tq),
+ ),
+ V.h("td", helper.showDistance(d)),
+ ]);
+ }
- this.render = function render(d) {
- var h2 = document.createElement('h2');
- h2.textContent = _.t('node.links');
- d.appendChild(h2);
- table.el.elm.classList.add('link-list');
- d.appendChild(table.el.elm);
- };
+ this.render = function render(d) {
+ var h2 = document.createElement("h2");
+ h2.textContent = _.t("node.links");
+ d.appendChild(h2);
+ table.el.elm.classList.add("link-list");
+ d.appendChild(table.el.elm);
+ };
- this.setData = function setData(d) {
- table.setData(d.links);
- };
+ this.setData = function setData(d) {
+ table.setData(d.links);
};
-});
+};
diff --git a/lib/load.js b/lib/load.js
index 852824a8..91bb0161 100644
--- a/lib/load.js
+++ b/lib/load.js
@@ -1,11 +1,9 @@
-define(['config_default', 'main'],
- function (cDefault, main) {
- return function () {
- fetch('config.json')
- .then(function (res) {return res.json();})
- .then(function (out) {
- window.config = Object.assign(cDefault, out);
- main();
- }).catch(function (err) { throw err; });
- };
- });
+import { config as defaultConfig } from "./config_default";
+import { main } from "./main";
+
+export const load = async () => {
+ const configResponse = await fetch("config.json");
+ const config = await configResponse.json();
+ globalThis.config = Object.assign(defaultConfig, config);
+ main();
+};
diff --git a/lib/main.js b/lib/main.js
index 5e03ec14..ee1ffdfc 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -1,123 +1,126 @@
-define(['moment', 'utils/router', 'leaflet', 'gui', 'helper', 'utils/language'],
- function (moment, Router, L, GUI, helper, Language) {
- 'use strict';
-
- return function () {
- function handleData(data) {
- var timestamp;
- var nodes = [];
- var links = [];
- var nodeDict = {};
-
- for (var i = 0; i < data.length; ++i) {
- nodes = nodes.concat(data[i].nodes);
- timestamp = data[i].timestamp;
- links = links.concat(data[i].links);
- }
-
- nodes.forEach(function (node) {
- node.firstseen = moment.utc(node.firstseen).local();
- node.lastseen = moment.utc(node.lastseen).local();
- });
-
- var age = moment().subtract(config.maxAge, 'days');
-
- var online = nodes.filter(function (d) {
- return d.is_online;
- });
- var offline = nodes.filter(function (d) {
- return !d.is_online;
- });
-
- var newnodes = helper.limit('firstseen', age, helper.sortByKey('firstseen', online));
- var lostnodes = helper.limit('lastseen', age, helper.sortByKey('lastseen', offline));
-
- nodes.forEach(function (d) {
- d.neighbours = [];
- nodeDict[d.node_id] = d;
- });
-
- links.forEach(function (d) {
- d.source = nodeDict[d.source];
- d.target = nodeDict[d.target];
+import moment from "moment";
+import * as L from "leaflet";
+
+import { Router } from "./utils/router";
+import { Gui } from "./gui";
+import { Language } from "./utils/language";
+import * as helper from "./utils/helper";
+
+export const main = () => {
+ function handleData(data) {
+ var timestamp;
+ var nodes = [];
+ var links = [];
+ var nodeDict = {};
+
+ for (var i = 0; i < data.length; ++i) {
+ nodes = nodes.concat(data[i].nodes);
+ timestamp = data[i].timestamp;
+ links = links.concat(data[i].links);
+ }
+
+ nodes.forEach(function (node) {
+ node.firstseen = moment.utc(node.firstseen).local();
+ node.lastseen = moment.utc(node.lastseen).local();
+ });
+
+ var age = moment().subtract(config.maxAge, "days");
+
+ var online = nodes.filter(function (d) {
+ return d.is_online;
+ });
+ var offline = nodes.filter(function (d) {
+ return !d.is_online;
+ });
+
+ var newnodes = helper.limit("firstseen", age, helper.sortByKey("firstseen", online));
+ var lostnodes = helper.limit("lastseen", age, helper.sortByKey("lastseen", offline));
+
+ nodes.forEach(function (d) {
+ d.neighbours = [];
+ nodeDict[d.node_id] = d;
+ });
+
+ links.forEach(function (d) {
+ d.source = nodeDict[d.source];
+ d.target = nodeDict[d.target];
+
+ d.id = [d.source.node_id, d.target.node_id].join("-");
+ d.source.neighbours.push({ node: d.target, link: d });
+ d.target.neighbours.push({ node: d.source, link: d });
+
+ try {
+ d.latlngs = [];
+ d.latlngs.push(L.latLng(d.source.location.latitude, d.source.location.longitude));
+ d.latlngs.push(L.latLng(d.target.location.latitude, d.target.location.longitude));
+
+ d.distance = d.latlngs[0].distanceTo(d.latlngs[1]);
+ } catch (e) {
+ // ignore exception
+ }
+ });
+
+ return {
+ now: moment(),
+ timestamp: moment.utc(timestamp).local(),
+ nodes: {
+ all: nodes,
+ online: online,
+ offline: offline,
+ new: newnodes,
+ lost: lostnodes,
+ },
+ links: links,
+ nodeDict: nodeDict,
+ };
+ }
- d.id = [d.source.node_id, d.target.node_id].join('-');
- d.source.neighbours.push({ node: d.target, link: d });
- d.target.neighbours.push({ node: d.source, link: d });
+ var language = new Language();
+ window.router = new Router(language);
- try {
- d.latlngs = [];
- d.latlngs.push(L.latLng(d.source.location.latitude, d.source.location.longitude));
- d.latlngs.push(L.latLng(d.target.location.latitude, d.target.location.longitude));
+ config.dataPath.forEach(function (d, i) {
+ config.dataPath[i] += "meshviewer.json";
+ });
- d.distance = d.latlngs[0].distanceTo(d.latlngs[1]);
- } catch (e) {
- // ignore exception
+ language.init(router);
+
+ function update() {
+ return Promise.all(config.dataPath.map(helper.getJSON)).then(handleData);
+ }
+
+ update()
+ .then(function (d) {
+ return new Promise(function (resolve, reject) {
+ var count = 0;
+ (function waitForLanguage() {
+ if (Object.keys(_.phrases).length > 0) {
+ resolve(d);
+ } else if (count > 500) {
+ reject(new Error("translation not loaded after 10 seconds"));
+ } else {
+ setTimeout(waitForLanguage.bind(this), 20);
}
- });
-
- return {
- now: moment(),
- timestamp: moment.utc(timestamp).local(),
- nodes: {
- all: nodes,
- online: online,
- offline: offline,
- new: newnodes,
- lost: lostnodes
- },
- links: links,
- nodeDict: nodeDict
- };
- }
-
- var language = new Language();
- window.router = new Router(language);
-
- config.dataPath.forEach(function (d, i) {
- config.dataPath[i] += 'meshviewer.json';
+ count++;
+ })();
});
-
- language.init(router);
-
- function update() {
- return Promise.all(config.dataPath.map(helper.getJSON))
- .then(handleData);
- }
-
- update()
- .then(function (d) {
- return new Promise(function (resolve, reject) {
- var count = 0;
- (function waitForLanguage() {
- if (Object.keys(_.phrases).length > 0) {
- resolve(d);
- } else if (count > 500) {
- reject(new Error('translation not loaded after 10 seconds'));
- } else {
- setTimeout(waitForLanguage.bind(this), 20);
- }
- count++;
- })();
- });
- })
- .then(function (d) {
- var gui = new GUI(language);
- gui.setData(d);
- router.setData(d);
- router.resolve();
-
- window.setInterval(function () {
- update().then(function (n) {
- gui.setData(n);
- router.setData(n);
- });
- }, 60000);
- })
- .catch(function (e) {
- document.querySelector('.loader').innerHTML += e.message
- + 'Try to reload Try to reload " +
+ helper.showDistance(d) +
+ " / " +
+ helper.showTq(d.source_tq) +
+ " - " +
+ helper.showTq(d.target_tq) +
+ " ",
+ );
+
+ line.on("click", function () {
+ router.fullUrl({ link: d.id });
+ });
- var dx = {
- left: 0,
- right: -width,
- center: -width / 2
- };
+ dict[d.id] = line;
- var dy = {
- top: 0,
- ideographic: -height,
- middle: -height / 2
- };
+ return line;
+ });
+}
- var x = p.x + offset[0] + dx[anchor[0]];
- var y = p.y + offset[1] + dy[anchor[1]];
+function getIcon(color) {
+ return Object.assign({}, config.icon.base, config.icon[color]);
+}
- return { minX: x, minY: y, maxX: x + width, maxY: y + height };
+export const LabelLayer = L.GridLayer.extend({
+ onAdd: function (map) {
+ L.GridLayer.prototype.onAdd.call(this, map);
+ if (this.data) {
+ this.prepareLabels();
+ }
+ },
+ setData: function (data, map, nodeDict, linkDict, linkScale) {
+ var iconOnline = getIcon("online");
+ var iconOffline = getIcon("offline");
+ var iconLost = getIcon("lost");
+ var iconAlert = getIcon("alert");
+ var iconNew = getIcon("new");
+ var iconOnlineUplink = Object.assign({}, iconOnline, config.icon["online.uplink"]);
+ var iconNewUplink = Object.assign({}, iconNew, config.icon["new.uplink"]);
+
+ // Check if init or data is already set
+ if (groupLines) {
+ groupOffline.clearLayers();
+ groupOnline.clearLayers();
+ groupNew.clearLayers();
+ groupLost.clearLayers();
+ groupLines.clearLayers();
}
- function mkMarker(dict, iconFunc) {
- return function (d) {
- var m = L.circleMarker([d.location.latitude, d.location.longitude], iconFunc(d));
-
- m.resetStyle = function resetStyle() {
- m.setStyle(iconFunc(d));
- };
-
- m.on('click', function () {
- router.fullUrl({ node: d.node_id });
- });
- m.bindTooltip(helper.escape(d.hostname));
+ var lines = addLinksToMap(linkDict, linkScale, data.links);
+ groupLines = L.featureGroup(lines).addTo(map);
- dict[d.node_id] = m;
+ var nodesOnline = helper.subtract(data.nodes.online, data.nodes.new).filter(helper.hasLocation);
+ var nodesOffline = helper.subtract(data.nodes.offline, data.nodes.lost).filter(helper.hasLocation);
+ var nodesNew = data.nodes.new.filter(helper.hasLocation);
+ var nodesLost = data.nodes.lost.filter(helper.hasLocation);
- return m;
- };
+ var markersOnline = nodesOnline.map(
+ mkMarker(nodeDict, function (d) {
+ if (helper.hasUplink(d)) {
+ return iconOnlineUplink;
+ }
+ return iconOnline;
+ }),
+ );
+
+ var markersOffline = nodesOffline.map(
+ mkMarker(nodeDict, function () {
+ return iconOffline;
+ }),
+ );
+
+ var markersNew = nodesNew.map(
+ mkMarker(nodeDict, function (d) {
+ if (helper.hasUplink(d)) {
+ return iconNewUplink;
+ }
+ return iconNew;
+ }),
+ );
+
+ var markersLost = nodesLost.map(
+ mkMarker(nodeDict, function (d) {
+ var age = moment(data.now).diff(d.lastseen, "days", true);
+ if (age <= config.maxAgeAlert) {
+ return iconAlert;
+ }
+ if (age <= config.maxAge) {
+ return iconLost;
+ }
+ return null;
+ }),
+ );
+
+ groupOffline = L.featureGroup(markersOffline).addTo(map);
+ groupLost = L.featureGroup(markersLost).addTo(map);
+ groupOnline = L.featureGroup(markersOnline).addTo(map);
+ groupNew = L.featureGroup(markersNew).addTo(map);
+
+ this.data = {
+ online: nodesOnline,
+ offline: nodesOffline,
+ new: nodesNew,
+ lost: nodesLost,
+ };
+ this.updateLayer();
+ },
+ updateLayer: function () {
+ if (this._map) {
+ this.prepareLabels();
}
+ },
+ prepareLabels: function () {
+ var d = this.data;
- function addLinksToMap(dict, linkScale, graph) {
- graph = graph.filter(function (d) {
- return 'distance' in d && d.type.indexOf('vpn') !== 0;
- });
-
- return graph.map(function (d) {
- var opts = {
- color: linkScale((d.source_tq + d.target_tq) / 2),
- weight: 4,
- opacity: 0.5,
- dashArray: 'none'
- };
+ // label:
+ // - position (WGS84 coords)
+ // - offset (2D vector in pixels)
+ // - anchor (tuple, textAlignment, textBaseline)
+ // - minZoom (inclusive)
+ // - label (string)
+ // - color (string)
- var line = L.polyline(d.latlngs, opts);
+ var labelsOnline = d.online.map(prepareLabel(null, 11, 8, true));
+ var labelsOffline = d.offline.map(prepareLabel(config.icon.offline.color, 9, 5, false));
+ var labelsNew = d.new.map(prepareLabel(config.map.labelNewColor, 11, 8, true));
+ var labelsLost = d.lost.map(prepareLabel(config.icon.lost.color, 11, 8, true));
- line.resetStyle = function resetStyle() {
- line.setStyle(opts);
- };
+ var labels = [].concat(labelsNew).concat(labelsLost).concat(labelsOnline).concat(labelsOffline);
- line.bindTooltip(helper.escape(d.source.hostname + ' – ' + d.target.hostname) +
- '' + helper.showDistance(d) + ' / ' + helper.showTq(d.source_tq) + ' - ' + helper.showTq(d.target_tq) + ' ');
+ var minZoom = this.options.minZoom;
+ var maxZoom = this.options.maxZoom;
- line.on('click', function () {
- router.fullUrl({ link: d.id });
- });
+ var trees = [];
- dict[d.id] = line;
+ var map = this._map;
- return line;
- });
+ function nodeToRect(z) {
+ return function (n) {
+ var p = map.project(n.position, z);
+ return { minX: p.x - nodeRadius, minY: p.y - nodeRadius, maxX: p.x + nodeRadius, maxY: p.y + nodeRadius };
+ };
}
- function getIcon(color) {
- return Object.assign({}, config.icon.base, config.icon[color]);
+ for (var z = minZoom; z <= maxZoom; z++) {
+ trees[z] = new RBush(9);
+ trees[z].load(labels.map(nodeToRect(z)));
}
- return L.GridLayer.extend({
- onAdd: function (map) {
- L.GridLayer.prototype.onAdd.call(this, map);
- if (this.data) {
- this.prepareLabels();
- }
- },
- setData: function (data, map, nodeDict, linkDict, linkScale) {
- var iconOnline = getIcon('online');
- var iconOffline = getIcon('offline');
- var iconLost = getIcon('lost');
- var iconAlert = getIcon('alert');
- var iconNew = getIcon('new');
- var iconOnlineUplink = Object.assign({}, iconOnline, config.icon['online.uplink']);
- var iconNewUplink = Object.assign({}, iconNew, config.icon['new.uplink']);
-
- // Check if init or data is already set
- if (groupLines) {
- groupOffline.clearLayers();
- groupOnline.clearLayers();
- groupNew.clearLayers();
- groupLost.clearLayers();
- groupLines.clearLayers();
- }
-
- var lines = addLinksToMap(linkDict, linkScale, data.links);
- groupLines = L.featureGroup(lines).addTo(map);
-
- var nodesOnline = helper.subtract(data.nodes.online, data.nodes.new).filter(helper.hasLocation);
- var nodesOffline = helper.subtract(data.nodes.offline, data.nodes.lost).filter(helper.hasLocation);
- var nodesNew = data.nodes.new.filter(helper.hasLocation);
- var nodesLost = data.nodes.lost.filter(helper.hasLocation);
-
- var markersOnline = nodesOnline.map(mkMarker(nodeDict, function (d) {
- if (helper.hasUplink(d)) {
- return iconOnlineUplink;
- }
- return iconOnline;
- }));
-
- var markersOffline = nodesOffline.map(mkMarker(nodeDict, function () {
- return iconOffline;
- }));
-
- var markersNew = nodesNew.map(mkMarker(nodeDict, function (d) {
- if (helper.hasUplink(d)) {
- return iconNewUplink;
- }
- return iconNew;
- }));
-
- var markersLost = nodesLost.map(mkMarker(nodeDict, function (d) {
- var age = moment(data.now).diff(d.lastseen, 'days', true);
- if (age <= config.maxAgeAlert) {
- return iconAlert;
- }
- if (age <= config.maxAge) {
- return iconLost;
- }
- return null;
- }));
-
- groupOffline = L.featureGroup(markersOffline).addTo(map);
- groupLost = L.featureGroup(markersLost).addTo(map);
- groupOnline = L.featureGroup(markersOnline).addTo(map);
- groupNew = L.featureGroup(markersNew).addTo(map);
-
- this.data = {
- online: nodesOnline,
- offline: nodesOffline,
- new: nodesNew,
- lost: nodesLost
- };
- this.updateLayer();
- },
- updateLayer: function () {
- if (this._map) {
- this.prepareLabels();
- }
- },
- prepareLabels: function () {
- var d = this.data;
-
- // label:
- // - position (WGS84 coords)
- // - offset (2D vector in pixels)
- // - anchor (tuple, textAlignment, textBaseline)
- // - minZoom (inclusive)
- // - label (string)
- // - color (string)
-
- var labelsOnline = d.online.map(prepareLabel(null, 11, 8, true));
- var labelsOffline = d.offline.map(prepareLabel(config.icon.offline.color, 9, 5, false));
- var labelsNew = d.new.map(prepareLabel(config.map.labelNewColor, 11, 8, true));
- var labelsLost = d.lost.map(prepareLabel(config.icon.lost.color, 11, 8, true));
-
- var labels = []
- .concat(labelsNew)
- .concat(labelsLost)
- .concat(labelsOnline)
- .concat(labelsOffline);
-
- var minZoom = this.options.minZoom;
- var maxZoom = this.options.maxZoom;
-
- var trees = [];
-
- var map = this._map;
-
- function nodeToRect(z) {
- return function (n) {
- var p = map.project(n.position, z);
- return { minX: p.x - nodeRadius, minY: p.y - nodeRadius, maxX: p.x + nodeRadius, maxY: p.y + nodeRadius };
- };
- }
-
- for (var z = minZoom; z <= maxZoom; z++) {
- trees[z] = new RBush(9);
- trees[z].load(labels.map(nodeToRect(z)));
- }
-
- labels = labels.map(function (n) {
- var best = labelLocations.map(function (loc) {
+ labels = labels
+ .map(function (n) {
+ var best = labelLocations
+ .map(function (loc) {
var offset = calcOffset(n.offset, loc);
var i;
@@ -268,94 +287,101 @@ define(['leaflet', 'rbush', 'helper', 'moment'],
}
return { loc: loc, z: i + 1 };
- }).filter(function (k) {
+ })
+ .filter(function (k) {
return k.z <= maxZoom;
- }).sort(function (a, b) {
+ })
+ .sort(function (a, b) {
return a.z - b.z;
})[0];
- if (best !== undefined) {
- n.offset = calcOffset(n.offset, best.loc);
- n.minZoom = best.z;
- n.anchor = best.loc;
+ if (best !== undefined) {
+ n.offset = calcOffset(n.offset, best.loc);
+ n.minZoom = best.z;
+ n.anchor = best.loc;
- for (var i = maxZoom; i >= best.z; i--) {
- var p = map.project(n.position, i);
- var rect = labelRect(p, n.offset, best.loc, n, minZoom, maxZoom, i);
- trees[i].insert(rect);
- }
-
- return n;
+ for (var i = maxZoom; i >= best.z; i--) {
+ var p = map.project(n.position, i);
+ var rect = labelRect(p, n.offset, best.loc, n, minZoom, maxZoom, i);
+ trees[i].insert(rect);
}
- return undefined;
- }).filter(function (n) {
- return n !== undefined;
- });
-
- this.margin = 16;
- if (labels.length > 0) {
- this.margin += labels.map(function (n) {
- return n.width;
- }).sort().reverse()[0];
+ return n;
}
+ return undefined;
+ })
+ .filter(function (n) {
+ return n !== undefined;
+ });
- this.labels = new RBush(9);
- this.labels.load(labels.map(mapRTree));
+ this.margin = 16;
- this.redraw();
- },
- createTile: function (tilePoint) {
- var tile = L.DomUtil.create('canvas', 'leaflet-tile');
+ if (labels.length > 0) {
+ this.margin += labels
+ .map(function (n) {
+ return n.width;
+ })
+ .sort()
+ .reverse()[0];
+ }
- var tileSize = this.options.tileSize;
- tile.width = tileSize;
- tile.height = tileSize;
+ this.labels = new RBush(9);
+ this.labels.load(labels.map(mapRTree));
- if (!this.labels) {
- return tile;
- }
+ this.redraw();
+ },
+ createTile: function (tilePoint) {
+ var tile = L.DomUtil.create("canvas", "leaflet-tile");
- var s = tilePoint.multiplyBy(tileSize);
- var map = this._map;
- bodyStyle = window.getComputedStyle(document.querySelector('body'));
- labelShadow = bodyStyle.backgroundColor.replace(/rgb/i, 'rgba').replace(/\)/i, ',0.7)');
+ var tileSize = this.options.tileSize;
+ tile.width = tileSize;
+ tile.height = tileSize;
- function projectNodes(d) {
- var p = map.project(d.label.position);
+ if (!this.labels) {
+ return tile;
+ }
- p.x -= s.x;
- p.y -= s.y;
+ var s = tilePoint.multiplyBy(tileSize);
+ var map = this._map;
+ bodyStyle = window.getComputedStyle(document.querySelector("body"));
+ labelShadow = bodyStyle.backgroundColor.replace(/rgb/i, "rgba").replace(/\)/i, ",0.7)");
- return { p: p, label: d.label };
- }
+ function projectNodes(d) {
+ var p = map.project(d.label.position);
- var bbox = helper.getTileBBox(s, map, tileSize, this.margin);
- var labels = this.labels.search(bbox).map(projectNodes);
- var ctx = tile.getContext('2d');
+ p.x -= s.x;
+ p.y -= s.y;
- ctx.lineWidth = 5;
- ctx.strokeStyle = labelShadow;
- ctx.miterLimit = 2;
+ return { p: p, label: d.label };
+ }
- function drawLabel(d) {
- ctx.font = d.label.font;
- ctx.textAlign = d.label.anchor[0];
- ctx.textBaseline = d.label.anchor[1];
- ctx.fillStyle = d.label.fillStyle === null ? bodyStyle.color : d.label.fillStyle;
+ var bbox = helper.getTileBBox(s, map, tileSize, this.margin);
+ var labels = this.labels.search(bbox).map(projectNodes);
+ var ctx = tile.getContext("2d");
- if (d.label.stroke) {
- ctx.strokeText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
- }
+ ctx.lineWidth = 5;
+ ctx.strokeStyle = labelShadow;
+ ctx.miterLimit = 2;
- ctx.fillText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
- }
+ function drawLabel(d) {
+ ctx.font = d.label.font;
+ ctx.textAlign = d.label.anchor[0];
+ ctx.textBaseline = d.label.anchor[1];
+ ctx.fillStyle = d.label.fillStyle === null ? bodyStyle.color : d.label.fillStyle;
- labels.filter(function (d) {
- return tilePoint.z >= d.label.minZoom;
- }).forEach(drawLabel);
-
- return tile;
+ if (d.label.stroke) {
+ ctx.strokeText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
}
- });
- });
+
+ ctx.fillText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
+ }
+
+ labels
+ .filter(function (d) {
+ return tilePoint.z >= d.label.minZoom;
+ })
+ .forEach(drawLabel);
+
+ return tile;
+ },
+});
diff --git a/lib/map/locationmarker.js b/lib/map/locationmarker.js
index 905aedcf..64940e5f 100644
--- a/lib/map/locationmarker.js
+++ b/lib/map/locationmarker.js
@@ -1,32 +1,30 @@
-define(['leaflet'], function (L) {
- 'use strict';
+import * as L from "leaflet";
- return L.CircleMarker.extend({
- initialize: function (latlng) {
- this.accuracyCircle = L.circle(latlng, 0, config.locate.accuracyCircle);
- this.outerCircle = L.circleMarker(latlng, config.locate.outerCircle);
- L.CircleMarker.prototype.initialize.call(this, latlng, config.locate.innerCircle);
+export const LocationMarker = L.CircleMarker.extend({
+ initialize: function (latlng) {
+ this.accuracyCircle = L.circle(latlng, 0, config.locate.accuracyCircle);
+ this.outerCircle = L.circleMarker(latlng, config.locate.outerCircle);
+ L.CircleMarker.prototype.initialize.call(this, latlng, config.locate.innerCircle);
- this.on('remove', function () {
- this._map.removeLayer(this.accuracyCircle);
- this._map.removeLayer(this.outerCircle);
- });
- },
+ this.on("remove", function () {
+ this._map.removeLayer(this.accuracyCircle);
+ this._map.removeLayer(this.outerCircle);
+ });
+ },
- setLatLng: function (latlng) {
- this.accuracyCircle.setLatLng(latlng);
- this.outerCircle.setLatLng(latlng);
- L.CircleMarker.prototype.setLatLng.call(this, latlng);
- },
+ setLatLng: function (latlng) {
+ this.accuracyCircle.setLatLng(latlng);
+ this.outerCircle.setLatLng(latlng);
+ L.CircleMarker.prototype.setLatLng.call(this, latlng);
+ },
- setAccuracy: function (accuracy) {
- this.accuracyCircle.setRadius(accuracy);
- },
+ setAccuracy: function (accuracy) {
+ this.accuracyCircle.setRadius(accuracy);
+ },
- onAdd: function (map) {
- this.accuracyCircle.addTo(map).bringToBack();
- this.outerCircle.addTo(map);
- L.CircleMarker.prototype.onAdd.call(this, map);
- }
- });
+ onAdd: function (map) {
+ this.accuracyCircle.addTo(map).bringToBack();
+ this.outerCircle.addTo(map);
+ L.CircleMarker.prototype.onAdd.call(this, map);
+ },
});
diff --git a/lib/nodelist.js b/lib/nodelist.js
index 9792f426..dec57595 100644
--- a/lib/nodelist.js
+++ b/lib/nodelist.js
@@ -1,101 +1,112 @@
-define(['sorttable', 'snabbdom', 'helper'], function (SortTable, V, helper) {
- 'use strict';
- V = V.default;
+import V from "snabbdom/dist/snabbdom-patch";
- function showUptime(uptime) {
- // 1000ms are 1 second and 60 second are 1min: 60 * 1000 = 60000
- var s = uptime / 60000;
- if (Math.abs(s) < 60) {
- return Math.round(s) + ' m';
- }
- s /= 60;
- if (Math.abs(s) < 24) {
- return Math.round(s) + ' h';
- }
- s /= 24;
- return Math.round(s) + ' d';
+import { SortTable } from "./sorttable";
+import * as helper from "./utils/helper";
+
+function showUptime(uptime) {
+ // 1000ms are 1 second and 60 second are 1min: 60 * 1000 = 60000
+ var s = uptime / 60000;
+ if (Math.abs(s) < 60) {
+ return Math.round(s) + " m";
}
+ s /= 60;
+ if (Math.abs(s) < 24) {
+ return Math.round(s) + " h";
+ }
+ s /= 24;
+ return Math.round(s) + " d";
+}
- var headings = [{
- name: ''
- }, {
- name: 'node.nodes',
+var headings = [
+ {
+ name: "",
+ },
+ {
+ name: "node.nodes",
sort: function (a, b) {
return a.hostname.localeCompare(b.hostname);
},
- reverse: false
- }, {
- name: 'node.uptime',
- class: 'ion-time',
+ reverse: false,
+ },
+ {
+ name: "node.uptime",
+ class: "ion-time",
sort: function (a, b) {
return a.uptime - b.uptime;
},
- reverse: true
- }, {
- name: 'node.links',
- class: 'ion-share-alt',
+ reverse: true,
+ },
+ {
+ name: "node.links",
+ class: "ion-share-alt",
sort: function (a, b) {
return a.neighbours.length - b.neighbours.length;
},
- reverse: true
- }, {
- name: 'node.clients',
- class: 'ion-people',
+ reverse: true,
+ },
+ {
+ name: "node.clients",
+ class: "ion-people",
sort: function (a, b) {
return a.clients - b.clients;
},
- reverse: true
- }];
+ reverse: true,
+ },
+];
- return function () {
- function renderRow(d) {
- var td0Content = '';
- if (helper.hasLocation(d)) {
- td0Content = V.h('span', { props: { className: 'icon ion-location', title: _.t('location.location') } });
- }
+export const Nodelist = function () {
+ function renderRow(d) {
+ var td0Content = "";
+ if (helper.hasLocation(d)) {
+ td0Content = V.h("span", { props: { className: "icon ion-location", title: _.t("location.location") } });
+ }
- var td1Content = V.h('a', {
+ var td1Content = V.h(
+ "a",
+ {
props: {
- className: ['hostname', d.is_online ? 'online' : 'offline'].join(' '),
- href: router.generateLink({ node: d.node_id })
- }, on: {
+ className: ["hostname", d.is_online ? "online" : "offline"].join(" "),
+ href: router.generateLink({ node: d.node_id }),
+ },
+ on: {
click: function (e) {
router.fullUrl({ node: d.node_id }, e);
- }
- }
- }, d.hostname);
+ },
+ },
+ },
+ d.hostname,
+ );
- return V.h('tr', [
- V.h('td', td0Content),
- V.h('td', td1Content),
- V.h('td', showUptime(d.uptime)),
- V.h('td', d.neighbours.length),
- V.h('td', d.clients)
- ]);
- }
+ return V.h("tr", [
+ V.h("td", td0Content),
+ V.h("td", td1Content),
+ V.h("td", showUptime(d.uptime)),
+ V.h("td", d.neighbours.length),
+ V.h("td", d.clients),
+ ]);
+ }
- var table = new SortTable(headings, 1, renderRow);
+ var table = new SortTable(headings, 1, renderRow);
- this.render = function render(d) {
- var h2 = document.createElement('h2');
- h2.textContent = _.t('node.all');
- d.appendChild(h2);
- table.el.elm.classList.add('node-list');
- d.appendChild(table.el.elm);
- };
+ this.render = function render(d) {
+ var h2 = document.createElement("h2");
+ h2.textContent = _.t("node.all");
+ d.appendChild(h2);
+ table.el.elm.classList.add("node-list");
+ d.appendChild(table.el.elm);
+ };
- this.setData = function setData(d) {
- var data = d.nodes.all.map(function (e) {
- var n = Object.create(e);
- if (e.is_online) {
- n.uptime = d.now - new Date(e.uptime).getTime();
- } else {
- n.uptime = e.lastseen - d.now;
- }
- return n;
- });
+ this.setData = function setData(d) {
+ var data = d.nodes.all.map(function (e) {
+ var n = Object.create(e);
+ if (e.is_online) {
+ n.uptime = d.now - new Date(e.uptime).getTime();
+ } else {
+ n.uptime = e.lastseen - d.now;
+ }
+ return n;
+ });
- table.setData(data);
- };
+ table.setData(data);
};
-});
+};
diff --git a/lib/offline.js b/lib/offline.js
new file mode 100644
index 00000000..3d218844
--- /dev/null
+++ b/lib/offline.js
@@ -0,0 +1 @@
+import "../scss/main.scss";
diff --git a/lib/proportions.js b/lib/proportions.js
index 7c024651..5d6bcac5 100644
--- a/lib/proportions.js
+++ b/lib/proportions.js
@@ -1,199 +1,242 @@
-define(['d3-interpolate', 'snabbdom', 'utils/version', 'filters/genericnode', 'helper'],
- function (d3Interpolate, V, versionCompare, Filter, helper) {
- 'use strict';
- V = V.default;
-
- return function (filterManager) {
- var self = this;
- var scale = d3Interpolate.interpolate(config.forceGraph.tqFrom, config.forceGraph.tqTo);
- var time;
-
- var statusTable;
- var fwTable;
- var baseTable;
- var depTable;
- var hwTable;
- var geoTable;
- var autoTable;
- var gatewayTable;
- var gateway6Table;
- var domainTable;
-
- function count(nodes, key, f) {
- var dict = {};
-
- nodes.forEach(function (d) {
- var v = helper.dictGet(d, key.slice(0));
-
- if (f !== undefined) {
- v = f(v);
- }
-
- if (v === null) {
- return;
- }
-
- dict[v] = 1 + (v in dict ? dict[v] : 0);
- });
-
- return Object.keys(dict).map(function (d) {
- return [d, dict[d], key, f];
- });
+import V from "snabbdom/dist/snabbdom-patch";
+import * as d3Interpolate from "d3-interpolate";
+
+import { GenericNodeFilter } from "./filters/genericnode";
+import * as helper from "./utils/helper";
+import { compare } from "./utils/version";
+
+export const Proportions = function (filterManager) {
+ var self = this;
+ var scale = d3Interpolate.interpolate(config.forceGraph.tqFrom, config.forceGraph.tqTo);
+ var time;
+
+ var statusTable;
+ var fwTable;
+ var baseTable;
+ var depTable;
+ var hwTable;
+ var geoTable;
+ var autoTable;
+ var gatewayTable;
+ var gateway6Table;
+ var domainTable;
+
+ function count(nodes, key, f) {
+ var dict = {};
+
+ nodes.forEach(function (d) {
+ var v = helper.dictGet(d, key.slice(0));
+
+ if (f !== undefined) {
+ v = f(v);
}
- function addFilter(filter) {
- return function () {
- filterManager.addFilter(filter);
- return false;
- };
+ if (v === null) {
+ return;
}
- function fillTable(name, table, data) {
- if (!table) {
- table = document.createElement('table');
- }
-
- var max = Math.max.apply(Math, data.map(function (o) {
- return o[1];
- }));
+ dict[v] = 1 + (v in dict ? dict[v] : 0);
+ });
- var items = data.map(function (d) {
- var v = d[1] / max;
+ return Object.keys(dict).map(function (d) {
+ return [d, dict[d], key, f];
+ });
+ }
- var filter = new Filter(_.t(name), d[2], d[0], d[3]);
-
- var a = V.h('a', { on: { click: addFilter(filter) } }, d[0]);
-
- var th = V.h('th', a);
- var td = V.h('td', V.h('span', {
- style: {
- width: 'calc(25px + ' + Math.round(v * 90) + '%)',
- backgroundColor: scale(v)
- }
- }, d[1].toFixed(0)));
-
- return V.h('tr', [th, td]);
- });
- var tableNew = V.h('table', { props: { className: 'proportion' } }, items);
- return V.patch(table, tableNew);
- }
+ function addFilter(filter) {
+ return function () {
+ filterManager.addFilter(filter);
+ return false;
+ };
+ }
- self.setData = function setData(data) {
- var onlineNodes = data.nodes.online;
- var nodes = onlineNodes.concat(data.nodes.lost);
- time = data.timestamp;
+ function fillTable(name, table, data) {
+ if (!table) {
+ table = document.createElement("table");
+ }
- function hostnameOfNodeID(nodeid) {
- var gateway = data.nodeDict[nodeid];
- if (gateway) {
- return gateway.hostname;
- }
- return null;
- }
+ var max = Math.max.apply(
+ Math,
+ data.map(function (o) {
+ return o[1];
+ }),
+ );
- var gatewayDict = count(nodes, ['gateway'], hostnameOfNodeID);
- var gateway6Dict = count(nodes, ['gateway6'], hostnameOfNodeID);
+ var items = data.map(function (d) {
+ var v = d[1] / max;
- var statusDict = count(nodes, ['is_online'], function (d) {
- return d ? 'online' : 'offline';
- });
- var fwDict = count(nodes, ['firmware', 'release']);
- var baseDict = count(nodes, ['firmware', 'base']);
- var deprecationDict = count(nodes, ['model'], function (d) {
- return config.deprecated && d && config.deprecated.includes(d) ? _.t('yes') : _.t('no');
- });
- var hwDict = count(nodes, ['model']);
- var geoDict = count(nodes, ['location'], function (d) {
- return d && d.longitude && d.latitude ? _.t('yes') : _.t('no');
- });
+ var filter = new GenericNodeFilter(_.t(name), d[2], d[0], d[3]);
- var autoDict = count(nodes, ['autoupdater'], function (d) {
- if (d.enabled) {
- return d.branch;
- }
- return _.t('node.deactivated');
- });
+ var a = V.h("a", { on: { click: addFilter(filter) } }, d[0]);
- var domainDict = count(nodes, ['domain'], function (d) {
- if (config.domainNames) {
- config.domainNames.some(function (t) {
- if (d === t.domain) {
- d = t.name;
- return true;
- }
- });
+ var th = V.h("th", a);
+ var td = V.h(
+ "td",
+ V.h(
+ "span",
+ {
+ style: {
+ width: "calc(25px + " + Math.round(v * 90) + "%)",
+ backgroundColor: scale(v),
+ },
+ },
+ d[1].toFixed(0),
+ ),
+ );
+
+ return V.h("tr", [th, td]);
+ });
+ var tableNew = V.h("table", { props: { className: "proportion" } }, items);
+ return V.patch(table, tableNew);
+ }
+
+ self.setData = function setData(data) {
+ var onlineNodes = data.nodes.online;
+ var nodes = onlineNodes.concat(data.nodes.lost);
+ time = data.timestamp;
+
+ function hostnameOfNodeID(nodeid) {
+ var gateway = data.nodeDict[nodeid];
+ if (gateway) {
+ return gateway.hostname;
+ }
+ return null;
+ }
+
+ var gatewayDict = count(nodes, ["gateway"], hostnameOfNodeID);
+ var gateway6Dict = count(nodes, ["gateway6"], hostnameOfNodeID);
+
+ var statusDict = count(nodes, ["is_online"], function (d) {
+ return d ? "online" : "offline";
+ });
+ var fwDict = count(nodes, ["firmware", "release"]);
+ var baseDict = count(nodes, ["firmware", "base"]);
+ var deprecationDict = count(nodes, ["model"], function (d) {
+ return config.deprecated && d && config.deprecated.includes(d) ? _.t("yes") : _.t("no");
+ });
+ var hwDict = count(nodes, ["model"]);
+ var geoDict = count(nodes, ["location"], function (d) {
+ return d && d.longitude && d.latitude ? _.t("yes") : _.t("no");
+ });
+
+ var autoDict = count(nodes, ["autoupdater"], function (d) {
+ if (d.enabled) {
+ return d.branch;
+ }
+ return _.t("node.deactivated");
+ });
+
+ var domainDict = count(nodes, ["domain"], function (d) {
+ if (config.domainNames) {
+ config.domainNames.some(function (t) {
+ if (d === t.domain) {
+ d = t.name;
+ return true;
}
- return d;
});
-
- statusTable = fillTable('node.status', statusTable, statusDict.sort(function (a, b) {
- return b[1] - a[1];
- }));
- fwTable = fillTable('node.firmware', fwTable, fwDict.sort(versionCompare));
- baseTable = fillTable('node.baseversion', baseTable, baseDict.sort(versionCompare));
- depTable = fillTable('node.deprecationStatus', depTable, deprecationDict.sort(function (a, b) {
- return b[1] - a[1];
- }));
- hwTable = fillTable('node.hardware', hwTable, hwDict.sort(function (a, b) {
- return b[1] - a[1];
- }));
- geoTable = fillTable('node.visible', geoTable, geoDict.sort(function (a, b) {
- return b[1] - a[1];
- }));
- autoTable = fillTable('node.update', autoTable, autoDict.sort(function (a, b) {
- return b[1] - a[1];
- }));
- gatewayTable = fillTable('node.selectedGatewayIPv4', gatewayTable, gatewayDict.sort(function (a, b) {
- return b[1] - a[1];
- }));
- gateway6Table = fillTable('node.selectedGatewayIPv6', gateway6Table, gateway6Dict.sort(function (a, b) {
- return b[1] - a[1];
- }));
- domainTable = fillTable('node.domain', domainTable, domainDict.sort(function (a, b) {
- return b[1] - a[1];
- }));
- };
-
- self.render = function render(el) {
- self.renderSingle(el, 'node.status', statusTable);
- self.renderSingle(el, 'node.firmware', fwTable);
- self.renderSingle(el, 'node.baseversion', baseTable);
- self.renderSingle(el, 'node.deprecationStatus', depTable);
- self.renderSingle(el, 'node.hardware', hwTable);
- self.renderSingle(el, 'node.visible', geoTable);
- self.renderSingle(el, 'node.update', autoTable);
- self.renderSingle(el, 'node.selectedGatewayIPv4', gatewayTable);
- self.renderSingle(el, 'node.selectedGatewayIPv6', gateway6Table);
- self.renderSingle(el, 'node.domain', domainTable);
-
- if (config.globalInfos) {
- var images = document.createElement('div');
- el.appendChild(images);
- var img = [];
- var subst = {
- '{TIME}': time,
- '{LOCALE}': _.locale()
- };
- config.globalInfos.forEach(function (globalInfo) {
- img.push(V.h('h2', globalInfo.name));
- img.push(helper.showStat(V, globalInfo, subst));
- });
- V.patch(images, V.h('div', img));
- }
+ }
+ return d;
+ });
+
+ statusTable = fillTable(
+ "node.status",
+ statusTable,
+ statusDict.sort(function (a, b) {
+ return b[1] - a[1];
+ }),
+ );
+ fwTable = fillTable("node.firmware", fwTable, fwDict.sort(compare));
+ baseTable = fillTable("node.baseversion", baseTable, baseDict.sort(compare));
+ depTable = fillTable(
+ "node.deprecationStatus",
+ depTable,
+ deprecationDict.sort(function (a, b) {
+ return b[1] - a[1];
+ }),
+ );
+ hwTable = fillTable(
+ "node.hardware",
+ hwTable,
+ hwDict.sort(function (a, b) {
+ return b[1] - a[1];
+ }),
+ );
+ geoTable = fillTable(
+ "node.visible",
+ geoTable,
+ geoDict.sort(function (a, b) {
+ return b[1] - a[1];
+ }),
+ );
+ autoTable = fillTable(
+ "node.update",
+ autoTable,
+ autoDict.sort(function (a, b) {
+ return b[1] - a[1];
+ }),
+ );
+ gatewayTable = fillTable(
+ "node.selectedGatewayIPv4",
+ gatewayTable,
+ gatewayDict.sort(function (a, b) {
+ return b[1] - a[1];
+ }),
+ );
+ gateway6Table = fillTable(
+ "node.selectedGatewayIPv6",
+ gateway6Table,
+ gateway6Dict.sort(function (a, b) {
+ return b[1] - a[1];
+ }),
+ );
+ domainTable = fillTable(
+ "node.domain",
+ domainTable,
+ domainDict.sort(function (a, b) {
+ return b[1] - a[1];
+ }),
+ );
+ };
+
+ self.render = function render(el) {
+ self.renderSingle(el, "node.status", statusTable);
+ self.renderSingle(el, "node.firmware", fwTable);
+ self.renderSingle(el, "node.baseversion", baseTable);
+ self.renderSingle(el, "node.deprecationStatus", depTable);
+ self.renderSingle(el, "node.hardware", hwTable);
+ self.renderSingle(el, "node.visible", geoTable);
+ self.renderSingle(el, "node.update", autoTable);
+ self.renderSingle(el, "node.selectedGatewayIPv4", gatewayTable);
+ self.renderSingle(el, "node.selectedGatewayIPv6", gateway6Table);
+ self.renderSingle(el, "node.domain", domainTable);
+
+ if (config.globalInfos) {
+ var images = document.createElement("div");
+ el.appendChild(images);
+ var img = [];
+ var subst = {
+ "{TIME}": time,
+ "{LOCALE}": _.locale(),
};
-
- self.renderSingle = function renderSingle(el, heading, table) {
- if (table.children.length > 0) {
- var h2 = document.createElement('h2');
- h2.classList.add('proportion-header');
- h2.textContent = _.t(heading);
- h2.onclick = function onclick() {
- table.elm.classList.toggle('hide');
- };
- el.appendChild(h2);
- el.appendChild(table.elm);
- }
+ config.globalInfos.forEach(function (globalInfo) {
+ img.push(V.h("h2", globalInfo.name));
+ img.push(helper.showStat(V, globalInfo, subst));
+ });
+ V.patch(images, V.h("div", img));
+ }
+ };
+
+ self.renderSingle = function renderSingle(el, heading, table) {
+ if (table.children.length > 0) {
+ var h2 = document.createElement("h2");
+ h2.classList.add("proportion-header");
+ h2.textContent = _.t(heading);
+ h2.onclick = function onclick() {
+ table.elm.classList.toggle("hide");
};
- return self;
- };
- });
+ el.appendChild(h2);
+ el.appendChild(table.elm);
+ }
+ };
+ return self;
+};
diff --git a/lib/sidebar.js b/lib/sidebar.js
index b28cf3c9..d976df66 100644
--- a/lib/sidebar.js
+++ b/lib/sidebar.js
@@ -1,64 +1,60 @@
-define(function () {
- 'use strict';
+export const Sidebar = function (el) {
+ var self = this;
- return function (el) {
- var self = this;
-
- // Needed to avoid render blocking
- var gridBreakpoints = {
- lg: [992, 446],
- xl: [1200, 560]
- };
-
- var sidebar = document.createElement('div');
- sidebar.classList.add('sidebar');
- el.appendChild(sidebar);
+ // Needed to avoid render blocking
+ var gridBreakpoints = {
+ lg: [992, 446],
+ xl: [1200, 560],
+ };
- var button = document.createElement('button');
- var visibility = new CustomEvent('visibility');
- sidebar.appendChild(button);
+ var sidebar = document.createElement("div");
+ sidebar.classList.add("sidebar");
+ el.appendChild(sidebar);
- button.classList.add('sidebarhandle');
- button.setAttribute('aria-label', _.t('sidebar.toggle'));
- button.onclick = function onclick() {
- button.dispatchEvent(visibility);
- sidebar.classList.toggle('hidden');
- };
+ var button = document.createElement("button");
+ var visibility = new CustomEvent("visibility");
+ sidebar.appendChild(button);
- var container = document.createElement('div');
- container.classList.add('container');
- sidebar.appendChild(container);
+ button.classList.add("sidebarhandle");
+ button.setAttribute("aria-label", _.t("sidebar.toggle"));
+ button.onclick = function onclick() {
+ button.dispatchEvent(visibility);
+ sidebar.classList.toggle("hidden");
+ };
- self.getWidth = function getWidth() {
- if (gridBreakpoints.lg[0] > window.innerWidth || sidebar.classList.contains('hidden')) {
- return 0;
- } else if (gridBreakpoints.xl[0] > window.innerWidth) {
- return gridBreakpoints.lg[1];
- }
- return gridBreakpoints.xl[1];
- };
+ var container = document.createElement("div");
+ container.classList.add("container");
+ sidebar.appendChild(container);
+
+ self.getWidth = function getWidth() {
+ if (gridBreakpoints.lg[0] > window.innerWidth || sidebar.classList.contains("hidden")) {
+ return 0;
+ } else if (gridBreakpoints.xl[0] > window.innerWidth) {
+ return gridBreakpoints.lg[1];
+ }
+ return gridBreakpoints.xl[1];
+ };
- self.add = function add(d) {
- d.render(container);
- };
+ self.add = function add(d) {
+ d.render(container);
+ };
- self.ensureVisible = function ensureVisible() {
- sidebar.classList.remove('hidden');
- };
+ self.ensureVisible = function ensureVisible() {
+ sidebar.classList.remove("hidden");
+ };
- self.hide = function hide() {
- container.children[1].classList.add('hide');
- container.children[2].classList.add('hide');
- };
+ self.hide = function hide() {
+ container.children[1].classList.add("hide");
+ container.children[2].classList.add("hide");
+ };
- self.reveal = function reveal() {
- container.children[1].classList.remove('hide');
- container.children[2].classList.remove('hide');
- };
+ self.reveal = function reveal() {
+ container.children[1].classList.remove("hide");
+ container.children[2].classList.remove("hide");
+ };
- self.container = sidebar;
- self.button = button;
+ self.container = sidebar;
+ self.button = button;
- return self;
- };
-});
+ return self;
+};
diff --git a/lib/simplenodelist.js b/lib/simplenodelist.js
index 919e9c72..227960b6 100644
--- a/lib/simplenodelist.js
+++ b/lib/simplenodelist.js
@@ -1,66 +1,67 @@
-define(['moment', 'snabbdom', 'helper'], function (moment, V, helper) {
- 'use strict';
- V = V.default;
+import moment from "moment";
+import V from "snabbdom/dist/snabbdom-patch";
- return function (nodes, field, title) {
- var self = this;
- var el;
- var tbody;
+import * as helper from "./utils/helper";
- self.render = function render(d) {
- el = d;
- };
+export const SimpleNodelist = function (nodes, field, title) {
+ var self = this;
+ var el;
+ var tbody;
- self.setData = function setData(data) {
- var list = data.nodes[nodes];
+ self.render = function render(d) {
+ el = d;
+ };
- if (list.length === 0) {
- tbody = null;
- return;
- }
+ self.setData = function setData(data) {
+ var list = data.nodes[nodes];
- if (!tbody) {
- var h2 = document.createElement('h2');
- h2.textContent = title;
- el.appendChild(h2);
+ if (list.length === 0) {
+ tbody = null;
+ return;
+ }
- var table = document.createElement('table');
- table.classList.add('node-list');
- el.appendChild(table);
+ if (!tbody) {
+ var h2 = document.createElement("h2");
+ h2.textContent = title;
+ el.appendChild(h2);
- tbody = document.createElement('tbody');
- tbody.last = V.h('tbody');
- table.appendChild(tbody);
- }
+ var table = document.createElement("table");
+ table.classList.add("node-list");
+ el.appendChild(table);
- var items = list.map(function (d) {
- var td0Content = '';
- if (helper.hasLocation(d)) {
- td0Content = V.h('span', { props: { className: 'icon ion-location', title: _.t('location.location') } });
- }
+ tbody = document.createElement("tbody");
+ tbody.last = V.h("tbody");
+ table.appendChild(tbody);
+ }
- var td1Content = V.h('a', {
+ var items = list.map(function (d) {
+ var td0Content = "";
+ if (helper.hasLocation(d)) {
+ td0Content = V.h("span", { props: { className: "icon ion-location", title: _.t("location.location") } });
+ }
+
+ var td1Content = V.h(
+ "a",
+ {
props: {
- className: ['hostname', d.is_online ? 'online' : 'offline'].join(' '),
- href: router.generateLink({ node: d.node_id })
- }, on: {
+ className: ["hostname", d.is_online ? "online" : "offline"].join(" "),
+ href: router.generateLink({ node: d.node_id }),
+ },
+ on: {
click: function (e) {
router.fullUrl({ node: d.node_id }, e);
- }
- }
- }, d.hostname);
-
- return V.h('tr', [
- V.h('td', td0Content),
- V.h('td', td1Content),
- V.h('td', moment(d[field]).from(data.now))
- ]);
- });
+ },
+ },
+ },
+ d.hostname,
+ );
- var tbodyNew = V.h('tbody', items);
- tbody = V.patch(tbody, tbodyNew);
- };
+ return V.h("tr", [V.h("td", td0Content), V.h("td", td1Content), V.h("td", moment(d[field]).from(data.now))]);
+ });
- return self;
+ var tbodyNew = V.h("tbody", items);
+ tbody = V.patch(tbody, tbodyNew);
};
-});
+
+ return self;
+};
diff --git a/lib/sorttable.js b/lib/sorttable.js
index 235b66c8..51efe2bb 100644
--- a/lib/sorttable.js
+++ b/lib/sorttable.js
@@ -1,69 +1,66 @@
-define(['snabbdom'], function (V) {
- 'use strict';
- V = V.default;
+import V from "snabbdom/dist/snabbdom-patch";
- return function (headings, sortIndex, renderRow) {
- var self = this;
- var data;
- var sortReverse = false;
- self.el = document.createElement('table');
+export const SortTable = function (headings, sortIndex, renderRow) {
+ var self = this;
+ var data;
+ var sortReverse = false;
+ self.el = document.createElement("table");
- function sortTable(i) {
- sortReverse = i === sortIndex ? !sortReverse : false;
- sortIndex = i;
+ function sortTable(i) {
+ sortReverse = i === sortIndex ? !sortReverse : false;
+ sortIndex = i;
- updateView();
- }
-
- function sortTableHandler(i) {
- return function () {
- sortTable(i);
- };
- }
+ updateView();
+ }
- function updateView() {
- var children = [];
+ function sortTableHandler(i) {
+ return function () {
+ sortTable(i);
+ };
+ }
- if (data.length !== 0) {
- var th = headings.map(function (d, i) {
- var name = _.t(d.name);
- var properties = {
- onclick: sortTableHandler(i),
- className: 'sort-header'
- };
+ function updateView() {
+ var children = [];
- if (d.class) {
- properties.className += ' ' + d.class;
- properties.title = name;
- name = '';
- }
+ if (data.length !== 0) {
+ var th = headings.map(function (d, i) {
+ var name = _.t(d.name);
+ var properties = {
+ onclick: sortTableHandler(i),
+ className: "sort-header",
+ };
- if (sortIndex === i) {
- properties.className += sortReverse ? ' sort-up' : ' sort-down';
- }
+ if (d.class) {
+ properties.className += " " + d.class;
+ properties.title = name;
+ name = "";
+ }
- return V.h('th', { props: properties }, name);
- });
+ if (sortIndex === i) {
+ properties.className += sortReverse ? " sort-up" : " sort-down";
+ }
- var links = data.slice(0).sort(headings[sortIndex].sort);
+ return V.h("th", { props: properties }, name);
+ });
- if (headings[sortIndex].reverse ? !sortReverse : sortReverse) {
- links = links.reverse();
- }
+ var links = data.slice(0).sort(headings[sortIndex].sort);
- children.push(V.h('thead', V.h('tr', th)));
- children.push(V.h('tbody', links.map(renderRow)));
+ if (headings[sortIndex].reverse ? !sortReverse : sortReverse) {
+ links = links.reverse();
}
- var elNew = V.h('table', children);
- self.el = V.patch(self.el, elNew);
+ children.push(V.h("thead", V.h("tr", th)));
+ children.push(V.h("tbody", links.map(renderRow)));
}
- self.setData = function setData(d) {
- data = d;
- updateView();
- };
+ var elNew = V.h("table", children);
+ self.el = V.patch(self.el, elNew);
+ }
- return self;
+ self.setData = function setData(d) {
+ data = d;
+ updateView();
};
-});
+
+ return self;
+};
diff --git a/lib/tabs.js b/lib/tabs.js
index f3c13d20..66d11109 100644
--- a/lib/tabs.js
+++ b/lib/tabs.js
@@ -1,63 +1,59 @@
-define(function () {
- 'use strict';
+export const Tabs = function () {
+ var self = this;
- return function () {
- var self = this;
+ var tabs = document.createElement("ul");
+ tabs.classList.add("tabs");
- var tabs = document.createElement('ul');
- tabs.classList.add('tabs');
+ var container = document.createElement("div");
- var container = document.createElement('div');
-
- function gotoTab(li) {
- for (var i = 0; i < tabs.children.length; i++) {
- tabs.children[i].classList.remove('visible');
- }
-
- while (container.firstChild) {
- container.removeChild(container.firstChild);
- }
-
- li.classList.add('visible');
+ function gotoTab(li) {
+ for (var i = 0; i < tabs.children.length; i++) {
+ tabs.children[i].classList.remove("visible");
+ }
- var tab = document.createElement('div');
- tab.classList.add('tab');
- container.appendChild(tab);
- li.child.render(tab);
+ while (container.firstChild) {
+ container.removeChild(container.firstChild);
}
- function switchTab() {
- gotoTab(this);
+ li.classList.add("visible");
- return false;
- }
+ var tab = document.createElement("div");
+ tab.classList.add("tab");
+ container.appendChild(tab);
+ li.child.render(tab);
+ }
- self.add = function add(title, d) {
- var li = document.createElement('li');
- li.textContent = _.t(title);
- li.onclick = switchTab;
- li.child = d;
- tabs.appendChild(li);
+ function switchTab() {
+ gotoTab(this);
- var anyVisible = false;
+ return false;
+ }
- for (var i = 0; i < tabs.children.length; i++) {
- if (tabs.children[i].classList.contains('visible')) {
- anyVisible = true;
- break;
- }
- }
+ self.add = function add(title, d) {
+ var li = document.createElement("li");
+ li.textContent = _.t(title);
+ li.onclick = switchTab;
+ li.child = d;
+ tabs.appendChild(li);
+
+ var anyVisible = false;
- if (!anyVisible) {
- gotoTab(li);
+ for (var i = 0; i < tabs.children.length; i++) {
+ if (tabs.children[i].classList.contains("visible")) {
+ anyVisible = true;
+ break;
}
- };
+ }
- self.render = function render(el) {
- el.appendChild(tabs);
- el.appendChild(container);
- };
+ if (!anyVisible) {
+ gotoTab(li);
+ }
+ };
- return self;
+ self.render = function render(el) {
+ el.appendChild(tabs);
+ el.appendChild(container);
};
-});
+
+ return self;
+};
diff --git a/lib/title.js b/lib/title.js
index 812bca3a..eb513adc 100644
--- a/lib/title.js
+++ b/lib/title.js
@@ -1,36 +1,31 @@
-define(function () {
- 'use strict';
+export const Title = function () {
+ function setTitle(d) {
+ var title = [config.siteName];
- return function () {
- function setTitle(d) {
- var title = [config.siteName];
-
- if (d !== undefined) {
- title.unshift(d);
- }
-
- document.title = title.join(' - ');
+ if (d !== undefined) {
+ title.unshift(d);
}
- this.resetView = function resetView() {
- setTitle();
- };
+ document.title = title.join(" - ");
+ }
- this.gotoNode = function gotoNode(d) {
- setTitle(d.hostname);
- };
-
- this.gotoLink = function gotoLink(d) {
- setTitle(d[0].source.hostname + ' \u21D4 ' + d[0].target.hostname);
- };
+ this.resetView = function resetView() {
+ setTitle();
+ };
- this.gotoLocation = function gotoLocation() {
- // ignore
- };
+ this.gotoNode = function gotoNode(d) {
+ setTitle(d.hostname);
+ };
- this.destroy = function destroy() {
- };
+ this.gotoLink = function gotoLink(d) {
+ setTitle(d[0].source.hostname + " \u21D4 " + d[0].target.hostname);
+ };
- return this;
+ this.gotoLocation = function gotoLocation() {
+ // ignore
};
-});
+
+ this.destroy = function destroy() {};
+
+ return this;
+};
diff --git a/lib/utils/helper.js b/lib/utils/helper.js
index aad099de..4418a444 100644
--- a/lib/utils/helper.js
+++ b/lib/utils/helper.js
@@ -1,232 +1,236 @@
-'use strict';
-
-define({
- get: function get(url) {
- return new Promise(function (resolve, reject) {
- var req = new XMLHttpRequest();
- req.open('GET', url);
-
- req.onload = function onload() {
- if (req.status === 200) {
- resolve(req.response);
- } else {
- reject(Error(req.statusText));
- }
- };
-
- req.onerror = function onerror() {
- reject(Error('Network Error'));
- };
-
- req.send();
- });
- },
-
- getJSON: function getJSON(url) {
- return require('helper').get(url).then(JSON.parse);
- },
-
- sortByKey: function sortByKey(key, d) {
- return d.sort(function (a, b) {
- return b[key] - a[key];
- });
- },
-
- limit: function limit(key, m, d) {
- return d.filter(function (n) {
- return n[key].isAfter(m);
- });
- },
-
- sum: function sum(a) {
- return a.reduce(function (b, c) {
- return b + c;
- }, 0);
- },
-
- one: function one() {
- return 1;
- },
-
- dictGet: function dictGet(dict, key) {
- var k = key.shift();
-
- if (!(k in dict)) {
- return null;
- }
+export const get = function get(url) {
+ return new Promise(function (resolve, reject) {
+ var req = new XMLHttpRequest();
+ req.open("GET", url);
+
+ req.onload = function onload() {
+ if (req.status === 200) {
+ resolve(req.response);
+ } else {
+ reject(Error(req.statusText));
+ }
+ };
+
+ req.onerror = function onerror() {
+ reject(Error("Network Error"));
+ };
+
+ req.send();
+ });
+};
+
+export const getJSON = function getJSON(url) {
+ return get(url).then(JSON.parse);
+};
+
+export const sortByKey = function sortByKey(key, d) {
+ return d.sort(function (a, b) {
+ return b[key] - a[key];
+ });
+};
+
+export const limit = function limit(key, m, d) {
+ return d.filter(function (n) {
+ return n[key].isAfter(m);
+ });
+};
+
+export const sum = function sum(a) {
+ return a.reduce(function (b, c) {
+ return b + c;
+ }, 0);
+};
+
+export const one = function one() {
+ return 1;
+};
+
+export const dictGet = function dictGet(dict, key) {
+ var k = key.shift();
+
+ if (!(k in dict)) {
+ return null;
+ }
- if (key.length === 0) {
- return dict[k];
- }
+ if (key.length === 0) {
+ return dict[k];
+ }
- return this.dictGet(dict[k], key);
- },
+ return dictGet(dict[k], key);
+};
- listReplace: function listReplace(s, subst) {
- for (var key in subst) {
- if (subst.hasOwnProperty(key)) {
- var re = new RegExp(key, 'g');
- s = s.replace(re, subst[key]);
- }
+export const listReplace = function listReplace(s, subst) {
+ for (var key in subst) {
+ if (subst.hasOwnProperty(key)) {
+ var re = new RegExp(key, "g");
+ s = s.replace(re, subst[key]);
}
- return s;
- },
-
- hasLocation: function hasLocation(d) {
- return 'location' in d &&
- Math.abs(d.location.latitude) < 90 &&
- Math.abs(d.location.longitude) < 180;
- },
-
- hasUplink: function hasUplink(d) {
- if (!('neighbours' in d)) {
- return false;
- }
- let uplink = false;
- d.neighbours.forEach(function (l) {
- if (l.link.type === 'vpn') {
- uplink = true;
- }
- });
- return uplink;
- },
+ }
+ return s;
+};
- subtract: function subtract(a, b) {
- var ids = {};
+export const hasLocation = function hasLocation(d) {
+ return "location" in d && Math.abs(d.location.latitude) < 90 && Math.abs(d.location.longitude) < 180;
+};
- b.forEach(function (d) {
- ids[d.node_id] = true;
- });
+export const hasUplink = function hasUplink(d) {
+ if (!("neighbours" in d)) {
+ return false;
+ }
+ let uplink = false;
+ d.neighbours.forEach(function (l) {
+ if (l.link.type === "vpn") {
+ uplink = true;
+ }
+ });
+ return uplink;
+};
- return a.filter(function (d) {
- return !ids[d.node_id];
- });
- },
+export const subtract = function subtract(a, b) {
+ var ids = {};
- /* Helpers working with links */
+ b.forEach(function (d) {
+ ids[d.node_id] = true;
+ });
- showDistance: function showDistance(d) {
- if (isNaN(d.distance)) {
- return '';
- }
+ return a.filter(function (d) {
+ return !ids[d.node_id];
+ });
+};
- return d.distance.toFixed(0) + ' m';
- },
+/* Helpers working with links */
- showTq: function showTq(d) {
- return (d * 100).toFixed(0) + '%';
- },
+export const showDistance = function showDistance(d) {
+ if (isNaN(d.distance)) {
+ return "";
+ }
- attributeEntry: function attributeEntry(V, children, label, value) {
- if (value !== undefined) {
- if (typeof value !== 'object') {
- value = V.h('td', value);
- }
+ return d.distance.toFixed(0) + " m";
+};
- children.push(V.h('tr', [
- V.h('th', _.t(label)),
- value
- ]));
- }
- },
- showStat: function showStat(V, o, subst) {
- var content = V.h('img', { attrs: { src: require('helper').listReplace(o.image, subst), width: o.width, height: o.height, alt: _.t('loading', { name: o.name }) } });
-
- if (o.href) {
- return V.h('div', V.h('a', {
- attrs:
- {
- href: require('helper').listReplace(o.href, subst),
- target: '_blank',
- title: require('helper').listReplace(o.title, subst)
- }
- }, content));
- }
- return V.h('div', content);
- },
- showHwImg: function showHwImg(V, o, subst) {
- if (!o) {
- return null;
- }
+export const showTq = function showTq(d) {
+ return (d * 100).toFixed(0) + "%";
+};
- return V.h('img', {
- attrs: { src: require('helper').listReplace(o, subst), class: 'hw-img'},
- on: {
- // hide non-existant images
- error: function (e) { e.target.style.display = 'none'; }
- }
- });
- },
-
- getTileBBox: function getTileBBox(s, map, tileSize, margin) {
- var tl = map.unproject([s.x - margin, s.y - margin]);
- var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize]);
-
- return { minX: br.lat, minY: tl.lng, maxX: tl.lat, maxY: br.lng };
- },
- positionClients: function positionClients(ctx, p, startAngle, node, startDistance) {
- if (node.clients === 0) {
- return;
+export const attributeEntry = function attributeEntry(V, children, label, value) {
+ if (value !== undefined) {
+ if (typeof value !== "object") {
+ value = V.h("td", value);
}
- var radius = 3;
- var a = 1.2;
- var mode = 0;
-
- ctx.beginPath();
- ctx.fillStyle = config.client.wifi24;
-
- for (var orbit = 0, i = 0; i < node.clients; orbit++) {
- var distance = startDistance + orbit * 2 * radius * a;
- var n = Math.floor((Math.PI * distance) / (a * radius));
- var delta = node.clients - i;
-
- for (var j = 0; j < Math.min(delta, n); i++, j++) {
- if (mode !== 1 && i >= (node.clients_wifi24 + node.clients_wifi5)) {
- mode = 1;
- ctx.fill();
- ctx.beginPath();
- ctx.fillStyle = config.client.wifi5;
- } else if (mode === 0 && i >= node.clients_wifi24) {
- mode = 2;
- ctx.fill();
- ctx.beginPath();
- ctx.fillStyle = config.client.other;
- }
- var angle = 2 * Math.PI / n * j;
- var x = p.x + distance * Math.cos(angle + startAngle);
- var y = p.y + distance * Math.sin(angle + startAngle);
-
- ctx.moveTo(x, y);
- ctx.arc(x, y, radius, 0, 2 * Math.PI);
+ children.push(V.h("tr", [V.h("th", _.t(label)), value]));
+ }
+};
+
+export const showStat = function showStat(V, o, subst) {
+ var content = V.h("img", {
+ attrs: {
+ src: listReplace(o.image, subst),
+ width: o.width,
+ height: o.height,
+ alt: _.t("loading", { name: o.name }),
+ },
+ });
+
+ if (o.href) {
+ return V.h(
+ "div",
+ V.h(
+ "a",
+ {
+ attrs: {
+ href: listReplace(o.href, subst),
+ target: "_blank",
+ title: listReplace(o.title, subst),
+ },
+ },
+ content,
+ ),
+ );
+ }
+ return V.h("div", content);
+};
+
+export const showHwImg = function showHwImg(V, o, subst) {
+ if (!o) {
+ return null;
+ }
+
+ return V.h("img", {
+ attrs: { src: listReplace(o, subst), class: "hw-img" },
+ on: {
+ // hide non-existant images
+ error: function (e) {
+ e.target.style.display = "none";
+ },
+ },
+ });
+};
+
+export const getTileBBox = function getTileBBox(s, map, tileSize, margin) {
+ var tl = map.unproject([s.x - margin, s.y - margin]);
+ var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize]);
+
+ return { minX: br.lat, minY: tl.lng, maxX: tl.lat, maxY: br.lng };
+};
+
+export const positionClients = function positionClients(ctx, p, startAngle, node, startDistance) {
+ if (node.clients === 0) {
+ return;
+ }
+
+ var radius = 3;
+ var a = 1.2;
+ var mode = 0;
+
+ ctx.beginPath();
+ ctx.fillStyle = config.client.wifi24;
+
+ for (var orbit = 0, i = 0; i < node.clients; orbit++) {
+ var distance = startDistance + orbit * 2 * radius * a;
+ var n = Math.floor((Math.PI * distance) / (a * radius));
+ var delta = node.clients - i;
+
+ for (var j = 0; j < Math.min(delta, n); i++, j++) {
+ if (mode !== 1 && i >= node.clients_wifi24 + node.clients_wifi5) {
+ mode = 1;
+ ctx.fill();
+ ctx.beginPath();
+ ctx.fillStyle = config.client.wifi5;
+ } else if (mode === 0 && i >= node.clients_wifi24) {
+ mode = 2;
+ ctx.fill();
+ ctx.beginPath();
+ ctx.fillStyle = config.client.other;
}
+ var angle = ((2 * Math.PI) / n) * j;
+ var x = p.x + distance * Math.cos(angle + startAngle);
+ var y = p.y + distance * Math.sin(angle + startAngle);
+
+ ctx.moveTo(x, y);
+ ctx.arc(x, y, radius, 0, 2 * Math.PI);
}
- ctx.fill();
- },
- fullscreen: function fullscreen(btn) {
- if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement) {
- var fel = document.firstElementChild;
- var func = fel.requestFullscreen
- || fel.webkitRequestFullScreen
- || fel.mozRequestFullScreen;
- func.call(fel);
- btn.classList.remove('ion-full-enter');
- btn.classList.add('ion-full-exit');
- } else {
- func = document.exitFullscreen
- || document.webkitExitFullscreen
- || document.mozCancelFullScreen;
- if (func) {
- func.call(document);
- btn.classList.remove('ion-full-exit');
- btn.classList.add('ion-full-enter');
- }
+ }
+ ctx.fill();
+};
+
+export const fullscreen = function fullscreen(btn) {
+ if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement) {
+ var fel = document.firstElementChild;
+ var func = fel.requestFullscreen || fel.webkitRequestFullScreen || fel.mozRequestFullScreen;
+ func.call(fel);
+ btn.classList.remove("ion-full-enter");
+ btn.classList.add("ion-full-exit");
+ } else {
+ func = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen;
+ if (func) {
+ func.call(document);
+ btn.classList.remove("ion-full-exit");
+ btn.classList.add("ion-full-enter");
}
- },
- escape: function escape(string) {
- return string.replace(//g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''');
}
-});
+};
+
+export const escape = function escape(string) {
+ return string.replace(//g, ">").replace(/"/g, """).replace(/'/g, "'");
+};
diff --git a/lib/utils/language.js b/lib/utils/language.js
index 3e72b1ab..9e9a7e64 100644
--- a/lib/utils/language.js
+++ b/lib/utils/language.js
@@ -1,70 +1,72 @@
-define(['polyglot', 'moment', 'helper'], function (Polyglot, moment, helper) {
- 'use strict';
- return function () {
- var router;
+import moment from "moment";
+import * as helper from "./helper";
+import Polyglot from "node-polyglot";
- function languageSelect(el) {
- var select = document.createElement('select');
- select.className = 'language-switch';
- select.setAttribute('aria-label', 'Language');
- select.addEventListener('change', setSelectLocale);
- el.appendChild(select);
+export const Language = function () {
+ var router;
- // Keep english
- select.innerHTML = 'Language ';
- for (var i = 0; i < config.supportedLocale.length; i++) {
- select.innerHTML += '' + config.supportedLocale[i] + ' ';
- }
- }
+ function languageSelect(el) {
+ var select = document.createElement("select");
+ select.className = "language-switch";
+ select.setAttribute("aria-label", "Language");
+ select.addEventListener("change", setSelectLocale);
+ el.appendChild(select);
- function setSelectLocale(event) {
- router.fullUrl({ lang: event.target.value }, false, true);
- }
-
- function getLocale(input) {
- var language = input || navigator.languages && navigator.languages[0] || navigator.language;
- var locale = config.supportedLocale[0];
- config.supportedLocale.some(function (item) {
- if (language.indexOf(item) !== -1) {
- locale = item;
- return true;
- }
- return false;
- });
- return locale;
+ // Keep english
+ select.innerHTML = "Language ";
+ for (var i = 0; i < config.supportedLocale.length; i++) {
+ select.innerHTML +=
+ '' + config.supportedLocale[i] + " ";
}
+ }
- function setTranslation(json) {
- _.extend(json);
+ function setSelectLocale(event) {
+ router.fullUrl({ lang: event.target.value }, false, true);
+ }
- if (moment.locale(_.locale()) !== _.locale()) {
- moment.defineLocale(_.locale(), {
- longDateFormat: {
- LT: 'HH:mm',
- LTS: 'HH:mm:ss',
- L: 'DD.MM.YYYY',
- LL: 'D. MMMM YYYY',
- LLL: 'D. MMMM YYYY HH:mm',
- LLLL: 'dddd, D. MMMM YYYY HH:mm'
- },
- calendar: json.momentjs.calendar,
- relativeTime: json.momentjs.relativeTime
- });
+ function getLocale(input) {
+ var language = input || (navigator.languages && navigator.languages[0]) || navigator.language;
+ var locale = config.supportedLocale[0];
+ config.supportedLocale.some(function (item) {
+ if (language.indexOf(item) !== -1) {
+ locale = item;
+ return true;
}
- }
+ return false;
+ });
+ return locale;
+ }
+
+ function setTranslation(json) {
+ _.extend(json);
- function init(r) {
- router = r;
- /** global: _ */
- window._ = new Polyglot({ locale: getLocale(router.getLang()), allowMissing: true });
- helper.getJSON('locale/' + _.locale() + '.json?' + config.cacheBreaker).then(setTranslation);
- document.querySelector('html').setAttribute('lang', _.locale());
+ if (moment.locale(_.locale()) !== _.locale()) {
+ moment.defineLocale(_.locale(), {
+ longDateFormat: {
+ LT: "HH:mm",
+ LTS: "HH:mm:ss",
+ L: "DD.MM.YYYY",
+ LL: "D. MMMM YYYY",
+ LLL: "D. MMMM YYYY HH:mm",
+ LLLL: "dddd, D. MMMM YYYY HH:mm",
+ },
+ calendar: json.momentjs.calendar,
+ relativeTime: json.momentjs.relativeTime,
+ });
}
+ }
+
+ function init(r) {
+ router = r;
+ /** global: _ */
+ window._ = new Polyglot({ locale: getLocale(router.getLang()), allowMissing: true });
+ helper.getJSON("locale/" + _.locale() + ".json?" + config.cacheBreaker).then(setTranslation);
+ document.querySelector("html").setAttribute("lang", _.locale());
+ }
- return {
- init: init,
- getLocale: getLocale,
- languageSelect: languageSelect
- };
+ return {
+ init: init,
+ getLocale: getLocale,
+ languageSelect: languageSelect,
};
-});
+};
diff --git a/lib/utils/math.js b/lib/utils/math.js
index 32e2eb2d..ce6f4b86 100644
--- a/lib/utils/math.js
+++ b/lib/utils/math.js
@@ -1,31 +1,29 @@
-define(function () {
- var self = {};
+var self = {};
- self.distance = function distance(a, b) {
- return (a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y);
- };
+self.distance = function distance(a, b) {
+ return (a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y);
+};
- self.distancePoint = function distancePoint(a, b) {
- return Math.sqrt(self.distance(a, b));
- };
+self.distancePoint = function distancePoint(a, b) {
+ return Math.sqrt(self.distance(a, b));
+};
- self.distanceLink = function distanceLink(p, a, b) {
- /* http://stackoverflow.com/questions/849211 */
- var l2 = self.distance(a, b);
- if (l2 === 0) {
- return self.distance(p, a);
- }
- var t = ((p.x - a.x) * (b.x - a.x) + (p.y - a.y) * (b.y - a.y)) / l2;
- if (t < 0) {
- return self.distance(p, a);
- } else if (t > 1) {
- return self.distance(p, b);
- }
- return self.distancePoint(p, {
- x: a.x + t * (b.x - a.x),
- y: a.y + t * (b.y - a.y)
- });
- };
+self.distanceLink = function distanceLink(p, a, b) {
+ /* http://stackoverflow.com/questions/849211 */
+ var l2 = self.distance(a, b);
+ if (l2 === 0) {
+ return self.distance(p, a);
+ }
+ var t = ((p.x - a.x) * (b.x - a.x) + (p.y - a.y) * (b.y - a.y)) / l2;
+ if (t < 0) {
+ return self.distance(p, a);
+ } else if (t > 1) {
+ return self.distance(p, b);
+ }
+ return self.distancePoint(p, {
+ x: a.x + t * (b.x - a.x),
+ y: a.y + t * (b.y - a.y),
+ });
+};
- return self;
-});
+export default self;
diff --git a/lib/utils/node.js b/lib/utils/node.js
index 6f8a229b..3ceae8ec 100644
--- a/lib/utils/node.js
+++ b/lib/utils/node.js
@@ -1,161 +1,156 @@
-define(['snabbdom', 'helper', 'moment'], function (V, helper, moment) {
- 'use strict';
- V = V.default;
-
- var self = {};
-
- function showBar(v, width, warning) {
- return V.h('span',
- { props: { className: 'bar' + (warning ? ' warning' : '') } },
- [
- V.h('span',
- {
- style: { width: (width * 100) + '%' }
- }),
- V.h('label', v)
- ]
- );
+import V from "snabbdom/dist/snabbdom-patch";
+import moment from "moment";
+
+import * as helper from "./helper";
+
+var self = {};
+
+function showBar(v, width, warning) {
+ return V.h("span", { props: { className: "bar" + (warning ? " warning" : "") } }, [
+ V.h("span", {
+ style: { width: width * 100 + "%" },
+ }),
+ V.h("label", v),
+ ]);
+}
+
+self.showStatus = function showStatus(d) {
+ return V.h(
+ "td",
+ { props: { className: d.is_online ? "online" : "offline" } },
+ _.t(d.is_online ? "node.lastOnline" : "node.lastOffline", {
+ time: d.lastseen.fromNow(),
+ date: d.lastseen.format("DD.MM.YYYY, H:mm:ss"),
+ }),
+ );
+};
+
+self.showGeoURI = function showGeoURI(d) {
+ if (!helper.hasLocation(d)) {
+ return undefined;
}
- self.showStatus = function showStatus(d) {
- return V.h('td',
- { props: { className: d.is_online ? 'online' : 'offline' } },
- _.t((d.is_online ? 'node.lastOnline' : 'node.lastOffline'), {
- time: d.lastseen.fromNow(),
- date: d.lastseen.format('DD.MM.YYYY, H:mm:ss')
- }));
- };
-
- self.showGeoURI = function showGeoURI(d) {
- if (!helper.hasLocation(d)) {
- return undefined;
- }
-
- return V.h('td',
- V.h('a',
- { props: { href: 'geo:' + d.location.latitude + ',' + d.location.longitude } },
- Number(d.location.latitude.toFixed(6)) + ', ' + Number(d.location.longitude.toFixed(6))
- )
- );
- };
-
- self.showGateway = function showGateway(d) {
- return d.is_gateway ? _.t('yes') : undefined;
- };
-
- self.showFirmware = function showFirmware(d) {
- return [
- helper.dictGet(d, ['firmware', 'release']),
- helper.dictGet(d, ['firmware', 'base'])
- ].filter(function (n) {
- return n !== null;
- }).join(' / ') || undefined;
- };
-
- self.showUptime = function showUptime(d) {
- return moment.utc(d.uptime).local().fromNow(true);
- };
-
- self.showFirstSeen = function showFirstSeen(d) {
- return d.firstseen.fromNow(true);
- };
-
- self.showLoad = function showLoad(d) {
- return showBar(d.loadavg.toFixed(2), d.loadavg / (d.nproc || 1), d.loadavg >= d.nproc);
- };
-
- self.showRAM = function showRAM(d) {
- return showBar(Math.round(d.memory_usage * 100) + ' %', d.memory_usage, d.memory_usage >= 0.8);
- };
-
- self.showDomain = function showDomain(d) {
- var rt = d.domain;
- if (config.domainNames) {
- config.domainNames.some(function (t) {
- if (rt === t.domain) {
- rt = t.name;
- return true;
- }
- });
- }
- return rt;
- };
-
- self.countLocalClients = function countLocalClients(d, visited = {}) {
- if (d.node_id in visited) return 0;
- visited[d.node_id] = 1;
-
- var count = d.clients || 0;
- d.neighbours.forEach(function (n) {
- if (n.link.type === 'vpn') return;
- count += self.countLocalClients(n.node, visited);
+ return V.h(
+ "td",
+ V.h(
+ "a",
+ { props: { href: "geo:" + d.location.latitude + "," + d.location.longitude } },
+ Number(d.location.latitude.toFixed(6)) + ", " + Number(d.location.longitude.toFixed(6)),
+ ),
+ );
+};
+
+self.showGateway = function showGateway(d) {
+ return d.is_gateway ? _.t("yes") : undefined;
+};
+
+self.showFirmware = function showFirmware(d) {
+ return (
+ [helper.dictGet(d, ["firmware", "release"]), helper.dictGet(d, ["firmware", "base"])]
+ .filter(function (n) {
+ return n !== null;
+ })
+ .join(" / ") || undefined
+ );
+};
+
+self.showUptime = function showUptime(d) {
+ return moment.utc(d.uptime).local().fromNow(true);
+};
+
+self.showFirstSeen = function showFirstSeen(d) {
+ return d.firstseen.fromNow(true);
+};
+
+self.showLoad = function showLoad(d) {
+ return showBar(d.loadavg.toFixed(2), d.loadavg / (d.nproc || 1), d.loadavg >= d.nproc);
+};
+
+self.showRAM = function showRAM(d) {
+ return showBar(Math.round(d.memory_usage * 100) + " %", d.memory_usage, d.memory_usage >= 0.8);
+};
+
+self.showDomain = function showDomain(d) {
+ var rt = d.domain;
+ if (config.domainNames) {
+ config.domainNames.some(function (t) {
+ if (rt === t.domain) {
+ rt = t.name;
+ return true;
+ }
});
- return count;
- };
-
- self.showClients = function showClients(d) {
- if (!d.is_online) {
- return undefined;
+ }
+ return rt;
+};
+
+self.countLocalClients = function countLocalClients(d, visited = {}) {
+ if (d.node_id in visited) return 0;
+ visited[d.node_id] = 1;
+
+ var count = d.clients || 0;
+ d.neighbours.forEach(function (n) {
+ if (n.link.type === "vpn") return;
+ count += self.countLocalClients(n.node, visited);
+ });
+ return count;
+};
+
+self.showClients = function showClients(d) {
+ if (!d.is_online) {
+ return undefined;
+ }
+ var localClients = self.countLocalClients(d);
+
+ var clients = [
+ V.h("span", [
+ d.clients > 0 ? d.clients : _.t("none"),
+ V.h("br"),
+ V.h("i", { props: { className: "ion-people", title: _.t("node.clients") } }),
+ ]),
+ V.h("span", { props: { className: "legend-24ghz" } }, [
+ d.clients_wifi24,
+ V.h("br"),
+ V.h("span", { props: { className: "symbol", title: "2,4 GHz" } }),
+ ]),
+ V.h("span", { props: { className: "legend-5ghz" } }, [
+ d.clients_wifi5,
+ V.h("br"),
+ V.h("span", { props: { className: "symbol", title: "5 GHz" } }),
+ ]),
+ V.h("span", { props: { className: "legend-others" } }, [
+ d.clients_other,
+ V.h("br"),
+ V.h("span", { props: { className: "symbol", title: _.t("others") } }),
+ ]),
+ V.h("span", [
+ localClients > 0 ? localClients : _.t("none"),
+ V.h("br"),
+ V.h("i", { props: { className: "ion-share-alt", title: _.t("node.localClients") } }),
+ ]),
+ ];
+ return V.h("td", { props: { className: "clients" } }, clients);
+};
+
+self.showIPs = function showIPs(d) {
+ var string = [];
+ var ips = d.addresses;
+ ips.sort();
+ ips.forEach(function (ip, i) {
+ if (i > 0) {
+ string.push(V.h("br"));
}
- var localClients = self.countLocalClients(d);
-
- var clients = [
- V.h('span', [
- d.clients > 0 ? d.clients : _.t('none'),
- V.h('br'),
- V.h('i', { props: { className: 'ion-people', title: _.t('node.clients') } })
- ]),
- V.h('span',
- { props: { className: 'legend-24ghz' } },
- [
- d.clients_wifi24,
- V.h('br'),
- V.h('span', { props: { className: 'symbol', title: '2,4 GHz' } })
- ]),
- V.h('span',
- { props: { className: 'legend-5ghz' } },
- [
- d.clients_wifi5,
- V.h('br'),
- V.h('span', { props: { className: 'symbol', title: '5 GHz' } })
- ]),
- V.h('span',
- { props: { className: 'legend-others' } },
- [
- d.clients_other,
- V.h('br'),
- V.h('span', { props: { className: 'symbol', title: _.t('others') } })
- ]),
- V.h('span', [
- localClients > 0 ? localClients : _.t('none'),
- V.h('br'),
- V.h('i', { props: { className: 'ion-share-alt', title: _.t('node.localClients') } })
- ])
- ];
- return V.h('td', { props: { className: 'clients' } }, clients);
- };
-
- self.showIPs = function showIPs(d) {
- var string = [];
- var ips = d.addresses;
- ips.sort();
- ips.forEach(function (ip, i) {
- if (i > 0) {
- string.push(V.h('br'));
- }
- if (ip.indexOf('fe80:') !== 0) {
- string.push(V.h('a', { props: { href: 'http://[' + ip + ']/', target: '_blank' } }, ip));
- } else {
- string.push(ip);
- }
- });
- return V.h('td', string);
- };
+ if (ip.indexOf("fe80:") !== 0) {
+ string.push(V.h("a", { props: { href: "http://[" + ip + "]/", target: "_blank" } }, ip));
+ } else {
+ string.push(ip);
+ }
+ });
+ return V.h("td", string);
+};
- self.showAutoupdate = function showAutoupdate(d) {
- return d.autoupdater.enabled ? _.t('node.activated', { branch: d.autoupdater.branch }) : _.t('node.deactivated');
- };
+self.showAutoupdate = function showAutoupdate(d) {
+ return d.autoupdater.enabled ? _.t("node.activated", { branch: d.autoupdater.branch }) : _.t("node.deactivated");
+};
- return self;
-});
+export default self;
diff --git a/lib/utils/router.js b/lib/utils/router.js
index e35bf96e..6a746862 100644
--- a/lib/utils/router.js
+++ b/lib/utils/router.js
@@ -1,150 +1,151 @@
-define(['Navigo'], function (Navigo) {
- 'use strict';
-
- return function (language) {
- var init = false;
- var objects = {};
- var targets = [];
- var views = {};
- var current = {};
- var state = { lang: language.getLocale(), view: 'map' };
-
- function resetView() {
+import Navigo from "navigo";
+
+export const Router = function (language) {
+ var init = false;
+ var objects = {};
+ var targets = [];
+ var views = {};
+ var current = {};
+ var state = { lang: language.getLocale(), view: "map" };
+
+ function resetView() {
+ targets.forEach(function (t) {
+ t.resetView();
+ });
+ }
+
+ function gotoNode(d) {
+ if (objects.nodeDict[d.nodeId]) {
targets.forEach(function (t) {
- t.resetView();
+ t.gotoNode(objects.nodeDict[d.nodeId], objects.nodeDict);
});
}
+ }
- function gotoNode(d) {
- if (objects.nodeDict[d.nodeId]) {
- targets.forEach(function (t) {
- t.gotoNode(objects.nodeDict[d.nodeId], objects.nodeDict);
- });
- }
- }
-
- function gotoLink(d) {
- var link = objects.links.filter(function (value) {
- return value.id === d.linkId;
+ function gotoLink(d) {
+ var link = objects.links.filter(function (value) {
+ return value.id === d.linkId;
+ });
+ if (link) {
+ targets.forEach(function (t) {
+ t.gotoLink(link);
});
- if (link) {
- targets.forEach(function (t) {
- t.gotoLink(link);
- });
- }
}
+ }
- function view(d) {
- if (d.view in views) {
- views[d.view]();
- state.view = d.view;
- resetView();
- }
+ function view(d) {
+ if (d.view in views) {
+ views[d.view]();
+ state.view = d.view;
+ resetView();
}
+ }
+
+ function customRoute(lang, viewValue, node, link, zoom, lat, lng) {
+ current = {
+ lang: lang,
+ view: viewValue,
+ node: node,
+ link: link,
+ zoom: zoom,
+ lat: lat,
+ lng: lng,
+ };
- function customRoute(lang, viewValue, node, link, zoom, lat, lng) {
- current = {
- lang: lang,
- view: viewValue,
- node: node,
- link: link,
- zoom: zoom,
- lat: lat,
- lng: lng
- };
-
- if (lang && lang !== state.lang && lang === language.getLocale(lang)) {
- location.reload();
- }
-
- if (!init || viewValue && viewValue !== state.view) {
- if (!viewValue) {
- viewValue = state.view;
- }
- view({ view: viewValue });
- init = true;
- }
+ if (lang && lang !== state.lang && lang === language.getLocale(lang)) {
+ location.reload();
+ }
- if (node) {
- gotoNode({ nodeId: node });
- } else if (link) {
- gotoLink({ linkId: link });
- } else if (lat) {
- targets.forEach(function (t) {
- t.gotoLocation({
- zoom: parseInt(zoom, 10),
- lat: parseFloat(lat),
- lng: parseFloat(lng)
- });
- });
- } else {
- resetView();
+ if (!init || (viewValue && viewValue !== state.view)) {
+ if (!viewValue) {
+ viewValue = state.view;
}
+ view({ view: viewValue });
+ init = true;
}
- var router = new Navigo(null, true, '#!');
-
- router
- .on(/^\/?#?!?\/([\w]{2})?\/?(map|graph)?\/?([a-f\d]{12})?([a-f\d\-]{25})?\/?(?:(\d+)\/(-?[\d.]+)\/(-?[\d.]+))?$/, customRoute)
- .on({
- '*': function () {
- router.fullUrl();
- }
+ if (node) {
+ gotoNode({ nodeId: node });
+ } else if (link) {
+ gotoLink({ linkId: link });
+ } else if (lat) {
+ targets.forEach(function (t) {
+ t.gotoLocation({
+ zoom: parseInt(zoom, 10),
+ lat: parseFloat(lat),
+ lng: parseFloat(lng),
+ });
});
+ } else {
+ resetView();
+ }
+ }
+
+ var router = new Navigo(null, true, "#!");
+
+ router
+ .on(
+ /^\/?#?!?\/([\w]{2})?\/?(map|graph)?\/?([a-f\d]{12})?([a-f\d\-]{25})?\/?(?:(\d+)\/(-?[\d.]+)\/(-?[\d.]+))?$/,
+ customRoute,
+ )
+ .on({
+ "*": function () {
+ router.fullUrl();
+ },
+ });
+
+ router.generateLink = function generateLink(data, full, deep) {
+ var result = "#!";
+
+ if (full) {
+ data = Object.assign({}, state, data);
+ } else if (deep) {
+ data = Object.assign({}, current, data);
+ }
- router.generateLink = function generateLink(data, full, deep) {
- var result = '#!';
-
- if (full) {
- data = Object.assign({}, state, data);
- } else if (deep) {
- data = Object.assign({}, current, data);
- }
-
- for (var key in data) {
- if (!data.hasOwnProperty(key) || data[key] === undefined) {
- continue;
- }
- result += '/' + data[key];
+ for (var key in data) {
+ if (!data.hasOwnProperty(key) || data[key] === undefined) {
+ continue;
}
+ result += "/" + data[key];
+ }
- return result;
- };
-
- router.fullUrl = function fullUrl(data, e, deep) {
- if (e) {
- e.preventDefault();
- }
- router.navigate(router.generateLink(data, !deep, deep));
- };
+ return result;
+ };
- router.getLang = function getLang() {
- var lang = location.hash.match(/^\/?#!?\/([\w]{2})\//);
- if (lang) {
- state.lang = language.getLocale(lang[1]);
- return lang[1];
- }
- return null;
- };
+ router.fullUrl = function fullUrl(data, e, deep) {
+ if (e) {
+ e.preventDefault();
+ }
+ router.navigate(router.generateLink(data, !deep, deep));
+ };
- router.addTarget = function addTarget(d) {
- targets.push(d);
- };
+ router.getLang = function getLang() {
+ var lang = location.hash.match(/^\/?#!?\/([\w]{2})\//);
+ if (lang) {
+ state.lang = language.getLocale(lang[1]);
+ return lang[1];
+ }
+ return null;
+ };
- router.removeTarget = function removeTarget(d) {
- targets = targets.filter(function (e) {
- return d !== e;
- });
- };
+ router.addTarget = function addTarget(d) {
+ targets.push(d);
+ };
- router.addView = function addView(k, d) {
- views[k] = d;
- };
+ router.removeTarget = function removeTarget(d) {
+ targets = targets.filter(function (e) {
+ return d !== e;
+ });
+ };
- router.setData = function setData(data) {
- objects = data;
- };
+ router.addView = function addView(k, d) {
+ views[k] = d;
+ };
- return router;
+ router.setData = function setData(data) {
+ objects = data;
};
-});
+
+ return router;
+};
diff --git a/lib/utils/version.js b/lib/utils/version.js
index 32fe7920..59863425 100644
--- a/lib/utils/version.js
+++ b/lib/utils/version.js
@@ -1,99 +1,94 @@
-define(function () {
- 'use strict';
+const Version = function (v) {
+ var version = /^[a-zA-Z]?([0-9]*(?=:))?:(.*)/.exec(v);
+ this.epoch = version ? version[1] : 0;
+ version = version && version[2] ? version[2] : v;
+ version = version.split("-");
+ this.debian = version.length > 1 ? version.pop() : "";
+ this.upstream = version.join("-");
+};
- /*
- reimplate after node-deb-version-compare under MIT
- (https://github.com/sdumetz/node-deb-version-compare)
- */
-
- function Version(v) {
- var version = /^[a-zA-Z]?([0-9]*(?=:))?:(.*)/.exec(v);
- this.epoch = (version) ? version[1] : 0;
- version = (version && version[2]) ? version[2] : v;
- version = version.split('-');
- this.debian = (version.length > 1) ? version.pop() : '';
- this.upstream = version.join('-');
+Version.prototype.compare = function (b) {
+ if ((this.epoch > 0 || b.epoch > 0) && Math.sign(this.epoch - b.epoch) !== 0) {
+ return Math.sign(this.epoch - b.epoch);
+ }
+ if (this.compareStrings(this.upstream, b.upstream) !== 0) {
+ return this.compareStrings(this.upstream, b.upstream);
}
+ return this.compareStrings(this.debian, b.debian);
+};
- Version.prototype.compare = function (b) {
- if ((this.epoch > 0 || b.epoch > 0) && Math.sign(this.epoch - b.epoch) !== 0) {
- return Math.sign(this.epoch - b.epoch);
- }
- if (this.compareStrings(this.upstream, b.upstream) !== 0) {
- return this.compareStrings(this.upstream, b.upstream);
- }
- return this.compareStrings(this.debian, b.debian);
- };
+Version.prototype.charCode = function (c) {
+ // the lower the charcode the lower the version.
+ // if (c === '~') {return 0;} // tilde sort before anything
+ // else
+ if (/[a-zA-Z]/.test(c)) {
+ return c.charCodeAt(0) - "A".charCodeAt(0) + 1;
+ } else if (/[.:+-:]/.test(c)) {
+ return c.charCodeAt(0) + "z".charCodeAt(0) + 1;
+ } // charcodes are 46..58
+ return 0;
+};
- Version.prototype.charCode = function (c) { // the lower the charcode the lower the version.
- // if (c === '~') {return 0;} // tilde sort before anything
- // else
- if (/[a-zA-Z]/.test(c)) {
- return c.charCodeAt(0) - 'A'.charCodeAt(0) + 1;
- } else if (/[.:+-:]/.test(c)) {
- return c.charCodeAt(0) + 'z'.charCodeAt(0) + 1;
- } // charcodes are 46..58
- return 0;
- };
-
- // find index of "val" in "ar".
- Version.prototype.findIndex = function (ar, fn) {
- for (var i = 0; i < ar.length; i++) {
- if (fn(ar[i], i)) {
- return i;
- }
+// find index of "val" in "ar".
+Version.prototype.findIndex = function (ar, fn) {
+ for (var i = 0; i < ar.length; i++) {
+ if (fn(ar[i], i)) {
+ return i;
}
- return -1;
- };
+ }
+ return -1;
+};
- Version.prototype.compareChunk = function (a, b) {
- var ca = a.split('');
- var cb = b.split('');
- var diff = this.findIndex(ca, function (c, index) {
- return !(cb[index] && c === cb[index]);
- });
- if (diff === -1) {
- if (cb.length > ca.length) {
- if (cb[ca.length] === '~') {
- return 1;
- }
- return -1;
+Version.prototype.compareChunk = function (a, b) {
+ var ca = a.split("");
+ var cb = b.split("");
+ var diff = this.findIndex(ca, function (c, index) {
+ return !(cb[index] && c === cb[index]);
+ });
+ if (diff === -1) {
+ if (cb.length > ca.length) {
+ if (cb[ca.length] === "~") {
+ return 1;
}
- return 0; // no diff found and same length
- } else if (!cb[diff]) {
- return (ca[diff] === '~') ? -1 : 1;
+ return -1;
}
- return (this.charCode(ca[diff]) > this.charCode(cb[diff])) ? 1 : -1;
- };
+ return 0; // no diff found and same length
+ } else if (!cb[diff]) {
+ return ca[diff] === "~" ? -1 : 1;
+ }
+ return this.charCode(ca[diff]) > this.charCode(cb[diff]) ? 1 : -1;
+};
- Version.prototype.compareStrings = function (a, b) {
- if (a === b) {
- return 0;
- }
- var parseA = /([^0-9]+|[0-9]+)/g;
- var parseB = /([^0-9]+|[0-9]+)/g;
- var ra = parseA.exec(a);
- var rb = parseB.exec(b);
- while (ra !== null && rb !== null) {
- if ((isNaN(ra[1]) || isNaN(rb[1])) && ra[1] !== rb[1]) { // a or b is not a number and they're not equal. Note : "" IS a number so both null is impossible
- return this.compareChunk(ra[1], rb[1]);
- } // both are numbers
- if (ra[1] !== rb[1]) {
- return (parseInt(ra[1], 10) > parseInt(rb[1], 10)) ? 1 : -1;
- }
- ra = parseA.exec(a);
- rb = parseB.exec(b);
- }
- if (!ra && rb) { // rb doesn't get exec-ed when ra == null
- return (rb.length > 0 && rb[1].split('')[0] === '~') ? 1 : -1;
- } else if (ra && !rb) {
- return (ra[1].split('')[0] === '~') ? -1 : 1;
- }
+Version.prototype.compareStrings = function (a, b) {
+ if (a === b) {
return 0;
- };
- return function compare(a, b) {
- var va = new Version(a[0]);
- var vb = new Version(b[0]);
- return vb.compare(va);
- };
-});
+ }
+ var parseA = /([^0-9]+|[0-9]+)/g;
+ var parseB = /([^0-9]+|[0-9]+)/g;
+ var ra = parseA.exec(a);
+ var rb = parseB.exec(b);
+ while (ra !== null && rb !== null) {
+ if ((isNaN(ra[1]) || isNaN(rb[1])) && ra[1] !== rb[1]) {
+ // a or b is not a number and they're not equal. Note : "" IS a number so both null is impossible
+ return this.compareChunk(ra[1], rb[1]);
+ } // both are numbers
+ if (ra[1] !== rb[1]) {
+ return parseInt(ra[1], 10) > parseInt(rb[1], 10) ? 1 : -1;
+ }
+ ra = parseA.exec(a);
+ rb = parseB.exec(b);
+ }
+ if (!ra && rb) {
+ // rb doesn't get exec-ed when ra == null
+ return rb.length > 0 && rb[1].split("")[0] === "~" ? 1 : -1;
+ } else if (ra && !rb) {
+ return ra[1].split("")[0] === "~" ? -1 : 1;
+ }
+ return 0;
+};
+
+export const compare = (a, b) => {
+ var va = new Version(a[0]);
+ var vb = new Version(b[0]);
+ return vb.compare(va);
+};
diff --git a/offline.html b/offline.html
new file mode 100644
index 00000000..90b1d1fb
--- /dev/null
+++ b/offline.html
@@ -0,0 +1,31 @@
+
+
+
+ Meshviewer Loading
+
+
+ You are Offline!Try to reload
+
+ JavaScript required
+
+
- 
+