Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AV Solutions Knowledge Base</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .solution-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 70px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .sidebar-icon { | |
| margin-right: 0; | |
| } | |
| .sidebar-toggle { | |
| transition: transform 0.3s ease; | |
| } | |
| .sidebar.collapsed .sidebar-toggle { | |
| transform: rotate(180deg); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .markdown-content h2 { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-top: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: #1e40af; | |
| } | |
| .markdown-content h3 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-top: 1.25rem; | |
| margin-bottom: 0.75rem; | |
| color: #1e40af; | |
| } | |
| .markdown-content p { | |
| margin-bottom: 1rem; | |
| line-height: 1.6; | |
| } | |
| .markdown-content ul, .markdown-content ol { | |
| margin-bottom: 1rem; | |
| padding-left: 1.5rem; | |
| } | |
| .markdown-content ul { | |
| list-style-type: disc; | |
| } | |
| .markdown-content ol { | |
| list-style-type: decimal; | |
| } | |
| .markdown-content pre { | |
| background-color: #f3f4f6; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| overflow-x: auto; | |
| margin-bottom: 1rem; | |
| } | |
| .markdown-content code { | |
| background-color: #f3f4f6; | |
| padding: 0.2rem 0.4rem; | |
| border-radius: 0.25rem; | |
| font-family: monospace; | |
| } | |
| .markdown-content blockquote { | |
| border-left: 4px solid #3b82f6; | |
| padding-left: 1rem; | |
| margin-left: 0; | |
| color: #4b5563; | |
| font-style: italic; | |
| } | |
| .editor-toolbar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| padding: 0.5rem; | |
| background-color: #f3f4f6; | |
| border-radius: 0.5rem 0.5rem 0 0; | |
| border: 1px solid #e5e7eb; | |
| border-bottom: none; | |
| } | |
| .editor-toolbar button { | |
| background-color: white; | |
| border: 1px solid #d1d5db; | |
| border-radius: 0.25rem; | |
| padding: 0.25rem 0.5rem; | |
| cursor: pointer; | |
| font-size: 0.875rem; | |
| } | |
| .editor-toolbar button:hover { | |
| background-color: #f9fafb; | |
| } | |
| #solutionContent { | |
| min-height: 300px; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0 0 0.5rem 0.5rem; | |
| padding: 1rem; | |
| background-color: white; | |
| } | |
| .tag-input { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| align-items: center; | |
| padding: 0.5rem; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.5rem; | |
| min-height: 42px; | |
| } | |
| .tag { | |
| background-color: #e0e7ff; | |
| color: #1e40af; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .tag-remove { | |
| margin-left: 0.25rem; | |
| cursor: pointer; | |
| } | |
| .equipment-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 0.5rem; | |
| border-bottom: 1px solid #e5e7eb; | |
| } | |
| .equipment-item:last-child { | |
| border-bottom: none; | |
| } | |
| .equipment-selector { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .equipment-selector-item { | |
| padding: 0.5rem; | |
| cursor: pointer; | |
| border-bottom: 1px solid #e5e7eb; | |
| } | |
| .equipment-selector-item:hover { | |
| background-color: #f3f4f6; | |
| } | |
| .equipment-selector-item:last-child { | |
| border-bottom: none; | |
| } | |
| .equipment-selector-item.selected { | |
| background-color: #e0e7ff; | |
| } | |
| .markdown-preview { | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| background-color: white; | |
| min-height: 300px; | |
| } | |
| .equipment-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .equipment-table th, .equipment-table td { | |
| padding: 0.75rem; | |
| text-align: left; | |
| border-bottom: 1px solid #e5e7eb; | |
| } | |
| .equipment-table th { | |
| background-color: #f3f4f6; | |
| font-weight: 600; | |
| } | |
| .equipment-table tr:hover { | |
| background-color: #f9fafb; | |
| } | |
| .equipment-image { | |
| width: 60px; | |
| height: 60px; | |
| object-fit: contain; | |
| background-color: #f3f4f6; | |
| border-radius: 0.25rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-blue-900 text-white w-64 flex flex-col"> | |
| <div class="p-4 flex items-center justify-between border-b border-blue-800"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-video sidebar-icon text-xl mr-3"></i> | |
| <span class="sidebar-text font-bold text-xl">AV Solutions KB</span> | |
| </div> | |
| <button id="sidebarToggle" class="sidebar-toggle text-white focus:outline-none"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 border-b border-blue-800"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search solutions..." class="w-full bg-blue-800 text-white placeholder-blue-300 rounded py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-blue-300"></i> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <div class="p-2"> | |
| <div class="sidebar-item group"> | |
| <a href="#" class="flex items-center p-2 text-blue-100 hover:bg-blue-800 rounded transition" data-section="dashboard"> | |
| <i class="fas fa-tachometer-alt sidebar-icon mr-3"></i> | |
| <span class="sidebar-text">Dashboard</span> | |
| </a> | |
| </div> | |
| <div class="sidebar-item group"> | |
| <a href="#" class="flex items-center p-2 text-blue-100 hover:bg-blue-800 rounded transition" data-section="solutions"> | |
| <i class="fas fa-lightbulb sidebar-icon mr-3"></i> | |
| <span class="sidebar-text">All Solutions</span> | |
| </a> | |
| </div> | |
| <div class="sidebar-item group"> | |
| <a href="#" class="flex items-center p-2 text-blue-100 hover:bg-blue-800 rounded transition" data-section="categories"> | |
| <i class="fas fa-folder sidebar-icon mr-3"></i> | |
| <span class="sidebar-text">Categories</span> | |
| </a> | |
| </div> | |
| <div class="sidebar-item group"> | |
| <a href="#" class="flex items-center p-2 text-blue-100 hover:bg-blue-800 rounded transition" data-section="equipment"> | |
| <i class="fas fa-microchip sidebar-icon mr-3"></i> | |
| <span class="sidebar-text">Equipment Database</span> | |
| </a> | |
| </div> | |
| <div class="sidebar-item group"> | |
| <a href="#" class="flex items-center p-2 text-blue-100 hover:bg-blue-800 rounded transition" data-section="vendors"> | |
| <i class="fas fa-building sidebar-icon mr-3"></i> | |
| <span class="sidebar-text">Vendors</span> | |
| </a> | |
| </div> | |
| <div class="sidebar-item group"> | |
| <a href="#" class="flex items-center p-2 text-blue-100 hover:bg-blue-800 rounded transition" data-section="projects"> | |
| <i class="fas fa-project-diagram sidebar-icon mr-3"></i> | |
| <span class="sidebar-text">Project References</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-blue-800"> | |
| <h3 class="sidebar-text text-xs uppercase text-blue-400 mb-2">Quick Filters</h3> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center p-2 text-blue-100 hover:bg-blue-800 rounded transition" data-filter="recent"> | |
| <i class="fas fa-clock sidebar-icon mr-3"></i> | |
| <span class="sidebar-text">Recently Added</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 text-blue-100 hover:bg-blue-800 rounded transition" data-filter="popular"> | |
| <i class="fas fa-fire sidebar-icon mr-3"></i> | |
| <span class="sidebar-text">Most Viewed</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 text-blue-100 hover:bg-blue-800 rounded transition" data-filter="favorites"> | |
| <i class="fas fa-star sidebar-icon mr-3"></i> | |
| <span class="sidebar-text">Favorites</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t border-blue-800"> | |
| <div class="flex items-center"> | |
| <img src="https://ui-avatars.com/api/?name=AV+Tech&background=3b82f6&color=fff" alt="User" class="w-8 h-8 rounded-full"> | |
| <div class="ml-3 sidebar-text"> | |
| <div class="text-sm font-medium">AV Technician</div> | |
| <div class="text-xs text-blue-300">Admin</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-6 py-4 flex justify-between items-center"> | |
| <h1 class="text-2xl font-semibold text-gray-800" id="pageTitle">Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <button id="newSolutionBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center transition"> | |
| <i class="fas fa-plus mr-2"></i> | |
| <span>New Solution</span> | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="p-6"> | |
| <!-- Dashboard Section --> | |
| <div id="dashboardSection" class="section-content fade-in"> | |
| <!-- ... (existing dashboard content) ... --> | |
| </div> | |
| <!-- Solutions Section --> | |
| <div id="solutionsSection" class="section-content hidden fade-in"> | |
| <!-- ... (existing solutions content) ... --> | |
| </div> | |
| <!-- Equipment Database Section --> | |
| <div id="equipmentSection" class="section-content hidden fade-in"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold">Equipment Database</h2> | |
| <div class="flex space-x-3"> | |
| <button id="addEquipmentBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center transition"> | |
| <i class="fas fa-plus mr-2"></i> | |
| <span>Add Equipment</span> | |
| </button> | |
| <div class="relative"> | |
| <input type="text" id="equipmentSearchInput" placeholder="Search equipment..." class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="equipment-table"> | |
| <thead> | |
| <tr> | |
| <th>Image</th> | |
| <th>Model</th> | |
| <th>Type</th> | |
| <th>Manufacturer</th> | |
| <th>Category</th> | |
| <th>Status</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="equipmentTableBody"> | |
| <!-- Equipment items will be populated here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-4 border-t flex justify-between items-center"> | |
| <div class="text-sm text-gray-600"> | |
| Showing <span id="equipmentStart">1</span> to <span id="equipmentEnd">10</span> of <span id="equipmentTotal">50</span> entries | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="prevPageBtn" class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100 disabled:opacity-50" disabled> | |
| Previous | |
| </button> | |
| <button id="nextPageBtn" class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add/Edit Equipment Modal --> | |
| <div id="equipmentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6 border-b"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-xl font-semibold" id="equipmentModalTitle">Add New Equipment</h3> | |
| <button id="closeEquipmentModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <form id="equipmentForm"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="equipmentModel" class="block text-sm font-medium text-gray-700 mb-1">Model Name*</label> | |
| <input type="text" id="equipmentModel" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| </div> | |
| <div> | |
| <label for="equipmentManufacturer" class="block text-sm font-medium text-gray-700 mb-1">Manufacturer*</label> | |
| <select id="equipmentManufacturer" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| <option value="">Select manufacturer</option> | |
| <option value="Crestron">Crestron</option> | |
| <option value="Biamp">Biamp</option> | |
| <option value="Shure">Shure</option> | |
| <option value="QSC">QSC</option> | |
| <option value="Extron">Extron</option> | |
| <option value="Logitech">Logitech</option> | |
| <option value="Cisco">Cisco</option> | |
| <option value="Poly">Poly</option> | |
| <option value="Yamaha">Yamaha</option> | |
| <option value="Other">Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="equipmentType" class="block text-sm font-medium text-gray-700 mb-1">Equipment Type*</label> | |
| <select id="equipmentType" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| <option value="">Select type</option> | |
| <option value="Control Processor">Control Processor</option> | |
| <option value="Touch Panel">Touch Panel</option> | |
| <option value="Audio Processor">Audio Processor</option> | |
| <option value="Microphone">Microphone</option> | |
| <option value="Speaker">Speaker</option> | |
| <option value="Video Conferencing">Video Conferencing</option> | |
| <option value="Video Switcher">Video Switcher</option> | |
| <option value="Video Extender">Video Extender</option> | |
| <option value="Digital Signage">Digital Signage</option> | |
| <option value="Other">Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="equipmentCategory" class="block text-sm font-medium text-gray-700 mb-1">Category*</label> | |
| <select id="equipmentCategory" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| <option value="">Select category</option> | |
| <option value="Control Systems">Control Systems</option> | |
| <option value="Audio Systems">Audio Systems</option> | |
| <option value="Video Systems">Video Systems</option> | |
| <option value="Conferencing">Conferencing</option> | |
| <option value="Digital Signage">Digital Signage</option> | |
| <option value="Lighting">Lighting</option> | |
| <option value="Network">Network</option> | |
| <option value="Other">Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="equipmentStatus" class="block text-sm font-medium text-gray-700 mb-1">Status*</label> | |
| <select id="equipmentStatus" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| <option value="Active">Active</option> | |
| <option value="Discontinued">Discontinued</option> | |
| <option value="End of Life">End of Life</option> | |
| <option value="New">New</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="equipmentFirmware" class="block text-sm font-medium text-gray-700 mb-1">Latest Firmware</label> | |
| <input type="text" id="equipmentFirmware" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="equipmentImage" class="block text-sm font-medium text-gray-700 mb-1">Image URL</label> | |
| <input type="text" id="equipmentImage" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="https://example.com/image.jpg"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="equipmentDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="equipmentDescription" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="equipmentSpecs" class="block text-sm font-medium text-gray-700 mb-1">Specifications (JSON)</label> | |
| <textarea id="equipmentSpecs" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 font-mono text-sm">{ | |
| "inputs": ["HDMI", "USB"], | |
| "outputs": ["HDMI", "Network"], | |
| "power": "100-240V AC", | |
| "dimensions": "19\" rack mount" | |
| }</textarea> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-3"> | |
| <button type="button" id="cancelEquipmentBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Cancel | |
| </button> | |
| <button type="submit" id="saveEquipmentBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Save Equipment | |
| </button> | |
| </div> | |
| <input type="hidden" id="equipmentId"> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Solution Detail Section (Hidden by default) --> | |
| <div id="solutionDetailSection" class="hidden"> | |
| <!-- ... (existing solution detail content) ... --> | |
| </div> | |
| <!-- New Solution Section --> | |
| <div id="newSolutionSection" class="hidden"> | |
| <!-- ... (existing new solution content) ... --> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Initial equipment data (50 entries) | |
| const initialEquipment = [ | |
| { id: 1, model: "TSW-760", manufacturer: "Crestron", type: "Touch Panel", category: "Control Systems", status: "Active", image: "https://www.crestron.com/Images/Products/Control-Systems/Touch-Screens/TSW-Series/TSW-760/hero-standard.jpg" }, | |
| { id: 2, model: "TesiraFORTE DAN VT", manufacturer: "Biamp", type: "Audio Processor", category: "Audio Systems", status: "Active", image: "https://www.biamp.com/-/media/images/products/tesira/tesiraforte-dan-vt/tesiraforte-dan-vt-hero.ashx" }, | |
| { id: 3, model: "CP3", manufacturer: "Crestron", type: "Control Processor", category: "Control Systems", status: "Active", image: "https://www.crestron.com/Images/Products/Control-Systems/Control-Processors/CP3/hero-standard.jpg" }, | |
| { id: 4, model: "Rally Plus", manufacturer: "Logitech", type: "Video Conferencing", category: "Conferencing", status: "Active", image: "https://resource.logitech.com/w_692,c_lpad,ar_4:3,q_auto,f_auto,dpr_1.0/d_transparent.gif/content/dam/logitech/en/products/video-conferencing/rally-plus/rally-plus-gallery-1.png?v=1" }, | |
| { id: 5, model: "MXA910", manufacturer: "Shure", type: "Microphone", category: "Audio Systems", status: "Active", image: "https://www.shure.com/-/media/images/products/microphones/mxa/2018_mxa910_side_1200x1200.ashx" }, | |
| { id: 6, model: "DTP HDMI 4K 330", manufacturer: "Extron", type: "Video Extender", category: "Video Systems", status: "Active", image: "https://www.extron.com/img/product/dtp-hdmi-4k-330/dtp-hdmi-4k-330-hero_500x500.png" }, | |
| { id: 7, model: "Core 110f", manufacturer: "QSC", type: "DSP Processor", category: "Audio Systems", status: "Active", image: "https://www.qsc.com/-/media/qsc/images/products/systems/core/core-110f/core-110f-hero.ashx" }, | |
| { id: 8, model: "XD1234", manufacturer: "BrightSign", type: "Digital Signage", category: "Digital Signage", status: "Active", image: "https://www.brightsign.biz/-/media/brightsign/product-images/xd/xd1234/xd1234-hero.ashx" }, | |
| { id: 9, model: "Webex Codec Pro", manufacturer: "Cisco", type: "Video Conferencing", category: "Conferencing", status: "Active", image: "https://www.cisco.com/c/dam/en/us/products/collateral/collaboration-endpoints/webex-codec-pro/hero-image-webex-codec-pro.png" }, | |
| { id: 10, model: "NX-2200", manufacturer: "AMX", type: "Controller", category: "Control Systems", status: "Active", image: "https://www.harman.com/-/media/images/products/amx/controllers/nx-2200/nx-2200-hero.ashx" }, | |
| { id: 11, model: "P300", manufacturer: "Crestron", type: "Power Controller", category: "Control Systems", status: "Active", image: "https://www.crestron.com/Images/Products/Control-Systems/Power-Controllers/P300/hero-standard.jpg" }, | |
| { id: 12, model: "DSP-128", manufacturer: "Biamp", type: "Audio Processor", category: "Audio Systems", status: "Active", image: "https://www.biamp.com/-/media/images/products/tesira/dsp-128/dsp-128-hero.ashx" }, | |
| { id: 13, model: "QLXD4", manufacturer: "Shure", type: "Wireless Receiver", category: "Audio Systems", status: "Active", image: "https://www.shure.com/-/media/images/products/microphones/qlx-d/qlxd4/qlxd4_side_1200x1200.ashx" }, | |
| { id: 14, model: "Core 8 Flex", manufacturer: "QSC", type: "DSP Processor", category: "Audio Systems", status: "Active", image: "https://www.qsc.com/-/media/qsc/images/products/systems/core/core-8-flex/core-8-flex-hero.ashx" }, | |
| { id: 15, model: "IN1608", manufacturer: "Extron", type: "Video Switcher", category: "Video Systems", status: "Active", image: "https://www.extron.com/img/product/in1608/in1608-hero_500x500.png" }, | |
| { id: 16, model: "MeetUp", manufacturer: "Logitech", type: "Video Conferencing", category: "Conferencing", status: "Active", image: "https://resource.logitech.com/w_692,c_lpad,ar_4:3,q_auto,f_auto,dpr_1.0/d_transparent.gif/content/dam/logitech/en/products/video-conferencing/meetup/meetup-gallery-1.png?v=1" }, | |
| { id: 17, model: "MXA310", manufacturer: "Shure", type: "Microphone", category: "Audio Systems", status: "Active", image: "https://www.shure.com/-/media/images/products/microphones/mxa/2018_mxa310_side_1200x1200.ashx" }, | |
| { id: 18, model: "NV-32-H", manufacturer: "Crestron", type: "Digital Signage", category: "Digital Signage", status: "Active", image: "https://www.crestron.com/Images/Products/Digital-Signage/NV-Series/NV-32-H/hero-standard.jpg" }, | |
| { id: 19, model: "RoomKit Mini", manufacturer: "Cisco", type: "Video Conferencing", category: "Conferencing", status: "Active", image: "https://www.cisco.com/c/dam/en/us/products/collateral/collaboration-endpoints/room-kit-mini/roomkit-mini-hero.png" }, | |
| { id: 20, model: "DX80", manufacturer: "Poly", type: "Video Conferencing", category: "Conferencing", status: "Discontinued", image: "https://www.poly.com/content/dam/polycom/images/products/conferencing/dx80/dx80-hero.png" }, | |
| { id: 21, model: "HDBaseT 4K 330", manufacturer: "Extron", type: "Video Extender", category: "Video Systems", status: "Active", image: "https://www.extron.com/img/product/hdbaset-4k-330/hdbaset-4k-330-hero_500x500.png" }, | |
| { id: 22, model: "CCX500", manufacturer: "Poly", type: "Video Conferencing", category: "Conferencing", status: "Active", image: "https://www.poly.com/content/dam/polycom/images/products/conferencing/ccx500/ccx500-hero.png" }, | |
| { id: 23, model: "P300", manufacturer: "Crestron", type: "Power Controller", category: "Control Systems", status: "Active", image: "https://www.crestron.com/Images/Products/Control-Systems/Power-Controllers/P300/hero-standard.jpg" }, | |
| { id: 24, model: "DSP-128", manufacturer: "Biamp", type: "Audio Processor", category: "Audio Systems", status: "Active", image: "https://www.biamp.com/-/media/images/products/tesira/dsp-128/dsp-128-hero.ashx" }, | |
| { id: 25, model: "QLXD4", manufacturer: "Shure", type: "Wireless Receiver", category: "Audio Systems", status: "Active", image: "https://www.shure.com/-/media/images/products/microphones/qlx-d/qlxd4/qlxd4_side_1200x1200.ashx" }, | |
| { id: 26, model: "Core 8 Flex", manufacturer: "QSC", type: "DSP Processor", category: "Audio Systems", status: "Active", image: "https://www.qsc.com/-/media/qsc/images/products/systems/core/core-8-flex/core-8-flex-hero.ashx" }, | |
| { id: 27, model: "IN1608", manufacturer: "Extron", type: "Video Switcher", category: "Video Systems", status: "Active", image: "https://www.extron.com/img/product/in1608/in1608-hero_500x500.png" }, | |
| { id: 28, model: "MeetUp", manufacturer: "Logitech", type: "Video Conferencing", category: "Conferencing", status: "Active", image: "https://resource.logitech.com/w_692,c_lpad,ar_4:3,q_auto,f_auto,dpr_1.0/d_transparent.gif/content/dam/logitech/en/products/video-conferencing/meetup/meetup-gallery-1.png?v=1" }, | |
| { id: 29, model: "MXA310", manufacturer: "Shure", type: "Microphone", category: "Audio Systems", status: "Active", image: "https://www.shure.com/-/media/images/products/microphones/mxa/2018_mxa310_side_1200x1200.ashx" }, | |
| { id: 30, model: "NV-32-H", manufacturer: "Crestron", type: "Digital Signage", category: "Digital Signage", status: "Active", image: "https://www.crestron.com/Images/Products/Digital-Signage/NV-Series/NV-32-H/hero-standard.jpg" }, | |
| { id: 31, model: "RoomKit Mini", manufacturer: "Cisco", type: "Video Conferencing", category: "Conferencing", status: "Active", image: "https://www.cisco.com/c/dam/en/us/products/collateral/collaboration-endpoints/room-kit-mini/roomkit-mini-hero.png" }, | |
| { id: 32, model: "DX80", manufacturer: "Poly", type: "Video Conferencing", category: "Conferencing", status: "Discontinued", image: "https://www.poly.com/content/dam/polycom/images/products/conferencing/dx80/dx80-hero.png" }, | |
| { id: 33, model: "HDBaseT 4K 330", manufacturer: "Extron", type: "Video Extender", category: "Video Systems", status: "Active", image: "https://www.extron.com/img/product/hdbaset-4k-330/hdbaset-4k-330-hero_500x500.png" }, | |
| { id: 34, model: "CCX500", manufacturer: "Poly", type: "Video Conferencing", category: "Conferencing", status: "Active", image: "https://www.poly.com/content/dam/polycom/images/products/conferencing/ccx500/ccx500-hero.png" }, | |
| { id: 35, model: "HDMI 4K 330", manufacturer: "Extron", type: "Video Switcher", category: "Video Systems", status: "Active", image: "https://www.extron.com/img/product/hdmi-4k-330/hdmi-4k-330-hero_500x500.png" }, | |
| { id: 36, model: "TSC7", manufacturer: "Crestron", type: "Touch Panel", category: "Control Systems", status: "Active", image: "https://www.crestron.com/Images/Products/Control-Systems/Touch-Screens/TSC-Series/TSC7/hero-standard.jpg" }, | |
| { id: 37, model: "TesiraFORTE AVB VT", manufacturer: "Biamp", type: "Audio Processor", category: "Audio Systems", status: "Active", image: "https://www.biamp.com/-/media/images/products/tesira/tesiraforte-avb-vt/tesiraforte-avb-vt-hero.ashx" }, | |
| { id: 38, model: "CP4", manufacturer: "Crestron", type: "Control Processor", category: "Control Systems", status: "Active", image: "https://www.crestron.com/Images/Products/Control-Systems/Control-Processors/CP4/hero-standard.jpg" }, | |
| { id: 39, model: "Rally Bar Mini", manufacturer: "Logitech", type: "Video Conferencing", category: "Conferencing", status: "Active", image: "https://resource.logitech.com/w_692,c_lpad,ar_4:3,q_auto,f_auto,dpr_1.0/d_transparent.gif/content/dam/logitech/en/products/video-conferencing/rally-bar-mini/rally-bar-mini-gallery-1.png?v=1" }, | |
| { id: 40, model: "MXA710", manufacturer: "Shure", type: "Microphone", category: "Audio Systems", status: "Active", image: "https://www.shure.com/-/media/images/products/microphones/mxa/2018_mxa710_side_1200x1200.ashx" }, | |
| { id: 41, model: "DTP HDMI 4K 440", manufacturer: "Extron", type: "Video Extender", category: "Video Systems", status: "Active", image: "https://www.extron.com/img/product/dtp-hdmi-4k-440/dtp-hdmi-4k-440-hero_500x500.png" }, | |
| { id: 42, model: "Core 510i", manufacturer: "QSC", type: "DSP Processor", category: "Audio Systems", status: "Active", image: "https://www.qsc.com/-/media/qsc/images/products/systems/core/core-510i/core-510i-hero.ashx" }, | |
| { id: 43, model: "XD234", manufacturer: "BrightSign", type: "Digital Signage", category: "Digital Signage", status: "Active", image: "https://www.brightsign.biz/-/media/brightsign/product-images/xd/xd234/xd234-hero.ashx" }, | |
| { id: 44, model: "Webex Board", manufacturer: "Cisco", type: "Video Conferencing", category: "Conferencing", status: "Active", image: "https://www.cisco.com/c/dam/en/us/products/collateral/collaboration-endpoints/webex-board/hero-image-webex-board.png" }, | |
| { id: 45, model: "NX-3200", manufacturer: "AMX", type: "Controller", category: "Control Systems", status: "Active", image: "https://www.harman.com/-/media/images/products/amx/controllers/nx-3200/nx-3200-hero.ashx" }, | |
| { id: 46, model: "P400", manufacturer: "Crestron", type: "Power Controller", category: "Control Systems", status: "Active", image: "https://www.crestron.com/Images/Products/Control-Systems/Power-Controllers/P400/hero-standard.jpg" }, | |
| { id: 47, model: "DSP-256", manufacturer: "Biamp", type: "Audio Processor", category: "Audio Systems", status: "Active", image: "https://www.biamp.com/-/media/images/products/tesira/dsp-256/dsp-256-hero.ashx" }, | |
| { id: 48, model: "QLXD2", manufacturer: "Shure", type: "Wireless Receiver", category: "Audio Systems", status: "Active", image: "https://www.shure.com/-/media/images/products/microphones/qlx-d/qlxd2/qlxd2_side_1200x1200.ashx" }, | |
| { id: 49, model: "Core 1100", manufacturer: "QSC", type: "DSP Processor", category: "Audio Systems", status: "Active", image: "https://www.qsc.com/-/media/qsc/images/products/systems/core/core-1100/core-1100-hero.ashx" }, | |
| { id: 50, model: "IN1808", manufacturer: "Extron", type: "Video Switcher", category: "Video Systems", status: "Active", image: "https://www.extron.com/img/product/in1808/in1808-hero_500x500.png" } | |
| ]; | |
| // Equipment database functionality | |
| let equipmentData = [...initialEquipment]; | |
| let currentPage = 1; | |
| const itemsPerPage = 10; | |
| let editingEquipmentId = null; | |
| // Initialize equipment table | |
| function renderEquipmentTable() { | |
| const tableBody = document.getElementById('equipmentTableBody'); | |
| tableBody.innerHTML = ''; | |
| const startIndex = (currentPage - 1) * itemsPerPage; | |
| const endIndex = Math.min(startIndex + itemsPerPage, equipmentData.length); | |
| const paginatedData = equipmentData.slice(startIndex, endIndex); | |
| paginatedData.forEach(equipment => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td> | |
| <img src="${equipment.image || 'https://via.placeholder.com/60x60?text=No+Image'}" alt="${equipment.model}" class="equipment-image"> | |
| </td> | |
| <td class="font-medium">${equipment.model}</td> | |
| <td>${equipment.type}</td> | |
| <td>${equipment.manufacturer}</td> | |
| <td>${equipment.category}</td> | |
| <td> | |
| <span class="px-2 py-1 text-xs rounded-full ${ | |
| equipment.status === 'Active' ? 'bg-green-100 text-green-800' : | |
| equipment.status === 'Discontinued' ? 'bg-yellow-100 text-yellow-800' : | |
| 'bg-red-100 text-red-800' | |
| }"> | |
| ${equipment.status} | |
| </span> | |
| </td> | |
| <td> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800 edit-equipment" data-id="${equipment.id}"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-800 delete-equipment" data-id="${equipment.id}"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </td> | |
| `; | |
| tableBody.appendChild(row); | |
| }); | |
| // Update pagination info | |
| document.getElementById('equipmentStart').textContent = startIndex + 1; | |
| document.getElementById('equipmentEnd').textContent = endIndex; | |
| document.getElementById('equipmentTotal').textContent = equipmentData.length; | |
| // Update pagination buttons | |
| document.getElementById('prevPageBtn').disabled = currentPage === 1; | |
| document.getElementById('nextPageBtn').disabled = endIndex >= equipmentData.length; | |
| // Add event listeners to edit and delete buttons | |
| document.querySelectorAll('.edit-equipment').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const equipmentId = parseInt(this.getAttribute('data-id')); | |
| editEquipment(equipmentId); | |
| }); | |
| }); | |
| document.querySelectorAll('.delete-equipment').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const equipmentId = parseInt(this.getAttribute('data-id')); | |
| deleteEquipment(equipmentId); | |
| }); | |
| }); | |
| } | |
| // Add new equipment | |
| function addEquipment(equipment) { | |
| const newId = equipmentData.length > 0 ? Math.max(...equipmentData.map(e => e.id)) + 1 : 1; | |
| equipment.id = newId; | |
| equipmentData.unshift(equipment); | |
| currentPage = 1; | |
| renderEquipmentTable(); | |
| } | |
| // Edit equipment | |
| function editEquipment(id) { | |
| const equipment = equipmentData.find(e => e.id === id); | |
| if (!equipment) return; | |
| editingEquipmentId = id; | |
| document.getElementById('equipmentModalTitle').textContent = 'Edit Equipment'; | |
| document.getElementById('equipmentId').value = equipment.id; | |
| document.getElementById('equipmentModel').value = equipment.model; | |
| document.getElementById('equipmentManufacturer').value = equipment.manufacturer; | |
| document.getElementById('equipmentType').value = equipment.type; | |
| document.getElementById('equipmentCategory').value = equipment.category; | |
| document.getElementById('equipmentStatus').value = equipment.status; | |
| document.getElementById('equipmentImage').value = equipment.image || ''; | |
| document.getElementById('equipmentDescription').value = equipment.description || ''; | |
| document.getElementById('equipmentFirmware').value = equipment.firmware || ''; | |
| document.getElementById('equipmentSpecs').value = equipment.specs || '{}'; | |
| document.getElementById('equipmentModal').classList.remove('hidden'); | |
| } | |
| // Update equipment | |
| function updateEquipment(id, updatedData) { | |
| const index = equipmentData.findIndex(e => e.id === id); | |
| if (index !== -1) { | |
| equipmentData[index] = { ...equipmentData[index], ...updatedData }; | |
| renderEquipmentTable(); | |
| } | |
| } | |
| // Delete equipment | |
| function deleteEquipment(id) { | |
| if (confirm('Are you sure you want to delete this equipment?')) { | |
| equipmentData = equipmentData.filter(e => e.id !== id); | |
| if (equipmentData.length <= (currentPage - 1) * itemsPerPage && currentPage > 1) { | |
| currentPage--; | |
| } | |
| renderEquipmentTable(); | |
| } | |
| } | |
| // Search equipment | |
| function searchEquipment(query) { | |
| if (!query) { | |
| renderEquipmentTable(); | |
| return; | |
| } | |
| const lowerQuery = query.toLowerCase(); | |
| const filteredData = equipmentData.filter(equipment => | |
| equipment.model.toLowerCase().includes(lowerQuery) || | |
| equipment.manufacturer.toLowerCase().includes(lowerQuery) || | |
| equipment.type.toLowerCase().includes(lowerQuery) || | |
| equipment.category.toLowerCase().includes(lowerQuery) | |
| ); | |
| // Temporarily replace equipmentData with filtered results | |
| const originalData = equipmentData; | |
| equipmentData = filteredData; | |
| currentPage = 1; | |
| renderEquipmentTable(); | |
| equipmentData = originalData; | |
| } | |
| // Event listeners for equipment section | |
| document.getElementById('addEquipmentBtn').addEventListener('click', function() { | |
| editingEquipmentId = null; | |
| document.getElementById('equipmentModalTitle').textContent = 'Add New Equipment'; | |
| document.getElementById('equipmentForm').reset(); | |
| document.getElementById('equipmentId').value = ''; | |
| document.getElementById('equipmentModal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('closeEquipmentModal').addEventListener('click', function() { | |
| document.getElementById('equipmentModal').classList.add('hidden'); | |
| }); | |
| document.getElementById('cancelEquipmentBtn').addEventListener('click', function() { | |
| document.getElementById('equipmentModal').classList.add('hidden'); | |
| }); | |
| document.getElementById('equipmentForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const equipmentData = { | |
| model: document.getElementById('equipmentModel').value, | |
| manufacturer: document.getElementById('equipmentManufacturer').value, | |
| type: document.getElementById('equipmentType').value, | |
| category: document.getElementById('equipmentCategory').value, | |
| status: document.getElementById('equipmentStatus').value, | |
| image: document.getElementById('equipmentImage').value, | |
| description: document.getElementById('equipmentDescription').value, | |
| firmware: document.getElementById('equipmentFirmware').value, | |
| specs: document.getElementById('equipmentSpecs').value | |
| }; | |
| const equipmentId = document.getElementById('equipmentId').value; | |
| if (equipmentId) { | |
| updateEquipment(parseInt(equipmentId), equipmentData); | |
| } else { | |
| addEquipment(equipmentData); | |
| } | |
| document.getElementById('equipmentModal').classList.add('hidden'); | |
| }); | |
| document.getElementById('equipmentSearchInput').addEventListener('input', function() { | |
| searchEquipment(this.value); | |
| }); | |
| document.getElementById('prevPageBtn').addEventListener('click', function() { | |
| if (currentPage > 1) { | |
| currentPage--; | |
| renderEquipmentTable(); | |
| } | |
| }); | |
| document.getElementById('nextPageBtn').addEventListener('click', function() { | |
| if (currentPage * itemsPerPage < equipmentData.length) { | |
| currentPage++; | |
| renderEquipmentTable(); | |
| } | |
| }); | |
| // ... (rest of the existing JavaScript code) ... | |
| // Initialize the page | |
| document.addEventListener('DOMContentLoaded', function() { | |
| renderEquipmentTable(); | |
| // Sidebar toggle functionality | |
| document.getElementById('sidebarToggle').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('collapsed'); | |
| }); | |
| // Section navigation | |
| document.querySelectorAll('[data-section]').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const sectionId = this.getAttribute('data-section') + 'Section'; | |
| document.querySelectorAll('.section-content').forEach(section => { | |
| section.classList.add('hidden'); | |
| }); | |
| document.getElementById(sectionId).classList.remove('hidden'); | |
| document.getElementById('pageTitle').textContent = this.querySelector('.sidebar-text').textContent; | |
| }); | |
| }); | |
| // New solution button | |
| document.getElementById('newSolutionBtn').addEventListener('click', function() { | |
| document.querySelectorAll('.section-content').forEach(section => { | |
| section.classList.add('hidden'); | |
| }); | |
| document.getElementById('newSolutionSection').classList.remove('hidden'); | |
| document.getElementById('pageTitle').textContent = 'New Solution'; | |
| }); | |
| // Cancel new solution | |
| document.getElementById('cancelNewSolution').addEventListener('click', function() { | |
| document.getElementById('newSolutionSection').classList.add('hidden'); | |
| document.getElementById('dashboardSection').classList.remove('hidden'); | |
| document.getElementById('pageTitle').textContent = 'Dashboard'; | |
| }); | |
| // ... (rest of the existing event listeners) ... | |
| }); | |
| </script> | |
| </body> | |
| </html> |