Changed around line 1
- // Sample data (to be replaced with actual API calls)
- const interruptions = [
- {
- startTime: '2023-10-01 08:00',
- endTime: '2023-10-01 08:30',
- duration: 30,
- machine: 'Mill A',
- reason: 'Maintenance'
- },
- {
- startTime: '2023-10-01 10:15',
- endTime: '2023-10-01 10:45',
- duration: 30,
- machine: 'Mill B',
- reason: 'Material Shortage'
- },
- {
- startTime: '2023-10-01 14:00',
- endTime: '2023-10-01 15:00',
- duration: 60,
- machine: 'Mill C',
- reason: 'Power Outage'
- }
- ];
-
- // Get unique machines for filter
- const machines = [...new Set(interruptions.map(i => i.machine))];
- const machineFilter = document.getElementById('machine-filter');
- machines.forEach(machine => {
- const option = document.createElement('option');
- option.value = machine;
- option.textContent = machine;
- machineFilter.appendChild(option);
- });
-
- // Function to render table
- function renderTable(data) {
- const tbody = document.querySelector('#interruptions tbody');
- tbody.innerHTML = '';
+ document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
- data.forEach(interruption => {
- const row = document.createElement('tr');
- row.innerHTML = `
-
${interruption.startTime} | -
${interruption.endTime} | -
${interruption.duration} minutes | -
${interruption.machine} | -
${interruption.reason} | - `;
- tbody.appendChild(row);
+ mobileMenu?.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
- }
- // Initial render
- renderTable(interruptions);
+ // Sample data - replace with actual API call
+ const sampleData = [
+ {
+ date: '2023-11-01 08:30',
+ machine: 'Mill 1',
+ duration: 45,
+ type: 'Mechanical',
+ description: 'Bearing replacement required'
+ },
+ {
+ date: '2023-11-01 12:15',
+ machine: 'Mill 2',
+ duration: 30,
+ type: 'Electrical',
+ description: 'Power fluctuation detected'
+ },
+ // Add more sample data as needed
+ ];
- // Filter functionality
- document.getElementById('apply-filters').addEventListener('click', () => {
- const minLength = parseInt(document.getElementById('length-filter').value) || 0;
- const selectedMachine = document.getElementById('machine-filter').value;
-
- const filteredData = interruptions.filter(interruption => {
- return interruption.duration >= minLength &&
- (selectedMachine === '' || interruption.machine === selectedMachine);
+ // Populate table with data
+ function populateTable(data) {
+ const tableBody = document.getElementById('interruption-data');
+ tableBody.innerHTML = '';
+
+ data.forEach(row => {
+ const tr = document.createElement('tr');
+ tr.innerHTML = `
+
${row.date} | +
${row.machine} | +
${row.duration} min | +
${row.type} | +
${row.description} | + `;
+ tableBody.appendChild(tr);
+ });
+ }
+
+ // Filter functionality
+ const applyFilters = document.getElementById('apply-filters');
+ applyFilters?.addEventListener('click', () => {
+ const duration = parseInt(document.getElementById('duration').value) || 0;
+ const machine = document.getElementById('machine').value;
+
+ const filteredData = sampleData.filter(row => {
+ return (row.duration >= duration) &&
+ (machine === 'all' || row.machine.toLowerCase() === machine);
+ });
+
+ populateTable(filteredData);
-
- renderTable(filteredData);
- });
+
+ // Initial table population
+ populateTable(sampleData);
+ });
