Merge pull request #2 from JustusPlays78/develop

made morde oversight

.gitignore

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

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

data-out.yaml

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

package.json

@@ -0,0 +1,67 @@
+{
+    "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": "^33.2.1"
+    }
+}

programInternal.yaml

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

sectorfileUpdater.yaml

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

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);
+            }
+        });
+    });
+}

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"
+};

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}`);
+}

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>

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;
+}

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;
+                    });
+                }
+            }
+        }
+    });
+}

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>

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();
+});

src/index.css

@@ -0,0 +1,230 @@
+body {
+    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;
+  }

src/index.html

@@ -0,0 +1,191 @@
+<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 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>
+<script>
+    $(function () {
+    $("#header").load("./header.html");
+    $("#footer").load("./footer.html");
+    });
+</script>
+
+
+<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="password" 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>
+                </div>
+            </form>
+
+            <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>

src/index.js

@@ -0,0 +1,66 @@
+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();
+}
+
+const createWindow = () => {
+    // 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.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// 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();
+    }
+});
+
+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();
+    }
+});

src/index1.html

@@ -0,0 +1,41 @@
+<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-->
+
+    <!--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>

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', () => {
+
+    },
+    
+    );
+  
+
+

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')
+        }
+    })
+})

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();
+});

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');
+}

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>

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;
+    }
+}

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

@@ -1,58 +0,0 @@
-{
-  "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": {}
-        }
-      ]
-    }
-  },
-  "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/src/index.css

@@ -1,7 +0,0 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif;
-  margin: auto;
-  max-width: 38rem;
-  padding: 2rem;
-}

updater/src/index.html

@@ -1,12 +0,0 @@
-<!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>

updater/src/index.js

@@ -1,50 +0,0 @@
-const { app, BrowserWindow } = require('electron');
-const path = require('path');
-
-// Handle creating/removing shortcuts on Windows when installing/uninstalling.
-// eslint-disable-next-line global-require
-if (require('electron-squirrel-startup')) {
-  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();
-};
-
-// 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.
-app.on('ready', createWindow);
-
-// Quit when all windows are closed, except on macOS. There, it's common
-// 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();
-  }
-});
-
-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.