Electron.js 不允许进行第二次更新,除非你在笔记本电脑中切换不同的活动并返回,这会重置更新限制
12
0
Electron.js 不允许我在第一次更新后进行第二次更新,但它允许在切换到其他选项卡后进行多次更新,然后返回 Electron.js 应用程序。我该如何解决这个问题?我……
Electron.js 不允许我在第一次更新后进行第二次更新,但它允许在切换到其他选项卡后进行多次更新,然后返回 Electron.js 应用程序。
我该如何解决这个问题?
index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temple Town Admin</title>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- External CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Flatpickr CSS for date picker -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
</head>
<body>
<div class="container">
<!-- Top bar with admin greeting -->
<div class="top-bar">
<p>Welcome, Admin</p>
</div>
<!-- Header section with logo and heading -->
<header>
<div class="logo-section">
<img src="assets/logo.png" alt="Temple Town Logo" class="logo">
<h1 class="admin-heading">Admin Panel</h1>
</div>
</header>
<!-- Search/filter section -->
<section class="search-section">
<div class="input-container">
<label for="locationCode">Location Code:</label>
<select id="locationCode"></select>
</div>
<div class="input-container">
<label for="propertyCode">Property Code:</label>
<select id="propertyCode"></select>
</div>
<div class="input-container">
<label for="roomType">Room Type:</label>
<select id="roomType"></select>
</div>
<!-- Start Date Picker -->
<div class="input-container">
<label for="startDate">Start Date:</label>
<input type="text" id="startDate" readonly>
</div>
<!-- End Date Picker -->
<div class="input-container">
<label for="endDate">End Date:</label>
<input type="text" id="endDate" readonly>
</div>
<!-- Button group for actions -->
<div class="button-group">
<button id="searchButton" class="btn primary-btn"><i class="fas fa-search"></i> Search</button>
<button id="refreshButton" class="btn secondary-btn"><i class="fas fa-sync-alt"></i> Refresh</button>
<button id="updateButton" class="btn danger-btn"><i class="fas fa-edit"></i> Update</button>
</div>
</section>
<!-- Table to display availability data -->
<section class="availability-section">
<table id="availabilityTable" class="table table-striped table-hover">
<thead>
<tr>
<th>Date</th>
<th>Property Code</th>
<th>Property Name</th>
<th>Location</th>
<th>Room Type</th>
<th>Rooms Available</th>
<th>Booked</th>
<th>Price</th>
<th>Max Count</th>
</tr>
</thead>
<tbody>
<!-- Data will be dynamically inserted here -->
</tbody>
</table>
</section>
</div>
<!-- JavaScript -->
<script src="renderer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
// Initialize Flatpickr for both date pickers
flatpickr("#startDate", {
dateFormat: "Y-m-d"
});
flatpickr("#endDate", {
dateFormat: "Y-m-d"
});
</script>
</body>
</html>
渲染器.js
const API_BASE_URL = 'http://localhost:5000/api';
async function fetchDistinctValues() {
try {
const response = await fetch(`${API_BASE_URL}/availabilities/distinct`);
const data = await response.json();
const locationCodeSelect = document.getElementById('locationCode');
locationCodeSelect.innerHTML = `<option value="Any">Select Location</option>`;
data.locationCodes.forEach(code => {
locationCodeSelect.innerHTML += `<option value="${code}">${code}</option>`;
});
const roomTypeSelect = document.getElementById('roomType');
roomTypeSelect.innerHTML = `<option value="Any">Select Room Type</option>`;
data.roomTypes.forEach(type => {
roomTypeSelect.innerHTML += `<option value="${type}">${type}</option>`;
});
const propertyCodeSelect = document.getElementById('propertyCode');
propertyCodeSelect.innerHTML = `<option value="Any">Select Property</option>`;
} catch (error) {
console.error('Error fetching distinct values:', error);
}
}
async function fetchPropertyCodesByLocation(locationCode) {
try {
const response = await fetch(`${API_BASE_URL}/availabilities/property_codes?location_code=${locationCode}`);
const data = await response.json();
// Populate property codes for the selected location
const propertyCodeSelect = document.getElementById('propertyCode');
propertyCodeSelect.innerHTML = `<option value="Any">Select Property</option>`;
data.propertyCodes.forEach(code => {
propertyCodeSelect.innerHTML += `<option value="${code}">${code}</option>`;
});
} catch (error) {
console.error('Error fetching property codes for location:', error);
}
}
async function fetchAvailabilities(filters = {}) {
try {
const params = new URLSearchParams();
if (filters.location_code && filters.location_code !== 'Any') {
params.append('location_code', filters.location_code);
}
if (filters.property_code && filters.property_code !== 'Any') {
params.append('property_code', filters.property_code);
}
if (filters.room_type && filters.room_type !== 'Any') {
params.append('room_type', filters.room_type);
}
if (filters.dates && filters.dates.length > 0) {
params.append('start_date', filters.dates[0]);
params.append('end_date', filters.dates[1] || filters.dates[0]);
}
const response = await fetch(`${API_BASE_URL}/availabilities?${params.toString()}`);
const data = await response.json();
populateTable(data);
} catch (error) {
console.error('Error fetching availabilities:', error);
}
}
function populateTable(data) {
const tableBody = document.querySelector('table tbody');
tableBody.innerHTML = ''; // Clear existing table rows
data.forEach(item => {
const row = document.createElement('tr');
row.classList.add('editable-row');
row.innerHTML = `
<td class="date">${item.date}</td>
<td class="property_code">${item.property_code}</td>
<td class="property_name">${item.property_name}</td>
<td class="location">${item.location_code}</td>
<td class="room_type">${item.room_type}</td>
<td contenteditable="true" class="rooms_available">${item.rooms_available}</td>
<td contenteditable="true" class="booked">${item.booked}</td>
<td contenteditable="true" class="price">${item.price}</td>
<td class="max_count">${item.max_count}</td>
`;
tableBody.appendChild(row);
});
reapplyEditable();
}
function reapplyEditable() {
const rows = document.querySelectorAll('tr.editable-row');
rows.forEach(row => {
const editableCells = row.querySelectorAll('[contenteditable]');
editableCells.forEach(cell => {
cell.setAttribute('contenteditable', 'true');
});
row.addEventListener('click', function () {
row.classList.toggle('selected');
});
});
}
async function updateSelectedRows() {
const rows = document.querySelectorAll('tr.selected');
const updates = [];
rows.forEach(row => {
const date = row.querySelector('.date').innerText;
const location_code = row.querySelector('.location').innerText;
const property_code = row.querySelector('.property_code').innerText;
const room_type = row.querySelector('.room_type').innerText;
const rooms_available = row.querySelector('.rooms_available').innerText;
const booked = row.querySelector('.booked').innerText;
const price = row.querySelector('.price').innerText;
updates.push({
date,
location_code,
property_code,
room_type,
rooms_available: parseInt(rooms_available, 10),
booked: parseInt(booked, 10),
price: parseFloat(price)
});
});
if (updates.length === 0) {
alert("No rows selected for update.");
return;
}
try {
const response = await fetch(`${API_BASE_URL}/availabilities/update`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ updates })
});
const result = await response.json();
alert(result.success || result.message);
reapplyEditable();
const selectedLocationCode = document.getElementById('locationCode').value;
const selectedPropertyCode = document.getElementById('propertyCode').value;
const selectedRoomType = document.getElementById('roomType').value;
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
fetchAvailabilities({
location_code: selectedLocationCode,
property_code: selectedPropertyCode,
room_type: selectedRoomType,
dates: [startDate, endDate]
});
rows.forEach(row => row.classList.remove('selected'));
} catch (error) {
console.error('Error updating availabilities:', error);
alert('Failed to update availabilities');
}
}
function addEventListenerSafely(elementId, eventType, callback) {
const element = document.getElementById(elementId);
if (element) {
element.addEventListener(eventType, callback);
} else {
console.warn(`Element with ID ${elementId} not found. Event listener not attached.`);
}
}
addEventListenerSafely('searchButton', 'click', () => {
const selectedLocationCode = document.getElementById('locationCode').value;
const selectedPropertyCode = document.getElementById('propertyCode').value;
const selectedRoomType = document.getElementById('roomType').value;
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
fetchAvailabilities({
location_code: selectedLocationCode,
property_code: selectedPropertyCode,
room_type: selectedRoomType,
dates: [startDate, endDate]
});
});
addEventListenerSafely('updateButton', 'click', () => {
updateSelectedRows();
});
addEventListenerSafely('locationCode', 'change', (event) => {
const selectedLocationCode = event.target.value;
if (selectedLocationCode !== 'Any') {
fetchPropertyCodesByLocation(selectedLocationCode);
} else {
const propertyCodeSelect = document.getElementById('propertyCode');
propertyCodeSelect.innerHTML = `<option value="Any">Select Property</option>`;
}
});
fetchDistinctValues();
主.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
require('electron-reload')(__dirname, {
electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
});
function createWindow() {
const win = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
preload: path.join(__dirname, 'renderer.js'),
nodeIntegration: true,
contextIsolation: false
},
icon: path.join(__dirname, 'assets', 'icon.png')
});
win.loadFile('index.html');
win.webContents.openDevTools();
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
我希望每次单击表格单元格时都进行更新,而不是切换到其他活动,然后返回 Electron.js 应用程序并进行更新。
Electron.js 不允许进行第二次更新,除非你在笔记本电脑中切换不同的活动并返回,这会重置更新限制
下载声明: 本站所有软件和资料均为软件作者提供或网友推荐发布而来,仅供学习和研究使用,不得用于任何商业用途。如本站不慎侵犯你的版权请联系我,我将及时处理,并撤下相关内容!
下载声明: 本站所有软件和资料均为软件作者提供或网友推荐发布而来,仅供学习和研究使用,不得用于任何商业用途。如本站不慎侵犯你的版权请联系我,我将及时处理,并撤下相关内容!
收藏的用户(0)
X
正在加载信息~