feat: tailwindcss

Ide Fix Merge

See merge request julscha/sectorfileupdater!8

.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,69 @@
+{
+    "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": {
+        "dev": "electron-forge start",
+        "package": "electron-forge package",
+        "make": "electron-forge make --platform=win32",
+        "publish": "electron-forge publish"
+    },
+    "keywords": [],
+    "authors": [
+        "Julian <info@julscha.de>",
+        "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",
+        "autoprefixer": "^10.4.20",
+        "electron": "^33.2.1",
+        "postcss": "^8.4.49",
+        "tailwindcss": "^3.4.17"
+    }
+}

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/components/css/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/html/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/components/html/header.html

@@ -0,0 +1,10 @@
+<header class="bg-gray-800 text-white shadow-lg">
+    <nav class="container mx-auto flex justify-between items-center py-4 px-6">
+        <h1 class="text-2xl font-bold">AIRAC Updater</h1>
+        <ul class="flex space-x-6">
+            <li><button onclick="ChangeSite(1)" class="hover:underline transition">Home</button></li>
+            <li><button onclick="ChangeSite(2)" class="hover:underline transition">Push</button></li>
+            <li><button onclick="ChangeSite(3)" class="hover:underline transition">Settings</button></li>
+        </ul>
+    </nav>
+</header>

src/components/js/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/components/js/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/components/js/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/components/js/frontend_handler.js

@@ -0,0 +1,22 @@
+const HomeType= {
+    Home: 1,
+    Push: 2,
+    Settings: 3
+}
+
+function ChangeSite(mimetype){
+    console.log(mimetype);
+    if (mimetype === HomeType.Home){
+        homeDiv.style.display = 'block';
+        pushDiv.style.display = 'none';
+        settingsDiv.style.display = 'none';
+    } else if (mimetype === HomeType.Push){
+        homeDiv.style.display = 'none';
+        pushDiv.style.display = 'block';
+        settingsDiv.style.display = 'none';
+    } else if (mimetype === HomeType.Settings){
+        homeDiv.style.display = 'none';
+        pushDiv.style.display = 'none';
+        settingsDiv.style.display = 'block';
+    }
+}

src/components/js/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/components/js/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/components/js/html_elements.js

@@ -0,0 +1,35 @@
+// Global Variabels
+let settingsProfileDirselectbutton = document.getElementById('settingsProfileDirselectbutton');
+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');
+
+const homeDiv = document.getElementById('homeDiv');
+const pushDiv = document.getElementById('pushDiv');
+const settingsDiv = document.getElementById('settingsDiv');
+
+saveCredBtn.addEventListener('click', (e) => {
+    save();
+});
+
+settingsProfileDirselectbutton.addEventListener('click', (e) => {
+    changeUserpath();
+});

src/components/js/loople.js

@@ -0,0 +1,12 @@
+// 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/components/js/preload.js

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

src/components/js/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/components/js/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/components/views/home.html

@@ -0,0 +1,67 @@
+<section class="container mx-auto p-6 bg-gray-800 shadow-md rounded-lg mt-6">
+  <div class="space-y-6">
+    <div class="flex space-x-4">
+      <div class="w-full">
+        <label for="homeDayDropdown" class="block text-sm font-medium text-gray-300">Day</label>
+        <select id="homeDayDropdown" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:border-gray-600" style="background-color: #2d3748 !important;" onchange="handleDayChange()">
+          <option value="">Choose Day</option>
+        </select>
+      </div>
+
+      <div class="w-full">
+        <label for="homeTypeDropdown" class="block text-sm font-medium text-gray-300">Change Type:</label>
+        <select id="homeTypeDropdown" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:border-gray-600" style="background-color: #2d3748 !important;">
+          <option value="Fix">Fix</option>
+          <option value="Feat">Feat</option>
+          <option value="Sonst">Sonst</option>
+        </select>
+      </div>
+    </div>
+
+
+    <div class="flex space-x-4">
+      <div class="w-full">
+        <label for="homeTicketTypeDropdown" class="block text-sm font-medium text-gray-300">Ticket:</label>
+        <select id="homeTicketTypeDropdown" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:border-gray-600" style="background-color: #2d3748 !important;">
+          <option value="QA">QA</option>
+          <option value="DEV">DEV</option>
+          <option value="DEV">GD</option>
+        </select>
+      </div>
+      <div class="w-full">
+        <label for="homeTicketNumberInput" class="block text-sm font-medium text-gray-300">Ticketnumber:</label>
+        <input id="homeTicketNumberInput" type="text" maxlength="7" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:border-gray-600" style="background-color: #2d3748 !important;">
+      </div>
+    </div>
+
+
+    <div class="space-y-6">
+      <div>
+        <label for="homeTicketDescriptionInput" class="block text-sm font-medium text-gray-300">Description:</label>
+        <input id="homeTicketDescriptionInput" type="text" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white dark:border-gray-600" style="background-color: #2d3748 !important;">
+      </div>
+    </div>
+
+
+    <div class="text-right">
+      <button id="homeDayChangeAddButton" class="bg-blue-600 text-white px-4 py-2 rounded-md shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
+        Add
+      </button>
+    </div>
+  </div>
+</section>
+
+<section class="container mx-auto p-6 bg-gray-800 shadow-md rounded-lg mt-6">
+  <h3 class="text-xl font-bold">Day</h3>
+  <table class="w-full table-auto border-collapse">
+    <thead class="bg-gray-700">
+    <tr>
+      <th class="px-4 py-2 border border-gray-600 text-left text-gray-200">Type</th>
+      <th class="px-4 py-2 border border-gray-600 text-left text-gray-200">Ticket</th>
+      <th class="px-4 py-2 border border-gray-600 text-left text-gray-200">Desciption</th>
+    </tr>
+    </thead>
+    <tbody id="homeDay">
+    </tbody>
+  </table>
+</section>

src/components/views/push.html

@@ -0,0 +1,57 @@
+<section class="container mx-auto p-6 bg-gray-800 shadow-md rounded-lg mt-6">
+  <div class="space-y-6">
+    <div class="flex space-x-4">
+      <div class="w-full">
+        <div>
+          <label for="pushRepoLabel" class="block text-sm font-medium text-gray-300">Repository:</label>
+          <label id="pushRepoLabel" type="text" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white dark:border-gray-600" style="background-color: #2d3748 !important;"></label>
+        </div>
+      </div>
+      <div class="w-full">
+        <div class="space-y-6">
+          <div>
+            <label for="pushTokenInput" class="block text-sm font-medium text-gray-300">Git Token:</label>
+            <label id="pushTokenInput" type="password" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white dark:border-gray-600" style="background-color: #2d3748 !important;"></label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="w-full">
+      <label for="pushTypeDropdown" class="block text-sm font-medium text-gray-300">Git Type:</label>
+      <select id="pushTypeDropdown" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:border-gray-600" style="background-color: #2d3748 !important;">
+        <option value="Fix">GitHub</option>
+        <option value="Feat">GitLab</option>
+        <option value="Sonst">Gitea</option>
+        <option value="Sonst">Sonst (kommt noch)</option>
+      </select>
+    </div>
+    <div class="flex space-x-4">
+      <div class="w-full">
+        <label for="settingsCheckBoxSaveElse" class="flex items-center cursor-pointer">
+          <div class="relative">
+            <input type="checkbox" id="push" class="sr-only">
+            <div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
+            <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
+          </div>
+          <label class="ml-3 block text-sm font-medium text-gray-300">Save Else</label>
+        </label>
+      </div>
+      <div class="w-full">
+        <label for="settingsCheckBoxSaveElse" class="flex items-center cursor-pointer">
+          <div class="relative">
+            <input type="checkbox" id="settingsCheckBoxSaveElse" class="sr-only">
+            <div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
+            <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
+          </div>
+          <label class="ml-3 block text-sm font-medium text-gray-300">Save Else</label>
+        </label>
+      </div>
+    </div>
+
+    <div class="text-right">
+      <button id="push-save-button" class="bg-blue-600 text-white px-4 py-2 rounded-md shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
+        Save Settings
+      </button>
+    </div>
+  </div>
+</section>

src/components/views/settings.html

@@ -0,0 +1,84 @@
+<section class="container mx-auto p-6 bg-gray-800 shadow-md rounded-lg mt-6">
+  <h3 class="text-xl font-bold">Profile Settings</h3>
+  <div class="space-y-6">
+    <div class="flex space-x-4">
+      <div class="w-full">
+        <label for="settingsProfileDirselectbutton" class="block text-sm font-medium text-gray-300">Profile Name:</label>
+        <label id="settingsProfileDirselectprofilename" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" style="background-color: #2d3748 !important;">Kein Profil</label>
+        <input id="settingsProfileDirselectprofilenameInput" type="text" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" style="background-color: #2d3748 !important; display: none"/>
+      </div>
+      <div class="w-full">
+        <label for="settingsProfileDirselectbutton" class="block text-sm font-medium text-gray-300">Select Profile</label>
+        <button id="settingsProfileDirselectbutton" class="bg-blue-600 text-white px-4 py-2 rounded-md shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Select Directory</button>
+      </div>
+    </div>
+    <div class="w-full">
+      <label id="settingsProfileDirselectPath" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" style="background-color: #2d3748 !important;">Kein Verzeichnis</label>
+    </div>
+    <div class="flex space-x-4">
+      <div class="w-full">
+        <label for="settingsCheckBoxSaveGitSettings" class="flex items-center cursor-pointer">
+          <div class="relative">
+            <input type="checkbox" id="settingsCheckBoxSaveGitSettings" class="sr-only">
+            <div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
+            <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
+          </div>
+          <label class="ml-3 block text-sm font-medium text-gray-300">Save Git Settings</label>
+        </label>
+      </div>
+      <div class="w-full">
+        <label for="settingsCheckBoxSaveElse" class="flex items-center cursor-pointer">
+          <div class="relative">
+            <input type="checkbox" id="settingsCheckBoxSaveElse" class="sr-only">
+            <div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
+            <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
+          </div>
+          <label class="ml-3 block text-sm font-medium text-gray-300">Save Else</label>
+        </label>
+      </div>
+    </div>
+
+    <div class="text-right">
+      <button id="settings-profile-edit-button" class="bg-blue-600 text-white px-4 py-2 rounded-md shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+        Edit Profile
+      </button>
+      <button id="settings-profile-save-button" class="bg-blue-600 text-white px-4 py-2 rounded-md shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+        Save Profile
+      </button>
+    </div>
+  </div>
+</section>
+<section class="container mx-auto p-6 bg-gray-800 shadow-md rounded-lg mt-6">
+  <h3 class="text-xl font-bold">Git Settings</h3>
+  <div class="space-y-6">
+    <div class="w-full">
+      <div>
+        <label for="settings-repo-input" class="block text-sm font-medium text-gray-300">Repository Link:</label>
+        <input id="settings-repo-input" type="text" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" style="background-color: #2d3748 !important;">
+      </div>
+    </div>
+    <div class="w-full">
+      <div class="space-y-6">
+        <div>
+          <label for="settings-token-input" class="block text-sm font-medium text-gray-300">Git Token:</label>
+          <input id="settings-token-input" type="password" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" style="background-color: #2d3748 !important;">
+        </div>
+      </div>
+    </div>
+    <div class="w-full">
+      <label for="settings-type-dropdown" class="block text-sm font-medium text-gray-300">Git Type:</label>
+      <select id="settings-type-dropdown" class="mt-1 block w-full p-2 border border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" style="background-color: #2d3748 !important;">
+        <option value="Fix">GitHub</option>
+        <option value="Feat">GitLab</option>
+        <option value="Sonst">Gitea</option>
+        <option value="Sonst">Sonst (noch nicht implementiert)</option>
+      </select>
+    </div>
+
+    <div class="text-right">
+      <button id="settings-save-button" class="bg-blue-600 text-white px-4 py-2 rounded-md shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
+        Save Settings
+      </button>
+    </div>
+  </div>
+</section>

src/index.html

@@ -0,0 +1,184 @@
+<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="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+    <link rel="stylesheet" href="components/css/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="settingsProfileDirselectbutton">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="components/js/data_structure.js"></script>
+        <script src="components/js/html_elements.js"></script>
+        <script src="renderer.js"></script>
+        <script src="components/js/startup.js"></script>
+        <script src="components/js/save.js"></script>
+        <script src="components/js/getFiles.js"></script>
+        <script src="components/js/download.js"></script>
+        <script src="components/js/git_ops.js"></script>
+        <script src="components/js/append_to_file.js"></script>
+    </div>
+</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, 'index1.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,44 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AIRAC Updater</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link href="components/css/index.css" rel="stylesheet">
+    <script src="components/js/index.js"></script>
+  </head>
+  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+          crossorigin="anonymous">
+  </script>
+  <script>
+    $(function () {
+      $("#header").load("./components/html/header.html");
+      $("#homeDiv").load("./components/views/home.html");
+      $("#pushDiv").load("./components/views/push.html");
+      $("#settingsDiv").load("./components/views/settings.html");
+      $("#footer").load("./components/html/footer.html");
+    });
+  </script>
+
+  <body class="bg-gray-900 text-gray-100">
+    <div id="header"></div>
+
+      <div id="homeDiv"></div>
+      <div id="pushDiv" style="display: none;"></div>
+      <div id="settingsDiv" style="display: none;"></div>
+
+    <!--Footer-->
+    <div id="footer"></div>
+    <script src="./components/js/frontend_handler.js"></script>
+    <script src="components/js/data_structure.js"></script>
+    <script src="components/js/html_elements.js"></script>
+    <script src="renderer.js"></script>
+    <script src="components/js/startup.js"></script>
+    <script src="components/js/save.js"></script>
+    <script src="components/js/getFiles.js"></script>
+    <script src="components/js/download.js"></script>
+    <script src="components/js/git_ops.js"></script>
+    <script src="components/js/append_to_file.js"></script>
+  </body>
+</html>

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

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
+

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.