144 lines
4.5 KiB
JavaScript
144 lines
4.5 KiB
JavaScript
let delayTimeout;
|
|
let brightnessTimeout;
|
|
let colorTimeout;
|
|
let color2Timeout;
|
|
|
|
async function post(path, value) {
|
|
console.log(path, value);
|
|
try {
|
|
const response = await fetch(path, {
|
|
method: "POST",
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: value
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error during POST request:', error);
|
|
}
|
|
}
|
|
|
|
async function get(path) {
|
|
try {
|
|
const response = await fetch(path);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
return await response.json(); // Assuming you are expecting JSON response
|
|
} catch (error) {
|
|
console.error('Error during GET request:', error);
|
|
}
|
|
}
|
|
|
|
async function updateColor(event) {
|
|
event.preventDefault();
|
|
clearTimeout(colorTimeout);
|
|
colorTimeout = setTimeout(async function() {
|
|
const color = document.getElementById('color').value;
|
|
await post("/color", color);
|
|
}, 500);
|
|
}
|
|
|
|
async function updateColor2(event) {
|
|
event.preventDefault();
|
|
clearTimeout(color2Timeout);
|
|
color2Timeout = setTimeout(async function() {
|
|
const color = document.getElementById('color2').value;
|
|
await post("/color2", color);
|
|
}, 500);
|
|
}
|
|
|
|
async function updatePattern(pattern) {
|
|
event.preventDefault();
|
|
await post("/pattern", pattern);
|
|
}
|
|
|
|
async function updateBrightness(event) {
|
|
event.preventDefault();
|
|
clearTimeout(brightnessTimeout);
|
|
brightnessTimeout = setTimeout(async function() {
|
|
const brightness = document.getElementById('brightness').value;
|
|
await post('/brightness', brightness);
|
|
}, 500);
|
|
}
|
|
|
|
async function updateDelay(event) {
|
|
event.preventDefault();
|
|
clearTimeout(delayTimeout);
|
|
delayTimeout = setTimeout(async function() {
|
|
const delay = document.getElementById('delay').value;
|
|
await post('/delay', delay);
|
|
}, 500);
|
|
}
|
|
|
|
async function updateNumLeds(event) {
|
|
event.preventDefault();
|
|
const numLeds = document.getElementById('num_leds').value;
|
|
await post('/num_leds', numLeds);
|
|
}
|
|
|
|
async function updateWifi(event) {
|
|
event.preventDefault();
|
|
const ssid = document.getElementById('ssid').value;
|
|
const password = document.getElementById('password').value;
|
|
console.log(ssid, password);
|
|
//await post('/num_leds', numLeds);
|
|
}
|
|
|
|
function createPatternButtons(patterns) {
|
|
const container = document.getElementById('pattern_buttons');
|
|
container.innerHTML = ''; // Clear previous buttons
|
|
|
|
patterns.forEach(pattern => {
|
|
const button = document.createElement('button');
|
|
button.type = 'button'; // Use 'button' instead of 'submit'
|
|
button.textContent = pattern;
|
|
button.value = pattern;
|
|
button.addEventListener('click', async function(event) {
|
|
event.preventDefault();
|
|
await updatePattern(pattern);
|
|
});
|
|
container.appendChild(button);
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
document.getElementById('color').addEventListener('input', updateColor);
|
|
document.getElementById('color2').addEventListener('input', updateColor2);
|
|
document.getElementById('delay').addEventListener('input', updateDelay);
|
|
document.getElementById('brightness').addEventListener('input', updateBrightness);
|
|
document.getElementById('num_leds_form').addEventListener('submit', updateNumLeds);
|
|
document.getElementById('wifi_form').addEventListener('submit', updateWifi);
|
|
document.getElementById('delay').addEventListener('touchend', updateDelay);
|
|
document.getElementById('brightness').addEventListener('touchend', updateBrightness);
|
|
|
|
try {
|
|
const patterns = await get("/patterns");
|
|
console.log('Patterns fetched:', patterns);
|
|
createPatternButtons(patterns);
|
|
} catch (error) {
|
|
console.error('Error fetching patterns:', error);
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
// Function to toggle the display of the settings menu
|
|
function selectSettings() {
|
|
const settingsMenu = document.getElementById('settings_menu');
|
|
controls = document.getElementById('controls');
|
|
settingsMenu.style.display = 'block';
|
|
controls.style.display = 'none';
|
|
}
|
|
|
|
function selectControls() {
|
|
const settingsMenu = document.getElementById('settings_menu');
|
|
controls = document.getElementById('controls');
|
|
settingsMenu.style.display = 'none';
|
|
controls.style.display = 'block';
|
|
}
|