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

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

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

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

@ -1,28 +1,52 @@
<div class="position-relative">
<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">
<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>
Back</button>
</div>
<section class="py-5">
<div class="container text-center">
<h1 class="display-4"><strong>Cooperate Cleaner</strong></h1>
<p class="lead mb-3">Enter your text, clear, done</p>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-md-9">
<div class="position-relative">
<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">
<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>
Back
</button>
</div>
<section class="py-5">
<div class="container text-center">
<h1 class="display-4"><strong>Cooperate Cleaner</strong></h1>
<p class="lead mb-3">Enter your text, clear, done</p>
<h2>Input:</h2>
<textarea class="form-control w-100" rows="10"></textarea>
<button type="button" class="btn btn-success mt-3" 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">
<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>
Clear my input</button>
<div class="visually-hidden">
<h2 class="mt-3">Output:</h2>
<textarea class="form-control w-100" rows="10"></textarea>
<h2>Input:</h2>
<textarea class="form-control w-100" rows="10" id="input-textarea"></textarea>
<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">
<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>
Clear my input
</button>
<div class="visually-hidden" id="output-container-div">
<h2 class="mt-5">Output:</h2>
<textarea class="form-control w-100" rows="10" id="output-textarea"></textarea>
</div>
</div>
</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>
</section>
</div>

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

@ -1,23 +1,75 @@
$(document).ready(function() {
console.log("Initialization of cleaner.js finished.");
init();
});
(function() {
let config;
function init() {
$(document).keydown(function(event) {
if (event.altKey) {
if (event.keyCode === 13) {
event.preventDefault();
clean();
$(document).ready(function() {
console.log("Initialization of cleaner.js finished.");
config = JSON.parse(window.localStorage.getItem("config"));
console.log(config);
init();
});
function init() {
$(document).keydown(function(event) {
if (event.altKey) {
if (event.keyCode === 13) {
event.preventDefault();
clean();
}
}
}
});
$("#cleaner-clean-btn").click(function() {
console.log("Clean button clicked");
clean();
});
}
});
$("#cleaner-clean-btn").click(function() {
console.log("Clean button clicked");
clean();
});
function clean() {
console.log("Cleaning...")
}
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() {
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">String to Replace</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>
</tr>
</thead>

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

@ -1,10 +1,18 @@
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-output-str-input" placeholder="Replace with" value="[REPLACE-STR]"></td>' +
' <td class="align-middle">' +
' <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-handle"></div>' +
' </div>' +
@ -25,7 +33,7 @@ $("document").ready(function() {
loadConfig();
$("#add-rule-btn").click(function() {
appendRow(generateRowTemplate("", "", true));
appendRow(generateRowTemplate("", "", true, true));
});
$(document).on("click", ".rule-trash-btn", function() {
@ -42,13 +50,21 @@ function appendRow(rowTemplate) {
updateRowIndexes();
}
function generateRowTemplate(str, outputStr, enabled) {
function generateRowTemplate(str, outputStr, enabled, ignoreCase) {
var row = ruleRowTemplate;
row = row.replaceAll("[INDEX]", $(".table tbody tr").length + 1);
row = row.replace("[STR-TO-REPLACE]", str);
row = row.replace("[REPLACE-STR]", outputStr);
if (!enabled) {
row = row.replace("checked", "");
if (enabled) {
row = row.replace("[ENABLED]", "checked");
} else {
row = row.replace("[ENABLED]", "");
}
if(ignoreCase){
row = row.replace("[IGNORECASE]", "checked");
} else {
row = row.replace("[IGNORECASE]", "");
}
return row;
}
@ -66,11 +82,12 @@ function buildAndSaveConfig() {
$("#saved-status").hide();
var rules = [];
$(".table tbody tr").each(function(index) {
$(".table tbody tr").each(function() {
var rule = {};
rule["strToReplace"] = $(this).find(".rule-input-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);
});
configJson["rules"] = rules;
@ -89,7 +106,7 @@ function loadConfig() {
if (config) {
configJson = JSON.parse(config);
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();
@ -104,4 +121,7 @@ function bindChangeEvents() {
$(".rule-enabled-by-default-toggle").off("change").on("change", function() {
buildAndSaveConfig();
});
$(".ignore-case-toggle").off("change").on("change", function() {
buildAndSaveConfig();
});
}