Issue makiert

Ide Fix Merge

See merge request julscha/sectorfileupdater!8

.gitlab-ci.yml

@@ -0,0 +1,32 @@
+version: 2.1
+jobs:
+  build:
+    working_directory: ~/repo
+    docker:
+      - image: circleci/node:11
+    steps:
+      - checkout
+      - run:
+          name: Update NPM
+          command: "sudo npm install -g npm"
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: Install Dependencies
+          command: npm install
+      - run:
+          name: Install dpkg and fakeroot
+          command: |
+            sudo apt-get update -y
+            sudo apt-get install -y dpkg fakeroot
+
+      - save_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+          paths:
+            - ./node_modules
+      - run:
+          name: Generate Builds
+          command: npm run make
+
+      - store_artifacts:
+          path: ~/repo/out/make

README.md

@@ -1,7 +1,41 @@
 # Sectorfile Updater
+Dieses kleine Tool soll GNG Sector Müll beheben. Leider beschäftigt sich jeder, jeden beschissenen AIRAC Cycle Monat damit, seine Daten neuaufzusetzten und wieder alle Daten einzutragen. So nicht, dachte sich eines Tages PaBr und Herr Schalli war sofort dabei. Sie sagten: "Wir machen diesen Fuck nicht mehr mit" und entwickelten in ewigen Nächsten diese Problemlösung.
 
-## TO DO
-- ...
+## Programmschritte:
 
-## Done
-- ...
+* Select ES Folder
+* Version herausfinden / eingeben
+* Updates prüfen (file from Server mit Update Möglichkeiten) bspw (vonVersion-nachVersion):
+  * 2207-2201
+  * 2207-2202
+  * 2207-2203
+  * 2207-2204
+  * 2207-2205
+  * 2207-2206
+* Update herunterladen und enpacken
+  * Hierbei werden neue und modifizierte Dateien verändert. (Erkannt wird das vorab mit einem Server script, welches die Fullpackes vergleicht und mittels git vergleicht. Einschränkung hier --diff-filter=ACRTUXBD)
+  * Inline, wie bei Git ist hier nicht möglich, da nicht git vorrausgesetzt werden kann auf dem Zielcomputer
+* _Optional_: Alte Dateien können gelöscht werden. Hauptsächlich betrifft das Sectorfiles sowie alte config Dateien von Plugins
+
+## Technische Herausfoderungen:
+* Electron APP (Multiplatform Support (theorie, da ES nur auf Windows läuft))
+* Namenskonvention in html, css & js:
+  * Camelcase (https://en.wikipedia.org/wiki/Camel_case)
+* Bash Scripting
+
+## ToDo:
+* Folder Selector
+* Version Selector
+* Input User Variable Save to txt/json/yaml file
+* UI
+* unzip
+* delete old non used files Option
+
+## Done:
+* Download
+* Progressbar Download
+
+## Quellen:
+* Midjourney AI: https://www.midjourney.com/
+* OpenAI: ChatGPT: https://chat.openai.com/
+* GitHub Copilot: https://github.com/features/copilot

git-commit.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# $1 = Changes
+# $2 = Branch
+
+git add .
+git commit -m "$1"
+git push -uf origin paul-bastelt
+#git push -uf paulgit paul-bastelt

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "sectorfileupdater",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

updater/.gitignore

@@ -1,3 +1,7 @@
+# Programm JSON files
+systemfile.json
+settings.json
+
 # Logs
 logs
 *.log

updater/.gitlab/actions/release/action.yml

@@ -0,0 +1,61 @@
+name: Electron Builder Action
+author: Samuel Meuli
+description: GitHub Action for building and releasing Electron apps
+
+inputs:
+  github_token:
+    description: GitHub authentication token
+    required: true
+  mac_certs:
+    description: Base64-encoded code signing certificate for macOS
+    required: false
+  mac_certs_password:
+    description: Password for decrypting `mac_certs`
+    required: false
+  release:
+    description: Whether the app should be released after a successful build
+    required: false
+    default: false
+  windows_certs:
+    description: Base64-encoded code signing certificate for Windows
+    required: false
+  windows_certs_password:
+    description: Password for decrypting `windows_certs`
+    required: false
+  package_root:
+    description: Directory where NPM/Yarn commands should be run
+    required: false
+    default: "."
+  build_script_name:
+    description: Name of the optional NPM build script which is executed before `electron-builder`
+    required: false
+    default: build
+  skip_build:
+    description: Whether the action should execute the NPM build script before running `electron-builder`
+    required: false
+    default: false
+  use_vue_cli:
+    description: Whether to run `electron-builder` using the Vue CLI plugin instead of calling the command directly
+    required: false
+    default: false
+  args:
+    description: Other arguments to pass to the `electron-builder` command, e.g. configuration overrides
+    required: false
+    default: ""
+  max_attempts:
+    description: Maximum number of attempts for completing the build and release step
+    required: false
+    default: "1"
+
+  # Deprecated
+  app_root:
+    description: Directory where `electron-builder` commands should be run
+    required: false
+
+runs:
+  using: node12
+  main: index.js
+
+branding:
+  icon: upload-cloud
+  color: blue

updater/.gitlab/actions/release/index.js

@@ -0,0 +1,156 @@
+const { execSync } = require("child_process");
+const { existsSync, readFileSync } = require("fs");
+const { join } = require("path");
+
+/**
+ * Logs to the console
+ */
+const log = (msg) => console.log(`\n${msg}`); // eslint-disable-line no-console
+
+/**
+ * Exits the current process with an error code and message
+ */
+const exit = (msg) => {
+    console.error(msg);
+    process.exit(1);
+};
+
+/**
+ * Executes the provided shell command and redirects stdout/stderr to the console
+ */
+const run = (cmd, cwd) => execSync(cmd, { encoding: "utf8", stdio: "inherit", cwd });
+
+/**
+ * Determines the current operating system (one of ["mac", "windows", "linux"])
+ */
+const getPlatform = () => {
+    switch (process.platform) {
+        case "darwin":
+            return "mac";
+        case "win32":
+            return "windows";
+        default:
+            return "linux";
+    }
+};
+
+/**
+ * Returns the value for an environment variable (or `null` if it's not defined)
+ */
+const getEnv = (name) => process.env[name.toUpperCase()] || null;
+
+/**
+ * Sets the specified env variable if the value isn't empty
+ */
+const setEnv = (name, value) => {
+    if (value) {
+        process.env[name.toUpperCase()] = value.toString();
+    }
+};
+
+/**
+ * Returns the value for an input variable (or `null` if it's not defined). If the variable is
+ * required and doesn't have a value, abort the action
+ */
+const getInput = (name, required) => {
+    const value = getEnv(`INPUT_${name}`);
+    if (required && !value) {
+        exit(`"${name}" input variable is not defined`);
+    }
+    return value;
+};
+
+/**
+ * Installs NPM dependencies and builds/releases the Electron app
+ */
+const runAction = () => {
+    const platform = getPlatform();
+    const release = getInput("release", true) === "true";
+    const pkgRoot = getInput("package_root", true);
+    const buildScriptName = getInput("build_script_name", true);
+    const skipBuild = getInput("skip_build") === "true";
+    const useVueCli = getInput("use_vue_cli") === "true";
+    const args = getInput("args") || "";
+    const maxAttempts = Number(getInput("max_attempts") || "1");
+
+    // TODO: Deprecated option, remove in v2.0. `electron-builder` always requires a `package.json` in
+    // the same directory as the Electron app, so the `package_root` option should be used instead
+    const appRoot = getInput("app_root") || pkgRoot;
+
+    const pkgJsonPath = join(pkgRoot, "package.json");
+    const pkgLockPath = join(pkgRoot, "package-lock.json");
+
+    // Determine whether NPM should be used to run commands (instead of Yarn, which is the default)
+    const useNpm = existsSync(pkgLockPath);
+    log(`Will run ${useNpm ? "NPM" : "Yarn"} commands in directory "${pkgRoot}"`);
+
+    // Make sure `package.json` file exists
+    if (!existsSync(pkgJsonPath)) {
+        exit(`\`package.json\` file not found at path "${pkgJsonPath}"`);
+    }
+
+    // Copy "github_token" input variable to "GH_TOKEN" env variable (required by `electron-builder`)
+    setEnv("GH_TOKEN", getInput("github_token", true));
+
+    // Require code signing certificate and password if building for macOS. Export them to environment
+    // variables (required by `electron-builder`)
+    if (platform === "mac") {
+        const mac_certs = getInput("mac_certs");
+        const mac_certs_password = getInput("mac_certs_password");
+        if (mac_certs && mac_certs_password) {
+            setEnv("CSC_LINK", mac_certs);
+            setEnv("CSC_KEY_PASSWORD", mac_certs_password);
+        } else {
+            setEnv("CSC_IDENTITY_AUTO_DISCOVERY", "false");
+        }
+    } else if (platform === "windows") {
+        setEnv("CSC_LINK", getInput("windows_certs"));
+        setEnv("CSC_KEY_PASSWORD", getInput("windows_certs_password"));
+    }
+
+    // Disable console advertisements during install phase
+    setEnv("ADBLOCK", true);
+
+    // log(`Installing dependencies using ${useNpm ? "NPM" : "Yarn"}…`);
+    // run(useNpm ? "npm install" : "yarn", pkgRoot);
+
+    // Run NPM build script if it exists
+    if (skipBuild) {
+        log("Skipping build script because `skip_build` option is set");
+    } else {
+        log("Running the build script…");
+        if (useNpm) {
+            run(`npm run ${buildScriptName} --if-present`, pkgRoot);
+        } else {
+            // TODO: Use `yarn run ${buildScriptName} --if-present` once supported
+            // https://github.com/yarnpkg/yarn/issues/6894
+            const pkgJson = JSON.parse(readFileSync(pkgJsonPath, "utf8"));
+            if (pkgJson.scripts && pkgJson.scripts[buildScriptName]) {
+                run(`yarn run ${buildScriptName}`, pkgRoot);
+            }
+        }
+    }
+
+    log(`Building${release ? " and releasing" : ""} the Electron app…`);
+    const cmd = useVueCli ? "vue-cli-service electron:build" : `electron-builder`;
+    for (let i = 0; i < maxAttempts; i += 1) {
+        try {
+            run(
+                `${useNpm ? "npx --no-install" : "yarn run"} ${cmd} --${platform} ${
+					release ? "--publish always" : ""
+				} ${args}`,
+                appRoot,
+            );
+            break;
+        } catch (err) {
+            if (i < maxAttempts - 1) {
+                log(`Attempt ${i + 1} failed:`);
+                log(err);
+            } else {
+                throw err;
+            }
+        }
+    }
+};
+
+runAction();

updater/.gitlab/workflows/build.yml

@@ -0,0 +1,38 @@
+name: Build/release
+
+on: push
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v1
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+
+      - name: Installing dependencies
+        run: yarn
+
+      - name: Tsc
+        run: npx tsc
+
+      - name: Build/release Electron app
+        uses: ./.github/actions/release
+        with:
+          skip_build: false
+          # GitHub token, automatically provided to the action
+          # (No need to define this secret in the repo settings)
+          github_token: ${{ secrets.DEPLOY_TOKEN }}
+
+          # If the commit is tagged with a version (e.g. "v1.0.0"),
+          # release the app after building
+          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

updater/data-out.yaml

@@ -0,0 +1 @@
+{}

updater/package.json

@@ -1,58 +1,66 @@
 {
-  "name": "updater",
-  "productName": "updater",
-  "version": "1.0.0",
-  "description": "My Electron application description",
-  "main": "src/index.js",
-  "scripts": {
-    "start": "electron-forge start",
-    "package": "electron-forge package",
-    "make": "electron-forge make",
-    "publish": "electron-forge publish",
-    "lint": "echo \"No linting configured\""
-  },
-  "keywords": [],
-  "author": {
-    "name": "Julian",
-    "email": "JustusPlays78@gmail.com"
-  },
-  "license": "MIT",
-  "config": {
-    "forge": {
-      "packagerConfig": {},
-      "makers": [
-        {
-          "name": "@electron-forge/maker-squirrel",
-          "config": {
-            "name": "updater"
-          }
-        },
-        {
-          "name": "@electron-forge/maker-zip",
-          "platforms": [
-            "darwin"
-          ]
-        },
-        {
-          "name": "@electron-forge/maker-deb",
-          "config": {}
-        },
-        {
-          "name": "@electron-forge/maker-rpm",
-          "config": {}
+    "name": "sectorfile_updater",
+    "productName": "Sectorfile Updater",
+    "version": "0.0.2",
+    "description": "This application allows users to easily update and maintain their sector files. It offers a simple, intuitive interface for downloading and installing the latest version of sector files, ensuring that users have access to the most accurate and up-to-date data. With automatic update checks and notifications, users can rest assured that their sector files are always up-to-date and ready for use.",
+    "main": "src/index.js",
+    "scripts": {
+        "start": "electron-forge start",
+        "package": "electron-forge package",
+        "make": "electron-forge make --platform=win32",
+        "publish": "electron-forge publish",
+        "lint": "echo \"No linting configured\""
+    },
+    "keywords": [],
+    "authors": [
+        "Julian <JustusPlays78@gmail.com>",
+        "Paul <paul@pabr.de>"
+    ],
+    "license": "MIT",
+    "config": {
+        "forge": {
+            "packagerConfig": {},
+            "makers": [{
+                    "name": "@electron-forge/maker-squirrel",
+                    "config": {
+                        "name": "updater"
+                    }
+                },
+                {
+                    "name": "@electron-forge/maker-zip",
+                    "platforms": [
+                        "darwin"
+                    ]
+                },
+                {
+                    "name": "@electron-forge/maker-deb",
+                    "config": {}
+                },
+                {
+                    "name": "@electron-forge/maker-rpm",
+                    "config": {}
+                }
+            ]
         }
-      ]
+    },
+    "dependencies": {
+        "@octokit/core": "^4.0.5",
+        "decompress-zip": "^0.3.3",
+        "electron-dl": "^3.3.1",
+        "electron-squirrel-startup": "^1.0.0",
+        "http": "^0.0.1-security",
+        "js-yaml": "^4.1.0",
+        "path": "^0.12.7",
+        "simple-git": "^3.15.1",
+        "superagent": "^8.0.3",
+        "unzipper": "^0.10.11"
+    },
+    "devDependencies": {
+        "@electron-forge/cli": "^6.0.0-beta.66",
+        "@electron-forge/maker-deb": "^6.0.0-beta.66",
+        "@electron-forge/maker-rpm": "^6.0.0-beta.66",
+        "@electron-forge/maker-squirrel": "^6.0.0-beta.66",
+        "@electron-forge/maker-zip": "^6.0.0-beta.66",
+        "electron": "^21.0.1"
     }
-  },
-  "dependencies": {
-    "electron-squirrel-startup": "^1.0.0"
-  },
-  "devDependencies": {
-    "@electron-forge/cli": "^6.0.0-beta.66",
-    "@electron-forge/maker-deb": "^6.0.0-beta.66",
-    "@electron-forge/maker-rpm": "^6.0.0-beta.66",
-    "@electron-forge/maker-squirrel": "^6.0.0-beta.66",
-    "@electron-forge/maker-zip": "^6.0.0-beta.66",
-    "electron": "20.1.4"
-  }
-}
+}

updater/programInternal.yaml

@@ -0,0 +1 @@
+folderPath: "C:\\Euroscope"

updater/sectorfileUpdater.yaml

@@ -0,0 +1,7 @@
+cid:
+  save: true
+  id: 1467870
+password:
+  save: false
+  pass: "Testen123"
+currentInstalledAirac: 2205

updater/src/append_to_file.js

@@ -0,0 +1,55 @@
+let filesAppended = [];
+
+function searchAndAppendCredentials(dir, data) {
+    var stringToAppend = `\nLastSession	connecttype	0\nLastSession	realname	${data[0]}\nLastSession	certificate	${data[1]}\nLastSession	password	${data[2]}\nLastSession	rating	${data[3]}\nLastSession	server	AUTOMATIC\nLastSession	tovatsim	1\n`;
+    fs.readdir(dir, (err, files) => {
+        if (err) throw err;
+        files.forEach(file => {
+            const filepath = path.join(dir, file);
+            fs.stat(filepath, (err, stat) => {
+                if (err) throw err;
+                if (stat.isDirectory()) {
+                    searchAndAppend(filepath, data);
+                } else if (path.extname(file) === '.prf') {
+                    fs.readFile(filepath, 'utf8', (err, data) => {
+                        if (err) throw err;
+                        const lastLine = data.split('\n').slice(-2)[0];
+                        if (lastLine !== stringToAppend.split('\n').slice(-2)[0] && !filesAppended.includes(filepath)) {
+                            fs.appendFile(filepath, stringToAppend, (err) => {
+                                if (err) throw err;
+                                // console.log(`The following lines were appended to ${filepath}`);
+                                filesAppended.push(filepath);
+                            });
+                        }
+                    });
+                }
+            });
+        });
+    });
+}
+
+function searchAndInsertHoppie(directory) {
+    let files = [];
+    const targetFile = "TopSkyCPDLChoppieCode.txt";
+
+    function searchDir(dir) {
+        fs.readdirSync(dir).forEach(file => {
+            const filePath = path.join(dir, file);
+            const stat = fs.statSync(filePath);
+            if (stat.isDirectory()) {
+                search(filePath);
+            } else if (file === targetFile) {
+                files.push(filePath);
+            }
+        });
+    }
+    search(directory);
+
+    files.forEach(file => {
+        fs.writeFileSync(file, passwordhoppieInput.value, (err) => {
+            if (err) {
+                console.log(err);
+            }
+        });
+    });
+}

updater/src/data_structure.js

@@ -0,0 +1,29 @@
+var systemstructure = {
+    path: ""
+};
+
+var structure = {
+    region: 0,
+    file: 0,
+    installcreds: false,
+    installhoppie: false, // Not yet implemented
+    realname: {
+        save: false,
+        name: ""
+    },
+    cid: {
+        save: false,
+        id: -1
+    },
+    password: {
+        save: false,
+        pass: ""
+    },
+    passwordhoppie: {
+        save: false,
+        pass: ""
+    },
+    rating: 0,
+    currentInstalledAirac: 0,
+    version: "1"
+};

updater/src/download.js

@@ -0,0 +1,77 @@
+const unzipper = require('unzipper');
+
+var airacversion = "";
+var releaseversion = "";
+var region = "";
+
+function downloadFile(source) {
+    saveDownloadInfo(dropDownFiles.options[dropDownFiles.selectedIndex].version);
+    let startpath = systemstructure.path;
+    createLocalStructure(startpath);
+    airacversion = structure.currentInstalledAirac;
+    releaseversion = structure.version;
+    region = gng.options[gng.selectedIndex].text;
+    const zipFile = source.split('/').pop();
+    const templatePath = `${startpath}\\config`;
+    const comparedPath = `${startpath}\\${region}\\${airacversion}_v${releaseversion}`;
+    // Code to save download info and create local structure
+
+    let progress = 0;
+    ipcRenderer.send('download-progress', { progress });
+
+    const request = superagent
+        .get(source)
+        .set("Referer", "http://files.aero-nav.com/")
+        .on('error', function(error) {
+            console.log(error);
+        });
+
+    request.on('response', res => {
+        const total = parseInt(res.headers['content-length'], 10);
+        res.on('data', chunk => {
+            progress += chunk.length;
+            const percent = (progress / total * 100).toFixed(2);
+            ipcRenderer.send('download-progress', { progress: percent });
+        });
+    });
+
+    request
+        .pipe(fs.createWriteStream(`${startpath}/${zipFile}`))
+        .on('finish', function() {
+            // Code to extract file
+            fs.createReadStream(`${startpath}/${zipFile}`)
+                .pipe(unzipper.Extract({ path: `${startpath}/${region}/${airacversion}_v${releaseversion}` }))/*Der Packagename fehlt noch*/
+                .on('finish', function() {
+                    // console.log("Decompressed successfully.");
+                    fs.rename(`${startpath}/${zipFile}`, `${startpath}/zipfiles/${zipFile}`, (err) => {
+                        if (err) throw err;
+                        // console.log('File moved successfully.');
+                    });
+                    compareFolders(templatePath, comparedPath, startpath);
+
+                    if (structure.installcreds == true) {
+                        // realname, cert, pass, rating
+                        data = [structure.realname.name, structure.cid.id, structure.password.pass, structure.rating];
+                        searchAndAppendCredentials(comparedPath, data);
+                    }
+                    if (structure.installhoppie == true) { searchAndInsertHoppie(comparedPath); }
+                });
+        });
+}
+
+function createFolder(folder) {
+    if (!fs.existsSync(folder)) {
+        fs.mkdirSync(folder);
+    }
+};
+
+function createLocalStructure(startpath) {
+    const airacversion = structure.currentInstalledAirac;
+    const releaseversion = structure.version;
+    const region = gng.options[gng.selectedIndex].text;
+
+    createFolder(`${startpath}/config`);
+    createFolder(`${startpath}/zipfiles`);
+    createFolder(`${startpath}/${region}`);
+    createFolder(`${startpath}/${region}/${airacversion}_v${releaseversion}`);
+}

updater/src/footer.html

@@ -0,0 +1,12 @@
+<footer class="footer pt-3 pb-4">
+    <div class="container-fluid">
+        <div class="row align-items-center justify-content-lg-between">
+            <div class="col-lg-6 mb-lg-0 mb-4">
+                <div class="copyright text-center text-sm text-white text-lg-start">
+                  © 2023,
+                  Developed by PaBr, JulSch
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>

updater/src/getFiles.js

@@ -0,0 +1,50 @@
+async function getUpdates() {
+    const courses = await superagent.get('https://files.aero-nav.com/');
+    let text = courses.text.match(/Download Pages([^]*?)<\/body>/g);
+    let liste = text[0].match(/<b>(.*?)<\/b>/g).map(item => item.replace(/<\/?b>/g, ""));
+
+    liste.forEach(item => {
+        var option = document.createElement("option");
+        option.text = item;
+        dropDownGNG.add(option);
+    });
+    getFiles();
+}
+
+
+async function getFiles() {
+    await delay(300)
+    await removeFileItems();
+    let region = "https://files.aero-nav.com/" + dropDownGNG.options[dropDownGNG.selectedIndex].text;
+    let courses = await superagent.get(region);
+    let text = courses.text.split("Released</th><th colspan='2'>Download</th></tr>").pop();
+    text = text.split("<h1>AIRAC <small>News</small></h1>")[0];
+    let rows = text.match(/<td>(.*?)<\/td>/g).map(row => row.replace(/<\/?td>/g, ""));
+
+    let fileNames = rows.filter((row, index) => index % 5 === 1);
+    let versionNumbers = rows.filter((row, index) => index % 5 === 2).map(versionNumber => versionNumber.split('/').map(e => e.trim()));
+    let hrefLinks = rows.filter((row, index) => index % 5 === 4).map(row => row.match(/href="(.*?)"/)[1]);
+
+    let data = fileNames.map((fileName, index) => [fileName, versionNumbers[index], hrefLinks[index]]);
+
+    removeFileItems();
+    data.forEach(row => {
+        let option = document.createElement("option");
+        option.text = row[0];
+        option.version = row[1];
+        option.href = row[2];
+        dropDownFiles.add(option);
+    });
+
+    if (structure.file != -1) {
+        dropDownFiles.selectedIndex = structure.file;
+    }
+
+    if (structure.currentInstalledAirac !== dropDownFiles.options[dropDownFiles.selectedIndex].version[0] ||
+        structure.version !== dropDownFiles.options[dropDownFiles.selectedIndex].version[1]) {
+        document.getElementById("download").style.display = "block";
+    }
+
+    save();
+    return hrefLinks;
+}

updater/src/git_ops.js

@@ -0,0 +1,41 @@
+const path = require('path');
+
+function compareFolders(templatePath, comparedPath, originalPath, pathToAppend) {
+    // get all files and directories in template folder
+    const templateFiles = fs.readdirSync(templatePath, { withFileTypes: true });
+    // loop through each file/directory in template folder
+    templateFiles.forEach(file => {
+        // create the full path for the current file/directory
+        const templateFilePath = path.join(templatePath, file.name);
+        const comparedFilePath = path.join(comparedPath, file.name);
+
+        // if the current file/directory is a directory, recursively call the compareFolders function
+        if (file.isDirectory()) {
+            if (!fs.existsSync(comparedFilePath)) {
+                fs.mkdirSync(comparedFilePath);
+            }
+            compareFolders(templateFilePath, comparedFilePath, originalPath, pathToAppend);
+        } else {
+            // check if the file exists in the compared folder
+            if (!fs.existsSync(comparedFilePath)) {
+                // if it doesn't exist, copy the file from the template folder
+                fs.copyFileSync(templateFilePath, comparedFilePath);
+            } else {
+                // if it exists, compare the contents of the file
+                let templateFileContent = fs.readFileSync(templateFilePath);
+                let comparedFileContent = fs.readFileSync(comparedFilePath);
+                if (templateFileContent.equals(comparedFileContent)) {
+                    // if the contents are the same, don't copy the file
+                } else {
+                    // if the contents are different, copy the file from the template folder
+                    fs.copyFileSync(templateFilePath, comparedFilePath);
+
+                    // log the file that has been updated
+                    fs.appendFile(originalPath + "\\update.log", templateFilePath + " has been updated \n", (err) => {
+                        if (err) throw err;
+                    });
+                }
+            }
+        }
+    });
+}

updater/src/header.html

@@ -0,0 +1,36 @@
+<link rel="stylesheet" href="./css/boot.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+<link rel="stylesheet" href="./index.css">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Euroscope SectorfileUpdater</title>
+  <link rel="stylesheet" href="./css/boot.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+  <link rel="stylesheet" href="./index.css">
+  <div class="container-fluid">
+    <h1 class="navbar-brand text-white text-center">
+        Euroscope Sectorfile Updater
+    </h1>
+  </div>
+</head>        
+<nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 mt-3 shadow-none border-radius-xl bg-transparent" id="navbarTop">
+                    <ul class="navbar-nav navbar-nav-hover ms-auto">
+                                <div class="border-radius-lg d-flex me-6">
+                                    <div class="col-4 text-end">
+                                    <a href=".\index.html" class="btn ecsu-btn-light btn-sm mb-0 mx-2">Home</a>
+                                    </div>
+                                <div class="border-radius-lg d-flex me-2">
+                                    <div class="col-4 text-end">
+                                      <a href=".\syncing.html" class="btn ecsu-btn-light btn-sm mb-0">Syncing</a>
+                                  </div>
+                                </div>
+                                <div class="border-radius-lg d-flex me-4">
+                                    <div class="col-4 text-end">
+                                      <a href=".\settings.html" class="btn ecsu-btn-light btn-sm mb-0">Credentials</a>
+                                    </div>
+                                </div>
+                        </ul>
+                    
+                </div>
+        </nav>

updater/src/html_elements.js

@@ -0,0 +1,31 @@
+// Global Variabels
+let selectDirBtn = document.getElementById('select-dir');
+let dirBox = document.getElementById('dirBox');
+let usernameInput = document.getElementById('username');
+let passwordInput = document.getElementById('password');
+let passwordhoppieInput = document.getElementById('passwordhoppie');
+let realnameInput = document.getElementById('realname');
+let saveCredBtn = document.getElementById('savecred');
+let rating = document.getElementById('rating');
+let progressbar = document.getElementById('progressbar');
+let downloadBtn = document.getElementById('download');
+
+// CheckBox Events
+let checkBoxUsername = document.getElementById('saveuser');
+let checkBoxPassword = document.getElementById('savepw');
+let checkBoxSavepwhoppie = document.getElementById('savepwhoppie');
+let checkBoxRealname = document.getElementById('saverealname');
+let applyToPrf = document.getElementById('applyToPrf');
+let applyHoppie = document.getElementById('applyHoppie');
+
+// Check update
+let dropDownGNG = document.getElementById('gng');
+let dropDownFiles = document.getElementById('files');
+
+saveCredBtn.addEventListener('click', (e) => {
+    save();
+});
+
+selectDirBtn.addEventListener('click', (e) => {
+    changeUserpath();
+});

updater/src/index.css

@@ -1,7 +1,230 @@
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif;
-  margin: auto;
-  max-width: 38rem;
-  padding: 2rem;
-}
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+      Arial, sans-serif;
+    margin: auto;
+    max-width: 38rem;
+    padding: 2rem;
+  }
+  
+  /* Loopple Alert */
+  .loopple-alert {
+    position: relative;
+    margin-bottom: 16px;
+    padding: 16px 24px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    font-size: 14px;
+  }
+  
+  .loopple-alert.loopple-alert-gradient-dark {
+    color: #fff;
+    border-color: #45484b;
+    background: linear-gradient(87deg, #212529 0, #212229 100%) !important;
+  }
+  
+  .loopple-alert.loopple-alert-dismissible .close {
+    top: 50%;
+    right: 24px;
+    padding: 0;
+    transform: translateY(-50%);
+    opacity: 1;
+    position: absolute;
+    color: inherit;
+    border: 0;
+    background: transparent;
+  }
+  
+  .loopple-alert.loopple-alert-dismissible .close span {
+    color: #fff;
+  }
+  
+  .loopple-fade {
+    transition: opacity 0.15s linear;
+  }
+  
+  /* Loopple Button */
+  .loopple-btn {
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    text-align: center;
+    vertical-align: middle;
+    position: relative;
+    transition: all 0.15s ease;
+    padding: 10px 20px;
+    letter-spacing: 0.3px;
+    text-transform: none;
+    will-change: transform;
+  }
+  
+  .loopple-btn.loopple-btn-white {
+    color: #212529;
+    border-color: #fff;
+    background-color: #fff;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+  
+  .loopple-btn.loopple-btn-white:hover {
+    color: #212529;
+    border-color: #fff;
+    background-color: #fff;
+  }
+  
+  .loopple-btn.loopple-btn-white:focus,
+  .loopple-btn.loopple-btn-white.focus {
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(255, 255, 255, 0.5) l;
+  }
+  
+  .loopple-btn.loopple-btn-white:not(:disabled):not(.disabled):active,
+  .loopple-btn.loopple-btn-white:not(:disabled):not(.disabled).active {
+    color: #212529;
+    border-color: #fff;
+    background-color: #e6e6e6;
+  }
+  
+  /* Loopple Utilities */
+  .loopple-position-absolute {
+    position: absolute;
+  }
+  
+  .loopple-position-sticky {
+    position: sticky;
+  }
+  
+  .loopple-position-fixed {
+    position: fixed;
+  }
+  
+  .loopple-z-index-9999 {
+    z-index: 9999;
+  }
+  
+  .loopple-bottom-2 {
+    bottom: 8px;
+  }
+  
+  .loopple-mx-auto {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+  
+  .loopple-text-center {
+    text-align: center;
+  }
+  
+  .loopple-right-0 {
+    right: 0;
+  }
+  
+  .loopple-left-0 {
+    left: 0;
+  }
+  
+  .loopple-w-50 {
+    width: 50%;
+  }
+  
+  .loopple-ml-2,
+  .loopple-mx-2 {
+    margin-left: 8px;
+  }
+  
+  .loopple-opacity-0 {
+    opacity: 0;
+  }
+  
+  .ecsu-bg-dark-out {
+    background: #23262c;
+  }
+  
+  .ecsu-bg-dark-light-out {
+    background: #343a40;
+  
+  }
+  
+  .ecsu-bg-light-out {
+    background-color: #f8f9fa;
+  }
+  
+  .ecsu-bg-dark-light-2-out {
+    background: #495057;
+  }
+  
+  .ecsu-btn-primary {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: #070752;
+    --bs-btn-border-color: #cb0c9f;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #2020a1;
+    --bs-btn-hover-border-color: #a20a7f;
+    --bs-btn-focus-shadow-rgb: 211, 48, 173;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #a20a7f;
+    --bs-btn-active-border-color: #980977;
+    --bs-btn-active-shadow: none;
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: #cb0c9f;
+    --bs-btn-disabled-border-color: #cb0c9f
+  }
+  
+  .ecsu-btn-dark {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: #14161a;
+    --bs-btn-border-color: #344767;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #4a5c7c;
+    --bs-btn-hover-border-color: #2a3952;
+    --bs-btn-focus-shadow-rgb: 82, 99, 126;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #2a3952;
+    --bs-btn-active-border-color: #27354d;
+    --bs-btn-active-shadow: none;
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: #344767;
+    --bs-btn-disabled-border-color: #344767
+  }
+  
+  .ecsu-btn-light {
+    --bs-btn-color: #000;
+    --bs-btn-bg: #e9ecef;
+    --bs-btn-border-color: #e9ecef;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #9ea3a7;
+    --bs-btn-hover-border-color: #ebeef1;
+    --bs-btn-focus-shadow-rgb: 198, 201, 203;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #edf0f2;
+    --bs-btn-active-border-color: #ebeef1;
+    --bs-btn-active-shadow: none;
+    --bs-btn-disabled-color: #000;
+    --bs-btn-disabled-bg: #e9ecef;
+    --bs-btn-disabled-border-color: #e9ecef
+  }
+  
+  .escu-bg-gradient-primary {
+    background-color: #4a5c7c;
+  }
+  .tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black;
+  }
+  
+  .tooltip .tooltiptext {
+    visibility: hidden;
+    width: 450px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+  }
+  
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+  }

updater/src/index.html

@@ -1,12 +1,185 @@
+<link rel="stylesheet" href="./css/boot.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Sectorfile Updater</title>
-    <link rel="stylesheet" href="index.css" />
-  </head>
-  <body>
-    <h1>Hello World!</h1>
-    <p>Welcome to your Electron application.</p>
-  </body>
-</html>
+<html class="ecsu-bg-dark-out">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>AIRAC Updater</title>
+    <link rel="stylesheet" href="./css/boot.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+    <link rel="stylesheet" href="./index.css">
+    <div class="container-fluid">
+        <h1 class="text-white text-center">
+            AIRAC Updater
+        </h1>
+    </div>
+</head>
+
+
+<body class="ecsu-bg-dark-out text-white">
+
+
+    <div>
+        <h3 class="text-white">Settings</h3>
+        <button id="select-dir">Select Directory</button>
+        <input type="text" id="dirBox" name="name" size="50" readonly />
+        <progress id="progressbar" max="100" value="0"></progress>
+        <p id="progressbarText"></p>
+    </div>
+    <div>
+        <h3 class="text-white">Updatesettings</h3>
+        <!--Insert Credentials to Profilefiles <input type="checkbox" id="applyToPrf" />-->
+        <div class="form-check form-switch ps-0">
+            <input class="form-check-input ms-auto" type="checkbox" id="applyToPrf">
+            <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault">Insert
+                Credentials to Profilefiles</label>
+        </div>
+        <br>
+        <!--Insert Hoppie Code: <input type="checkbox" id="applyHoppie" />-->
+        <div class="form-check form-switch ps-0">
+            <input class="form-check-input ms-auto" type="checkbox" id="applyHoppie">
+            <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault">Insert
+                Hoppie Code</label>
+        </div>
+
+        <div id="login">
+
+            <body class="text-white">Select Rating</body>
+            <select id="rating">
+                <option id="0">OBS</option>
+                <option id="1">S1</option>
+                <option id="2">S2</option>
+                <option id="3">S3</option>
+                <option id="4">C1</option>
+                <option id="6">C3</option>
+                <option id="7">I1</option>
+                <option id="9">I3</option>
+                <option id="10">SUP</option>
+                <option id="11">ADM</option>
+            </select>
+            <br>
+            <br>
+            <h6 class="text-white">Select Package</h6>
+            <select id="gng"></select>
+            <select id="files"></select>
+            <button id="download" style="display:block">Download Update</button>
+        </div>
+        <br>
+
+
+
+        <div>
+            <h3 class="text-white">Credentials save</h3>
+            <form>
+                <!--Realname: <input type="text" id="realname" />
+            <input type="checkbox" id="saverealname" />
+            <br> Username: <input type="text" id="username" />
+            <input type="checkbox" id="saveuser" />
+            <br> Password: <input type="password" id="password" />
+            <input type="checkbox" id="savepw" />
+            <br>  Hoppie Code: <input type="password" id="passwordhoppie" />
+            <input type="checkbox" id="savepwhoppie" />-->
+                <br>
+                <div>
+                    <div class="row">
+                        <div class="col-lg-3">
+                            <div class="form-group">
+                                <div class="form-check form-switch ps-0">
+                                    <label class="form-control-label text-white" for="input-username">Realname</label>
+                                    <input class="form-check-input ms-auto" type="checkbox" id="saverealname">
+                                    <input type="text" id="realname" class="form-control" placeholder="Realname">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="form-group">
+                                <div class="form-check form-switch ps-0">
+                                    <label class="form-control-label text-white" for="input-username">CID</label>
+                                    <input class="form-check-input ms-auto" type="checkbox" id="saveuser">
+                                    <input type="text" id="username" class="form-control" placeholder="CID">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="form-group">
+                                <div class="form-check form-switch ps-0">
+                                    <label class="form-control-label text-white" for="input-username">Password</label>
+                                    <input class="form-check-input ms-auto" type="checkbox" id="savepw">
+                                    <input type="password" id="password" class="form-control" placeholder="Password">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="form-group">
+                                <div class="form-check form-switch ps-0">
+                                    <label class="form-control-label text-white" for="input-username">Hoppie
+                                        Code</label>
+                                    <input class="form-check-input ms-auto" type="checkbox" id="savepwhoppie">
+                                    <input type="text" id="passwordhoppie" class="form-control" placeholder="Hoppie Code">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!--<div class="tooltip">
+                <br> Password: <input type="password" id="password" />
+                <input type="checkbox" id="savepw" />
+                <span class="tooltiptext">Please be aware that the password you enter will be stored in plain
+                    text in our system. This means that it will not be encrypted or
+                    otherwise secured. We recommend that you do not use a password that
+                    you also use for other important accounts, such as your email or
+                    banking. Please use caution when entering your password and consider
+                    using a unique and strong password specifically for this
+                    account.</span>
+            </div>-->
+                    <!--<div class="tooltip">
+                <br>Password Hoppie: <input type="password" id="passwordhoppie" />
+                <input type="checkbox" id="savepwhoppie" />
+                <span class="tooltiptext">Please be aware that the password you enter will be stored in plain
+                    text in our system. This means that it will not be encrypted or
+                    otherwise secured. We recommend that you do not use a password that
+                    you also use for other important accounts, such as your email or
+                    banking. Please use caution when entering your password and consider
+                    using a unique and strong password specifically for this
+                    account.</span>
+            </div>-->
+                    <br>
+                    <button id="savecred">Save your Credentials</button>
+            </form>
+            </div>
+
+            <form>
+                If you want Eurosounds, please check the box below and click the download button. <br>
+                <input type="checkbox" id="download-checkbox" onclick="toggleDownloadButton()"> I confirm that I would like to download the file.
+                <br>
+                <button id="download-link" style="display:none"><a
+                    href="https://cdn.ganderoceanic.ca/resources/files/eurosounds/eurosounds-8apr20.zip">Download</a></button>
+                <!--<a href="https://cdn.ganderoceanic.ca/resources/files/eurosounds/eurosounds-8apr20.zip" id="download-link" style="display:none" class="text-white">Download</a>-->
+            </form>
+            <script>
+                function toggleDownloadButton() {
+                    const downloadLink = document.getElementById("download-link");
+                    if (document.getElementById("download-checkbox").checked) {
+                        downloadLink.style.display = "block";
+                    } else {
+                        downloadLink.style.display = "none";
+                    }
+                }
+            </script>
+        </div>
+
+
+        <script src="./data_structure.js"></script>
+        <script src="./html_elements.js"></script>
+        <script src="./renderer.js"></script>
+        <script src="./startup.js"></script>
+        <script src="./save.js"></script>
+        <script src="./getFiles.js"></script>
+        <script src="./download.js"></script>
+        <script src="./git_ops.js"></script>
+        <script src="./append_to_file.js"></script>
+</body>
+
+</html>

updater/src/index.js

@@ -1,29 +1,48 @@
-const { app, BrowserWindow } = require('electron');
+const { app, BrowserWindow, dialog, ipcMain, Menu } = require('electron');
 const path = require('path');
+Menu.setApplicationMenu(false); // Top Bar removal
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 // eslint-disable-next-line global-require
 if (require('electron-squirrel-startup')) {
-  app.quit();
+    app.quit();
 }
 
 const createWindow = () => {
-  // Create the browser window.
-  const mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true,
-    },
-  });
-
-  // and load the index.html of the app.
-  mainWindow.loadFile(path.join(__dirname, 'index.html'));
-
-  // Open the DevTools.
-  mainWindow.webContents.openDevTools();
+    // Create the browser window.
+    const mainWindow = new BrowserWindow({
+        width: 1000,
+        height: 800,
+        webPreferences: {
+            nodeIntegration: true,
+            contextIsolation: false,
+            nodeIntegrationInWorker: true,
+            preload: path.join(__dirname, 'preload.js'),
+        },
+    });
+    mainWindow.loadFile(path.join(__dirname, 'index.html'));
+    //mainWindow.webContents.openDevTools();
+    // Select Directory
+    ipcMain.on('app-path', async(event, arg) => {
+        filepath = await dialog.showOpenDialog(mainWindow, {
+            properties: ['openDirectory']
+        });
+        mainWindow.webContents.send("app-dest", filepath.filePaths);
+        // Save directory to file
+    });
+    ipcMain.on('download-progress', (event, args) => {
+        mainWindow.webContents.send("progressbar", args);
+    });
+    ipcMain.on("app-path-get", (event) => {
+        mainWindow.webContents.send("app-path-get", app.getAppPath());
+    });
 };
 
+
+
+
+
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
@@ -33,18 +52,15 @@ app.on('ready', createWindow);
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit();
-  }
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
 });
 
 app.on('activate', () => {
-  // On OS X it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow();
-  }
-});
-
-// In this file you can include the rest of your app's specific main process
-// code. You can also put them in separate files and import them here.
+    // On OS X it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (BrowserWindow.getAllWindows().length === 0) {
+        createWindow();
+    }
+});

updater/src/index1.html

@@ -0,0 +1,91 @@
+<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+  crossorigin="anonymous">
+  </script>
+<script src=".\js\loople.js"></script>
+<script>
+  $(function () {
+    $("#header").load("header.html");
+    $("#footer").load("footer.html");
+  });
+</script>
+
+<body class="bg-dark">
+  <div class="main-content" id="panel">
+
+    <!--Header-->
+    <div id="header"></div>
+
+
+    <!--CONTENT-->
+    <div class="card mb-4 ecsu-bg-dark-light-out">
+      <div class="card-body">
+        <form>
+          <div class="row">
+            <div class="col-8 ">
+              <h6 class="mb-0 text-white">Home</h6>
+            </div>
+            <div class="col-4"><button class="btn btn-sm ecsu-btn-dark" id="download">Sync</button></div>
+          </div>
+          <div class="col-lg-6">
+            <div class="form-group">
+              <label class="form-control-label text-white" for="input-last-name">Select Sectorfilefolder</label>
+              <input type="file" id="sctfolder" class="form-control" webkitdirectory directory />
+            </div>
+          </div>
+          <div>
+            <h6 class="text-white">Sectorfile AIRAC: 2209</h6>
+          </div>
+          <div>
+            <h6 class="text-uppercase text-xs font-weight-bolder text-white">Logins</h6>
+            <div class="progress-wrapper mb-4">
+              <div class="progress-info">
+                <div class="progress-percentage">
+                  <span class="text-sm font-weight-bold">60%</span>
+                </div>
+              </div>
+              <div class="progress">
+                <div class="progress-bar  escu-bg-gradient-primary " role="progressbar" aria-valuenow="60"
+                  aria-valuemin="0" aria-valuemax="100" style="width: 60%;" id="progessb" id="dirBox"></div>
+              </div>
+            </div><button class="btn ecsu-btn-dark mb-4">Button</button>
+
+        </form>
+      </div>
+    </div>
+    <!--CONTENT PRIMARY DROPDOWN BUTTON
+      <div class="container-fluid pt-3 ">
+        <div class="col-12 col-xl-4 mb-4">
+          <div class="dropdown mb-4">
+            <button class="btn bg-gradient-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+                          Primary
+                      </button>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                  <li><a class="dropdown-item" href="#">Action</a></li>
+                  <li><a class="dropdown-item" href="#">Another action</a></li>
+                  <li><a class="dropdown-item" href="#">Something else here</a></li>
+                </ul>
+            </div>   
+        </div>
+-->
+    <!--Footer-->
+    <div id="footer"></div>
+  </div>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/popper.min.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/bootstrap.min.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/chartjs.min.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/Chart.extension.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/soft-ui-dashboard.min.js?v=1.0.2"></script>
+  <script src="./js/loopple.js"></script>
+  <script>
+    $(function () {
+      $("#header").load(".\html\header.html");
+      $("#footer").load(".\html\footer.html");
+    });
+
+
+    function kackc(){
+      var dragonHealth = document.getElementById("progressb").value;
+      dragonHealth.value = 25;
+    }
+  </script>
+</body>

updater/src/js/loople.js

@@ -0,0 +1,15 @@
+// Alert dismissible function
+document.querySelector('.loopple-alert.loopple-alert-dismissible .close').onclick = function() {
+    document.querySelector('.loopple-alert').classList.add('loopple-opacity-0');
+    setTimeout(function(){
+      document.querySelector('.loopple-alert').remove();
+    }, 1000);}
+
+    document.getElementById('download').addEventListener('click', () => {
+
+    },
+    
+    );
+  
+
+

updater/src/preload.js

@@ -0,0 +1,9 @@
+const { contextBridge, ipcRenderer } = require('electron')
+
+process.once('loaded', () => {
+    window.addEventListener('message', evt => {
+        if (evt.data.type === 'select-dirs') {
+            ipcRenderer.send('select-dirs')
+        }
+    })
+})

updater/src/renderer.js

@@ -0,0 +1,66 @@
+const { ipcRenderer, app } = require('electron');
+const superagent = require('superagent').agent();
+var fs = require('fs');
+
+const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+document.addEventListener('DOMContentLoaded', function() { // Seems to work (tm)
+    firstStart();
+}, false);
+
+
+// Save Event
+gng.addEventListener("change", () => {
+    getFiles();
+    save();
+});
+files.addEventListener("change", () => {
+    save();
+});
+
+// Remove all files when changing Region --> WIP no nicht
+function removeFileItems() {
+    var i, L = dropDownFiles.options.length - 1;
+    for (i = L; i >= 0; i--) {
+        dropDownFiles.remove(i);
+    }
+}
+
+function changeUserpath() {
+    ipcRenderer.send('app-path');
+}
+
+ipcRenderer.on("app-dest", (event, value) => {
+    systemstructure.path = value[0];
+    dirBox.value = value[0];
+    console.log(systemstructure.path);
+    fs.writeFileSync(filePath + "\\" + systemsettings, JSON.stringify(systemstructure, null, 4), 'utf8');
+    location.reload();
+})
+
+let progressbarText = document.getElementById('progressbarText');
+ipcRenderer.on("download progress", (event, progress) => {
+    const cleanProgressInPercentages = Math.floor(progress.percent * 100); // Without decimal point
+    document.getElementById('progressbar').value = cleanProgressInPercentages;
+});
+
+downloadBtn.addEventListener('click', (e) => {
+    downloadFile(files.options[files.selectedIndex].href);
+});
+
+ipcRenderer.on('progressbar', (event, args) => {
+    progressbarText.innerHTML = args.progress + "%";
+    progressbar.value = args.progress;
+});
+
+rating.addEventListener('change', (e) => {
+    save();
+});
+
+applyToPrf.addEventListener('click', (e) => {
+    save();
+});
+
+applyHoppie.addEventListener('click', (e) => {
+    save();
+});

updater/src/save.js

@@ -0,0 +1,49 @@
+function save() {
+    // Read config, if there is none, the default will be used
+    structure = JSON.parse(fs.readFileSync(systemstructure.path + "\\" + settings, 'utf8'));
+    structure.region = gng.selectedIndex;
+    structure.file = files.selectedIndex;
+    if (structure.file == -1) {
+        structure.file = 0;
+    }
+    if (checkBoxRealname.checked == true) {
+        structure.realname.name = realnameInput.value;
+        structure.realname.save = true;
+    } else {
+        structure.realname.name = "";
+        structure.realname.save = false;
+    }
+    if (checkBoxUsername.checked == true) {
+        structure.cid.id = usernameInput.value;
+        structure.cid.save = true;
+    } else {
+        structure.cid.id = -1;
+        structure.cid.save = false;
+    }
+    if (checkBoxPassword.checked == true) {
+        structure.password.pass = passwordInput.value;
+        structure.password.save = true;
+    } else {
+        structure.password.pass = "";
+        structure.password.save = false;
+    }
+    if (checkBoxSavepwhoppie.checked == true) {
+        structure.passwordhoppie.pass = passwordhoppieInput.value;
+        structure.passwordhoppie.save = true;
+    } else {
+        structure.passwordhoppie.pass = "";
+        structure.passwordhoppie.save = false;
+    }
+    structure.rating = rating.options[rating.selectedIndex].id;
+    structure.installcreds = applyToPrf.checked;
+    structure.installhoppie = applyHoppie.checked;
+    // Save config
+    fs.writeFileSync(systemstructure.path + "\\" + settings, JSON.stringify(structure, null, 4), 'utf8');
+};
+
+
+function saveDownloadInfo(versionInfo) {
+    structure.currentInstalledAirac = versionInfo[0];
+    structure.version = versionInfo[1];
+    fs.writeFileSync(systemstructure.path + "\\" + settings, JSON.stringify(structure, null, 4), 'utf8');
+}

updater/src/settings.html

@@ -0,0 +1,278 @@
+<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+  crossorigin="anonymous">
+  </script>
+<script>
+  $(function () {
+    $("#header").load("header.html");
+    $("#footer").load("footer.html");
+  });
+</script>
+
+<body class="g-sidenav-show bg-dark">
+  <div class="main-content" id="panel">
+
+    <!--Header-->
+    <div id="header"></div>
+
+    <!--CONTENT-->
+    <div class="card mb-4 ecsu-bg-dark-light-out" id="login">
+      <div class="card-body">
+        <form>
+          <div class="row">
+            <div class="col-8 ">
+              <h6 class="mb-0 text-white">Credentials</h6>
+            </div>
+            <div class="col-4"><button class="btn btn-sm ecsu-btn-dark " id="savecred">Save your Credentials</button></div>
+          </div>
+          <div>
+            <div class="row">
+              <div class="col-lg-6">
+                <div class="form-group form-switch ps-0">
+                  <label class="form-control-label text-white" for="input-username">Name</label><input class="form-check-input ms-auto" type="checkbox" id="saverealname">
+                  <input type="text" id="input-username" class="form-control" placeholder="Name" id="realname">
+                  
+                </div>
+              </div>
+              <div class="col-lg-6">
+                <div class="form-group form-switch ps-0">
+                  <label class="form-control-label text-white" for="input-email">CID</label><input class="form-check-input ms-auto" type="checkbox" id="saveuser" >
+                  <input type="email" id="input-email" class="form-control" placeholder="1234567" id="username">
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-lg-6">
+                <div class="form-group form-switch ps-0">
+                  <label class="form-control-label text-white" for="input-first-name">Password</label><input class="form-check-input ms-auto" type="checkbox" id="savepw" >
+                  <input type="password" id="input-first-name" class="form-control" placeholder="password" id="password">
+              </div>
+              <div class="col-lg-6">
+                <div class="form-group form-switch ps-0">
+                  <label class="form-control-label text-white" for="input-last-name">CPDLC HoppieCode</label><input class="form-check-input ms-auto" type="checkbox" id="savepwhoppie" >
+                  <input type="password" id="input-last-name" class="form-control" placeholder="CPDLC Code" id="passwordhoppie">
+                </div>
+              </div>
+              <label class="form-control-label text-white" for="input-last-name">Select Your Rating</label>
+              <select id="rating">
+                <option id="0">obs</option>
+                <option id="1">s1</option>
+                <option id="2">s2</option>
+                <option id="3">s3</option>
+                <option id="4">c1</option>
+                <option id="6">c3</option>
+                <option id="7">i1</option>
+                <option id="9">i3</option>
+                <option id="10">sup</option>
+                <option id="11">adm</option>
+            </select>
+              <div class="form-group form-switch ps-0">
+                <label class="form-control-label text-white" for="input-last-name">If you want Eurosounds, please check the box below and click the download button. </label>
+                <input class="form-check-input ms-auto" type="checkbox" id="download-checkbox" onclick="toggleDownloadButton()">
+                <br>
+                <a href="https://cdn.ganderoceanic.ca/resources/files/eurosounds/eurosounds-8apr20.zip" id="download-link" style="display:none">Download Sounds</a>
+              </div>
+              <script>
+                function toggleDownloadButton() {
+                    const downloadLink = document.getElementById("download-link");
+                    if (document.getElementById("download-checkbox").checked) {
+                        downloadLink.style.display = "block";
+                    } else {
+                        downloadLink.style.display = "none";
+                    }
+                }
+            </script>
+            </div>
+          </div>
+      </div>
+      </form>
+    </div>
+  </div>
+
+
+  <!--Footer-->
+  <div id="footer"></div>
+  </div>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/popper.min.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/bootstrap.min.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/chartjs.min.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/Chart.extension.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/soft-ui-dashboard.min.js?v=1.0.2"></script>
+  <script src="./js/html_elements.js"></script>
+  <script src="./js/renderer.js"></script>
+  <script src="./js/startup.js"></script>
+  <script src="./js/save.js"></script>
+  <script src="./js/getFiles.js"></script>
+  <script src="./js/data_structure.js"></script>
+  <script src="./js/download.js"></script>
+  <script src="./js/git_ops.js"></script>
+  <script src="./js/append_to_file.js"></script>
+  <script>
+    if (document.querySelector("#chart-bars")) {
+      var ctx = document.getElementById("chart-bars").getContext("2d");
+      new Chart(ctx, {
+        type: "bar",
+        data: {
+          labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+          datasets: [{
+            label: "Sales",
+            tension: 0.4,
+            borderWidth: 0,
+            borderRadius: 4,
+            borderSkipped: false,
+            backgroundColor: "#fff",
+            data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
+            maxBarThickness: 6
+          },],
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false,
+            }
+          },
+          interaction: {
+            intersect: false,
+            mode: 'index',
+          },
+          scales: {
+            y: {
+              grid: {
+                drawBorder: false,
+                display: false,
+                drawOnChartArea: false,
+                drawTicks: false,
+              },
+              ticks: {
+                suggestedMin: 0,
+                suggestedMax: 500,
+                beginAtZero: true,
+                padding: 15,
+                font: {
+                  size: 14,
+                  family: "Open Sans",
+                  style: 'normal',
+                  lineHeight: 2
+                },
+                color: "#fff"
+              },
+            },
+            x: {
+              grid: {
+                drawBorder: false,
+                display: false,
+                drawOnChartArea: false,
+                drawTicks: false
+              },
+              ticks: {
+                display: false
+              },
+            },
+          },
+        },
+      });
+
+    };
+    if (document.querySelector("#chart-line")) {
+      var ctx2 = document.getElementById("chart-line").getContext("2d");
+      var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50);
+      gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)");
+      gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)");
+      gradientStroke1.addColorStop(0, "rgba(203,12,159,0)");
+      var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);
+      gradientStroke2.addColorStop(1, "rgba(20,23,39,0.2)");
+      gradientStroke2.addColorStop(0.2, "rgba(72,72,176,0.0)");
+      gradientStroke2.addColorStop(0, "rgba(20,23,39,0)");
+      new Chart(ctx2, {
+        type: "line",
+        data: {
+          labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+          datasets: [{
+            label: "Mobile apps",
+            tension: 0.4,
+            borderWidth: 0,
+            pointRadius: 0,
+            borderColor: "#cb0c9f",
+            borderWidth: 3,
+            backgroundColor: gradientStroke1,
+            fill: true,
+            data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
+            maxBarThickness: 6
+
+          },
+          {
+            label: "Websites",
+            tension: 0.4,
+            borderWidth: 0,
+            pointRadius: 0,
+            borderColor: "#3A416F",
+            borderWidth: 3,
+            backgroundColor: gradientStroke2,
+            fill: true,
+            data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
+            maxBarThickness: 6
+          },
+          ],
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false,
+            }
+          },
+          interaction: {
+            intersect: false,
+            mode: 'index',
+          },
+          scales: {
+            y: {
+              grid: {
+                drawBorder: false,
+                display: true,
+                drawOnChartArea: true,
+                drawTicks: false,
+                borderDash: [5, 5]
+              },
+              ticks: {
+                display: true,
+                padding: 10,
+                color: '#b2b9bf',
+                font: {
+                  size: 11,
+                  family: "Open Sans",
+                  style: 'normal',
+                  lineHeight: 2
+                },
+              }
+            },
+            x: {
+              grid: {
+                drawBorder: false,
+                display: false,
+                drawOnChartArea: false,
+                drawTicks: false,
+                borderDash: [5, 5]
+              },
+              ticks: {
+                display: true,
+                color: '#b2b9bf',
+                padding: 20,
+                font: {
+                  size: 11,
+                  family: "Open Sans",
+                  style: 'normal',
+                  lineHeight: 2
+                },
+              }
+            },
+          },
+        },
+      });
+    };
+  </script>
+  <script src="./js/loopple.js"></script>
+  </script>
+</body>

updater/src/startup.js

@@ -0,0 +1,76 @@
+let systemsettings = "systemfile.json";
+let settings = "settings.json";
+let filePath = "";
+
+//var filePath = app.getPath('exe') + '\\' + systemsettings; // Set to exe path ex: app.getPath('exe') + '\\' + systemsettings;
+
+async function firstStart() {
+    await ipcRenderer.send('app-path-get');
+    await ipcRenderer.on("app-path-get", (event, path) => {
+        filePath = path; // 'undefined\settings.json'
+    });
+
+    await delay(250);
+    // Check if the system settings file exists
+    if (fs.existsSync(`${filePath}/${systemsettings}`)) {
+        // If the file exists, read the structure
+        systemstructure = JSON.parse(fs.readFileSync(`${filePath}/${systemsettings}`, 'utf8'));
+    } else {
+        // If the file doesn't exist, get the user path and create the file
+        await changeUserpath();
+        // fs.writeFileSync(filePath + "\\" + systemsettings, JSON.stringify(systemstructure, null, 4), 'utf8');
+    }
+
+    // Check if the user settings file exists
+    if (fs.existsSync(`${systemstructure.path}/${settings}`)) {
+        // If the file exists, read the structure
+        structure = JSON.parse(fs.readFileSync(systemstructure.path + "\\" + settings, 'utf8'));
+    } else {
+        // If the file doesn't exist, create the file with the default structure
+        fs.writeFileSync(`${systemstructure.path}/${settings}`, JSON.stringify(structure, null, 4), 'utf8');
+    }
+
+
+    // Perform other necessary actions
+    await getUpdates();
+    // Update the UI with the settings from the user structure
+    updateUI();
+}
+
+function updateUI() {
+
+    console.log(structure);
+
+    if (structure.realname.save) {
+        realnameInput.value = structure.realname.name;
+        checkBoxRealname.checked = true;
+    }
+    if (structure.cid.save) {
+        usernameInput.value = structure.cid.id;
+        checkBoxUsername.checked = true;
+    }
+    if (structure.password.save) {
+        //passwordInput.value = structure.password.pass;
+        checkBoxPassword.checked = true;
+    }
+    if (structure.passwordhoppie.save) {
+        //passwordhoppieInput.value = structure.passwordhoppie.pass;
+        checkBoxSavepwhoppie.checked = true;
+    }
+    dirBox.value = systemstructure.path;
+    const selectElement = document.getElementById("rating");
+    const optionElement = document.getElementById(structure.rating);
+    selectElement.selectedIndex = optionElement.index;
+
+    applyToPrf.checked = structure.applyToPrf;
+    applyHoppie.checked = structure.applyHoppie;
+
+    dropDownGNG.selectedIndex = structure.region;
+
+    // gng.selectedIndex = structure.region;
+    if (files.selectedIndex < 0) {
+        files.selectedIndex = 0;
+    } else {
+        files.selectedIndex = structure.file;
+    }
+}

updater/src/syncing.html

@@ -0,0 +1,265 @@
+<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+  crossorigin="anonymous">
+  </script>
+<script>
+  $(function () {
+    $("#header").load("header.html");
+    $("#footer").load("footer.html");
+  });
+</script>
+
+<body class="g-sidenav-show bg-dark">
+  <div class="main-content" id="panel">
+
+    <!--Header-->
+    <div id="header"></div>
+
+    <!--CONTENT-->
+    <div class="card mb-4 ecsu-bg-dark-light-out">
+      <div class="card-body">
+        <form>
+          <div class="row">
+            <div class="col-8 ">
+              <h6 class="mb-0 text-white">Syncing</h6>
+            </div>
+            <div class="col-4"><button class="btn btn-sm ecsu-btn-dark ">Save (WIP)</button></div>
+          </div>
+          <div>
+            <h6 class="text-uppercase text-xs font-weight-bolder text-white">Apply to Update</h6>
+            <ul class="list-group ">
+              <li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
+                <div class="form-check form-switch ps-0">
+                  <input class="form-check-input ms-auto" type="checkbox" id="applyToPrf" checked="">
+                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
+                    for="flexSwitchCheckDefault">Credentials into Profiles</label>
+                </div>
+              </li>
+              <li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
+                <div class="form-check form-switch ps-0">
+                  <input class="form-check-input ms-auto" type="checkbox" id="applyHoppie">
+                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
+                    for="flexSwitchCheckDefault1">Hoppie Code into Txt File</label>
+                </div>
+              </li>
+              <!-- <li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
+                <div class="form-check form-switch ps-0">
+                  <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault2" checked="">
+                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
+                    for="flexSwitchCheckDefault2">OBS</label>
+                </div>
+              </li> -->
+            </ul>
+            <!-- <h6 class="text-uppercase text-white text-xs font-weight-bolder mt-4">Application</h6>
+            <ul class="list-group">
+              <li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
+                <div class="form-check form-switch ps-0">
+                  <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault3">
+                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
+                    for="flexSwitchCheckDefault3">New launches and projects</label>
+                </div>
+              </li>
+              <li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
+                <div class="form-check form-switch ps-0">
+                  <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault4" checked="">
+                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
+                    for="flexSwitchCheckDefault4">Monthly product updates</label>
+                </div>
+              </li>
+              <li class="list-group-item border-0 px-0 pb-0 ecsu-bg-dark-light-out">
+                <div class="form-check form-switch ps-0">
+                  <input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault5">
+                  <label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
+                    for="flexSwitchCheckDefault5">Subscribe to newsletter</label>
+                </div>
+              </li>
+            </ul> -->
+          </div>
+      </div>
+      </form>
+    </div>
+  </div>
+
+
+  <!--Footer-->
+  <div id="footer"></div>
+  </div>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/popper.min.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/bootstrap.min.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/chartjs.min.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/Chart.extension.js"></script>
+  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/soft-ui-dashboard.min.js?v=1.0.2"></script>
+  <script>
+    if (document.querySelector("#chart-bars")) {
+      var ctx = document.getElementById("chart-bars").getContext("2d");
+      new Chart(ctx, {
+        type: "bar",
+        data: {
+          labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+          datasets: [{
+            label: "Sales",
+            tension: 0.4,
+            borderWidth: 0,
+            borderRadius: 4,
+            borderSkipped: false,
+            backgroundColor: "#fff",
+            data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
+            maxBarThickness: 6
+          },],
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false,
+            }
+          },
+          interaction: {
+            intersect: false,
+            mode: 'index',
+          },
+          scales: {
+            y: {
+              grid: {
+                drawBorder: false,
+                display: false,
+                drawOnChartArea: false,
+                drawTicks: false,
+              },
+              ticks: {
+                suggestedMin: 0,
+                suggestedMax: 500,
+                beginAtZero: true,
+                padding: 15,
+                font: {
+                  size: 14,
+                  family: "Open Sans",
+                  style: 'normal',
+                  lineHeight: 2
+                },
+                color: "#fff"
+              },
+            },
+            x: {
+              grid: {
+                drawBorder: false,
+                display: false,
+                drawOnChartArea: false,
+                drawTicks: false
+              },
+              ticks: {
+                display: false
+              },
+            },
+          },
+        },
+      });
+
+    };
+    if (document.querySelector("#chart-line")) {
+      var ctx2 = document.getElementById("chart-line").getContext("2d");
+      var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50);
+      gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)");
+      gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)");
+      gradientStroke1.addColorStop(0, "rgba(203,12,159,0)");
+      var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);
+      gradientStroke2.addColorStop(1, "rgba(20,23,39,0.2)");
+      gradientStroke2.addColorStop(0.2, "rgba(72,72,176,0.0)");
+      gradientStroke2.addColorStop(0, "rgba(20,23,39,0)");
+      new Chart(ctx2, {
+        type: "line",
+        data: {
+          labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+          datasets: [{
+            label: "Mobile apps",
+            tension: 0.4,
+            borderWidth: 0,
+            pointRadius: 0,
+            borderColor: "#cb0c9f",
+            borderWidth: 3,
+            backgroundColor: gradientStroke1,
+            fill: true,
+            data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
+            maxBarThickness: 6
+
+          },
+          {
+            label: "Websites",
+            tension: 0.4,
+            borderWidth: 0,
+            pointRadius: 0,
+            borderColor: "#3A416F",
+            borderWidth: 3,
+            backgroundColor: gradientStroke2,
+            fill: true,
+            data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
+            maxBarThickness: 6
+          },
+          ],
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false,
+            }
+          },
+          interaction: {
+            intersect: false,
+            mode: 'index',
+          },
+          scales: {
+            y: {
+              grid: {
+                drawBorder: false,
+                display: true,
+                drawOnChartArea: true,
+                drawTicks: false,
+                borderDash: [5, 5]
+              },
+              ticks: {
+                display: true,
+                padding: 10,
+                color: '#b2b9bf',
+                font: {
+                  size: 11,
+                  family: "Open Sans",
+                  style: 'normal',
+                  lineHeight: 2
+                },
+              }
+            },
+            x: {
+              grid: {
+                drawBorder: false,
+                display: false,
+                drawOnChartArea: false,
+                drawTicks: false,
+                borderDash: [5, 5]
+              },
+              ticks: {
+                display: true,
+                color: '#b2b9bf',
+                padding: 20,
+                font: {
+                  size: 11,
+                  family: "Open Sans",
+                  style: 'normal',
+                  lineHeight: 2
+                },
+              }
+            },
+          },
+        },
+      });
+    };
+  </script>
+  <script src="./js/loopple.js"></script>
+  <script>
+    $(function () {
+      $("#header").load(".\html\header.html");
+      $("#footer").load(".\html\footer.html");
+    });
+  </script>
+</body>

updater/systemfile.json

@@ -0,0 +1,3 @@
+{
+    "path": "F:\\02 Benutzer\\Chef\\Downloads\\Donwload tets"
+}