Max665/clearapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished config

Browse Source 
- Added clearer logic
- Added clearer UI
This commit is contained in:
Max W. 2024-05-20 23:26:56 +02:00
parent d801e39c44
commit 72cb095dec
6 changed files with 157 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html data-bs-theme="dark"> <html data-bs-theme="dark" lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Cooperate Cleaner</title> <title>Cooperate Cleaner</title>
@ -14,7 +14,7 @@
</head> </head>
<body> <body>
<div id="navbar"></div> <div id="navbar"></div>
<div id="content"></div> <div id="content" class="vh-100"></div>
<div id="footer"></div> <div id="footer"></div>
<!-- Neutralino.js client. This file is gitignored, <!-- Neutralino.js client. This file is gitignored,
because `neu update` typically downloads it. because `neu update` typically downloads it.

3
src/views/cleaner/cleaner.css
View File

@ -0,0 +1,3 @@
.sidebar {
border-left: 1px solid #b1b1b1;
}

44
src/views/cleaner/cleaner.html
View File

@ -1,9 +1,13 @@
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-md-9">
<div class="position-relative"> <div class="position-relative">
<button type="button" class="btn btn-light back-button top-0 start-0 m-3" onclick="loadView('home')"> <button type="button" class="btn btn-light back-button top-0 start-0 m-3" onclick="loadView('home')">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/> <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
</svg> </svg>
Back</button> Back
</button>
</div> </div>
<section class="py-5"> <section class="py-5">
<div class="container text-center"> <div class="container text-center">
@ -11,18 +15,38 @@
<p class="lead mb-3">Enter your text, clear, done</p> <p class="lead mb-3">Enter your text, clear, done</p>
<h2>Input:</h2> <h2>Input:</h2>
<textarea class="form-control w-100" rows="10"></textarea> <textarea class="form-control w-100" rows="10" id="input-textarea"></textarea>
<button type="button" class="btn btn-success mt-3" id="cleaner-clean-btn"> <button type="button" class="btn btn-success mt-5" id="cleaner-clean-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cpu" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cpu" viewBox="0 0 16 16">
<path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0m-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/> <path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0m-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/>
</svg> </svg>
Clear my input</button> Clear my input
<div class="visually-hidden"> </button>
<h2 class="mt-3">Output:</h2> <div class="visually-hidden" id="output-container-div">
<textarea class="form-control w-100" rows="10"></textarea> <h2 class="mt-5">Output:</h2>
<textarea class="form-control w-100" rows="10" id="output-textarea"></textarea>
</div> </div>
</div> </div>
</section> </section>
</div>
<div class="col-md-3">
<div class="sidebar h-100 d-flex flex-column justify-content-center ps-4 pe-4">
<h2>Quick Settings</h2>
<h4 class="mt-4">Auto copy</h4>
<div class="form-check ms-3">
<input class="form-check-input" type="checkbox" value="" id="enable-auto-copy" checked>
<label class="form-check-label" for="enable-auto-copy">
Enable auto copy to clipboard
</label>
</div>
<h4 class="mt-4">Enabled filters</h4>
<ul class="list-group list-group-flush" id="filter-list">
<!-- Filter checkboxes will be dynamically added here -->
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</ul>
</div>
</div>
</div>
</div>

54
src/views/cleaner/cleaner.js
View File

@ -1,5 +1,10 @@
(function() {
let config;
$(document).ready(function() { $(document).ready(function() {
console.log("Initialization of cleaner.js finished."); console.log("Initialization of cleaner.js finished.");
config = JSON.parse(window.localStorage.getItem("config"));
console.log(config);
init(); init();
}); });
@ -16,8 +21,55 @@ function init() {
console.log("Clean button clicked"); console.log("Clean button clicked");
clean(); clean();
}); });
initQuickSettings();
}
function initQuickSettings() {
const filterList = $("#filter-list");
filterList.empty(); // Clear any existing list items
config.rules.forEach(rule => {
const listItem = $(`
<li class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="${rule.strToReplace}" ${rule.enabled ? 'checked' : ''}>
<label class="form-check-label" for="${rule.strToReplace}">
${rule.strToReplace}
</label>
</div>
</li>
`);
filterList.append(listItem);
});
$(".form-check-input").change(function() {
const rule = config.rules.find(r => r.strToReplace === $(this).attr("id"));
if (rule) {
rule.enabled = $(this).is(":checked");
//window.localStorage.setItem("config", JSON.stringify(config));
}
});
} }
function clean() { function clean() {
console.log("Cleaning...") console.log("Cleaning...");
// Read the input from the textarea
let outputText = $("#input-textarea").val();
// Process each rule
config.rules.forEach(rule => {
if (rule.enabled) {
const searchValue = rule.ignoreCase ? new RegExp(rule.strToReplace, 'gi') : new RegExp(rule.strToReplace, 'g');
outputText = outputText.replace(searchValue, rule.replaceStr);
} }
});
// Output the processed text to the output textarea
$("#output-textarea").val(outputText);
// Display the output container
$("#output-container-div").removeClass("visually-hidden");
}
})();

3
src/views/config/config.html
View File

@ -36,7 +36,8 @@
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">String to Replace</th> <th scope="col">String to Replace</th>
<th scope="col">Replace With</th> <th scope="col">Replace With</th>
<th scope="col">Enabled by default</th> <th scope="col">Filter enabled</th>
<th scope="col">Ignore case</th>
<th scope="col">Action</th> <th scope="col">Action</th>
</tr> </tr>
</thead> </thead>

38
src/views/config/config.js
View File

@ -1,10 +1,18 @@
var ruleRowTemplate = '<tr class="border-bottom" id="rule-[INDEX]">' + var ruleRowTemplate = '<tr class="border-bottom" id="rule-[INDEX]">' +
' <td scope="row" class="align-middle"><p class="mb-0">[INDEX]</p></td>' + ' <td class="align-middle"><p class="mb-0">[INDEX]</p></td>' +
' <td class="align-middle"><input type="text" class="form-control rule-input-str-input" placeholder="String to replace" value="[STR-TO-REPLACE]"></td>' + ' <td class="align-middle"><input type="text" class="form-control rule-input-str-input" placeholder="String to replace" value="[STR-TO-REPLACE]"></td>' +
' <td class="align-middle"><input type="text" class="form-control rule-output-str-input" placeholder="Replace with" value="[REPLACE-STR]"></td>' + ' <td class="align-middle"><input type="text" class="form-control rule-output-str-input" placeholder="Replace with" value="[REPLACE-STR]"></td>' +
' <td class="align-middle">' + ' <td class="align-middle">' +
' <label class="toggle-switch">' + ' <label class="toggle-switch">' +
' <input class="rule-enabled-by-default-toggle" type="checkbox" checked>' + ' <input class="rule-enabled-by-default-toggle" type="checkbox" [ENABLED]>' +
' <div class="toggle-switch-background">' +
' <div class="toggle-switch-handle"></div>' +
' </div>' +
' </label>' +
' </td>' +
' <td class="align-middle">' +
' <label class="toggle-switch">' +
' <input class="ignore-case-toggle" type="checkbox" [IGNORECASE]>' +
' <div class="toggle-switch-background">' + ' <div class="toggle-switch-background">' +
' <div class="toggle-switch-handle"></div>' + ' <div class="toggle-switch-handle"></div>' +
' </div>' + ' </div>' +
@ -25,7 +33,7 @@ $("document").ready(function() {
loadConfig(); loadConfig();
$("#add-rule-btn").click(function() { $("#add-rule-btn").click(function() {
appendRow(generateRowTemplate("", "", true)); appendRow(generateRowTemplate("", "", true, true));
}); });
$(document).on("click", ".rule-trash-btn", function() { $(document).on("click", ".rule-trash-btn", function() {
@ -42,13 +50,21 @@ function appendRow(rowTemplate) {
updateRowIndexes(); updateRowIndexes();
} }
function generateRowTemplate(str, outputStr, enabled) { function generateRowTemplate(str, outputStr, enabled, ignoreCase) {
var row = ruleRowTemplate; var row = ruleRowTemplate;
row = row.replaceAll("[INDEX]", $(".table tbody tr").length + 1); row = row.replaceAll("[INDEX]", $(".table tbody tr").length + 1);
row = row.replace("[STR-TO-REPLACE]", str); row = row.replace("[STR-TO-REPLACE]", str);
row = row.replace("[REPLACE-STR]", outputStr); row = row.replace("[REPLACE-STR]", outputStr);
if (!enabled) { if (enabled) {
row = row.replace("checked", ""); row = row.replace("[ENABLED]", "checked");
} else {
row = row.replace("[ENABLED]", "");
}
if(ignoreCase){
row = row.replace("[IGNORECASE]", "checked");
} else {
row = row.replace("[IGNORECASE]", "");
} }
return row; return row;
} }
@ -66,11 +82,12 @@ function buildAndSaveConfig() {
$("#saved-status").hide(); $("#saved-status").hide();
var rules = []; var rules = [];
$(".table tbody tr").each(function(index) { $(".table tbody tr").each(function() {
var rule = {}; var rule = {};
rule["strToReplace"] = $(this).find(".rule-input-str-input").val(); rule["strToReplace"] = $(this).find(".rule-input-str-input").val();
rule["replaceStr"] = $(this).find(".rule-output-str-input").val(); rule["replaceStr"] = $(this).find(".rule-output-str-input").val();
rule["enabledByDefault"] = $(this).find(".rule-enabled-by-default-toggle").is(":checked"); rule["enabled"] = $(this).find(".rule-enabled-by-default-toggle").is(":checked");
rule["ignoreCase"] = $(this).find(".ignore-case-toggle").is(":checked");
rules.push(rule); rules.push(rule);
}); });
configJson["rules"] = rules; configJson["rules"] = rules;
@ -89,7 +106,7 @@ function loadConfig() {
if (config) { if (config) {
configJson = JSON.parse(config); configJson = JSON.parse(config);
configJson["rules"].forEach(function(rule) { configJson["rules"].forEach(function(rule) {
appendRow(generateRowTemplate(rule["strToReplace"], rule["replaceStr"], rule["enabledByDefault"])); appendRow(generateRowTemplate(rule["strToReplace"], rule["replaceStr"], rule["enabled"], rule["ignoreCase"]));
}); });
} }
$("#saving-status").hide(); $("#saving-status").hide();
@ -104,4 +121,7 @@ function bindChangeEvents() {
$(".rule-enabled-by-default-toggle").off("change").on("change", function() { $(".rule-enabled-by-default-toggle").off("change").on("change", function() {
buildAndSaveConfig(); buildAndSaveConfig();
}); });
$(".ignore-case-toggle").off("change").on("change", function() {
buildAndSaveConfig();
});
} }