8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

Electron.js 不允许进行第二次更新,除非你在笔记本电脑中切换不同的活动并返回,这会重置更新限制

lava 1月前

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 应用程序并进行更新。

帖子版权声明 1、本帖标题:Electron.js 不允许进行第二次更新,除非你在笔记本电脑中切换不同的活动并返回,这会重置更新限制
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由lava在本站《css》版块原创发布, 转载请注明出处!
最新回复 (0)
返回
作者最近主题: