Spaces:
Running
Running
where are other nevigation tabs? it is not working. Please consider that onboard satellite, we will have many sensors for scientifc purpise in addition to some of the sensors required for the proper fucntioning of satellite. Make all nevigation tabs properly working. If possible add a gantt chart per insturmnets
a481e76 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Instrument Schedule - Space Packet Sleuth</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.2.4/dist/frappe-charts.min.iife.js"></script> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <custom-navbar></custom-navbar> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="mb-12"> | |
| <h1 class="text-4xl font-bold mb-4">Instrument Schedule</h1> | |
| <p class="text-xl text-gray-300">Gantt chart showing planned instrument operations</p> | |
| </header> | |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold">Operation Timeline</h2> | |
| <div class="flex gap-4"> | |
| <button class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700 transition"> | |
| <i data-feather="download" class="mr-2"></i> Export | |
| </button> | |
| <button class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition"> | |
| <i data-feather="refresh-cw" class="mr-2"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <div id="gantt-chart" class="h-96"></div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> | |
| <h2 class="text-2xl font-semibold mb-6">Instrument Utilization</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="h-64"> | |
| <canvas id="utilization-chart"></canvas> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="power-usage-chart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script> | |
| feather.replace(); | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Gantt Chart | |
| const ganttChart = new frappe.Chart("#gantt-chart", { | |
| type: 'gantt', | |
| data: { | |
| labels: [ | |
| "Solar Spectrometer", | |
| "Magnetometer", | |
| "Multispectral Imager", | |
| "Gamma Ray Detector", | |
| "Plasma Analyzer" | |
| ], | |
| datasets: [ | |
| { | |
| name: "Observation", | |
| values: [ | |
| [new Date("2023-01-01"), new Date("2023-01-05")], | |
| [new Date("2023-01-03"), new Date("2023-01-09")], | |
| [new Date("2023-01-06"), new Date("2023-01-12")], | |
| [new Date("2023-01-10"), new Date("2023-01-15")], | |
| [new Date("2023-01-14"), new Date("2023-01-20")] | |
| ], | |
| color: "#3b82f6" | |
| }, | |
| { | |
| name: "Calibration", | |
| values: [ | |
| [new Date("2023-01-05"), new Date("2023-01-06")], | |
| [new Date("2023-01-09"), new Date("2023-01-10")], | |
| [new Date("2023-01-12"), new Date("2023-01-13")], | |
| [new Date("2023-01-15"), new Date("2023-01-16")], | |
| [null, null] | |
| ], | |
| color: "#10b981" | |
| } | |
| ] | |
| }, | |
| colors: ["#3b82f6", "#10b981"], | |
| barOptions: { | |
| height: 24, | |
| spaceRatio: 0.5 | |
| } | |
| }); | |
| // Utilization Chart | |
| const ctx1 = document.getElementById('utilization-chart').getContext('2d'); | |
| new Chart(ctx1, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Observation', 'Calibration', 'Idle', 'Maintenance'], | |
| datasets: [{ | |
| data: [45, 15, 30, 10], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.8)', | |
| 'rgba(16, 185, 129, 0.8)', | |
| 'rgba(107, 114, 128, 0.8)', | |
| 'rgba(239, 68, 68, 0.8)' | |
| ] | |
| }] | |
| }, | |
| options: { responsive: true, maintainAspectRatio: false } | |
| }); | |
| // Power Usage Chart | |
| const ctx2 = document.getElementById('power-usage-chart').getContext('2d'); | |
| new Chart(ctx2, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Solar Spec', 'Magnetometer', 'Multispectral', 'Gamma Ray', 'Plasma'], | |
| datasets: [{ | |
| label: 'Power Usage (W)', | |
| data: [12, 8, 25, 18, 15], | |
| backgroundColor: 'rgba(245, 158, 11, 0.8)' | |
| }] | |
| }, | |
| options: { responsive: true, maintainAspectRatio: false } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |