Skip to content

Commit

Permalink
webui: add cron toggle
Browse files Browse the repository at this point in the history
minor ui change
  • Loading branch information
KOWX712 committed Dec 16, 2024
1 parent 812522f commit 8010fcc
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 48 deletions.
26 changes: 20 additions & 6 deletions module/webroot/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,36 @@ <h2 id="status-header">Status</h2>
</div>
<div class="box" id="control-panel">
<h2>Control Panel</h2>
<div class="toggle-container">
<i id="update-icon" class="fa fa-download"></i>
<span id="update-text">Update</span>
<div class="toggle-list" id="update-toggle-container">
<i class="control-icon" id="update-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="26px" viewBox="0 -1000 960 960" width="26px"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
</i>
<span class="toggle-text">Module Update</span>
<label class="toggle-switch">
<input type="checkbox" id="toggle-version" disabled>
<span class="slider round"></span>
</label>
</div>
<div class="action-redirect-container">
<i id="action-icon" class="fa fa-play"></i>
<span id="action-redirect-text">Action Redirect</span>
<div class="toggle-list" id="action-redirect-container">
<i class="control-icon" id="action-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="26px" viewBox="60 -980 860 860" width="26px"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
</i>
<span class="toggle-text">Action Redirect</span>
<label class="toggle-switch">
<input type="checkbox" id="action-redirect" disabled>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-list" id="cron-toggle-container">
<i class="control-icon" id="update-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="26px" viewBox="0 -1000 1000 1000" width="26px"><path d="M480-120q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q82 0 155.5 35T760-706v-94h80v240H600v-80h110q-41-56-101-88t-129-32q-117 0-198.5 81.5T200-480q0 117 81.5 198.5T480-200q105 0 183.5-68T756-440h82q-15 137-117.5 228.5T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>
</i>
<span class="toggle-text">Update Hosts Daily</span>
<label class="toggle-switch">
<input type="checkbox" id="toggle-cron" disabled>
<span class="slider round"></span>
</label>
</div>
</div>
<div class="box">
<h2>
Expand Down
47 changes: 43 additions & 4 deletions module/webroot/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,12 @@ const header = document.querySelector('.header');
const actionButton = document.querySelector('.action-button');
const inputs = document.querySelectorAll('input');
const focusClass = 'input-focused';
const toggleContainer = document.querySelector('.toggle-container');
const toggleContainer = document.getElementById('update-toggle-container');
const toggleVersion = document.getElementById('toggle-version');
const actionRedirectContainer = document.querySelector('.action-redirect-container');
const actionRedirectContainer = document.getElementById('action-redirect-container');
const actionRedirectStatus = document.getElementById('action-redirect');
const cronContainer = document.getElementById('cron-toggle-container');
const cronToggle = document.getElementById('toggle-cron');

let clickCount = 0;
let timeout;
Expand Down Expand Up @@ -50,6 +52,7 @@ async function loadFile(fileType) {
await loadVersionFromModuleProp();
checkUpdateStatus();
checkRedirectStatus();
checkCronStatus();
} catch (error) {
console.error(`Failed to load ${fileType} file: ${error}`);
}
Expand Down Expand Up @@ -126,6 +129,17 @@ async function checkRedirectStatus() {
}
}

// Function to check cron status
async function checkCronStatus() {
try {
const result = await execCommand(`grep -q "bindhosts.sh" ${basePath}/crontabs/root`);
cronToggle.checked = !result;
} catch (error) {
console.error('Error checking cron status:', error);
cronToggle.checked = 0;
}
}

// Function to get the status from module.prop and update the status in the WebUI
async function updateStatusFromModuleProp() {
try {
Expand Down Expand Up @@ -497,7 +511,7 @@ toggleContainer.addEventListener('click', async function () {
});
checkUpdateStatus();
} catch (error) {
console.error("Failed to execute bindhosts.sh", error);
console.error("Failed to toggle update", error);
}
});

Expand All @@ -506,13 +520,38 @@ actionRedirectContainer.addEventListener('click', async function () {
try {
actionRedirectStatus.checked = !actionRedirectStatus.checked;
await execCommand(`su -c 'echo "magisk_webui_redirect=${actionRedirectStatus.checked ? 1 : 0}" > /data/adb/bindhosts/webui_setting.sh'`);
showPrompt(`${actionRedirectStatus.checked ? 'Enabled' : 'Disabled'} Magisk action redirect WebUI`, actionRedirectStatus.checked);
showPrompt(`${actionRedirectStatus.checked ? '[+] Enabled' : '[x] Disabled'} Magisk action redirect WebUI`, actionRedirectStatus.checked);
checkRedirectStatus();
} catch (error) {
console.error("Failed to execute change status", error);
}
});

// Event listener for the cron toggle switch
cronContainer.addEventListener('click', async function () {
try {
cronToggle.checked = !cronToggle.checked;
let command;
if (cronToggle.checked) {
command = "su -c 'sh /data/adb/modules/bindhosts/bindhosts.sh --enable-cron'";
} else {
command = "su -c 'sh /data/adb/modules/bindhosts/bindhosts.sh --disable-cron'";
}
const result = await execCommand(command);
const lines = result.split("\n");
lines.forEach(line => {
if (line.includes("[+]")) {
showPrompt(line, true);
} else if (line.includes("[x]")) {
showPrompt(line, false);
}
});
checkCronStatus();
} catch (error) {
console.error("Failed to toggle cron", error);
}
});

// Initial load
window.onload = () => {
adjustHeaderForMMRL();
Expand Down
55 changes: 17 additions & 38 deletions module/webroot/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ body.input-focused {
}

.content {
margin-top: 25px;
margin-top: 40px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -108,51 +108,35 @@ body.input-focused {
font-size: 14px;
}

.action-redirect-container {
display: none;
align-items: center;
margin-bottom: 5px;
background-color: #fff;
padding: 2px 10px;
border-radius: 10px;
border: 1px solid #ccc;
height: 38px;
white-space: nowrap;
text-align: left;
}

.toggle-container {
.toggle-list {
display: flex;
align-items: center;
margin-bottom: 5px;
background-color: #fff;
background-color: transparent;
padding: 2px 10px;
border-radius: 10px;
border: 1px solid #ccc;
height: 38px;
white-space: nowrap;
text-align: left;
border-bottom: 1px solid #ccc;
}

#action-redirect-text {
font-size: 16px;
font-weight: bold;
padding-left: 13px;
.toggle-list:last-child {
border-bottom: none;
margin-bottom: 0;
}

#action-icon {
font-size: 20px;
#action-redirect-container {
display: none;
}

#update-text {
.toggle-text {
font-size: 16px;
font-weight: bold;
padding-left: 10px;
}

#update-icon {
padding-top: 5px;
font-size: 20px;
.control-icon {
fill: #000000;
}

.toggle-switch {
Expand Down Expand Up @@ -477,6 +461,7 @@ label {
background-color: #121212;
}

.toggle-list,
li {
border-bottom: 1px solid #6E6E6E;
}
Expand All @@ -502,17 +487,11 @@ label {
border: 1px solid #6E6E6E;
}

.action-redirect-container,
.toggle-container {
background-color: #343434;
border: 1px solid #6E6E6E;
}

.controlPanel {
background-color: none;
}

.slider {
background-color: #6E6E6E;
}

.control-icon {
fill: #FFFFFF;
}
}

0 comments on commit 8010fcc

Please sign in to comment.