Here is my code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My API App</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="https://unpkg.com/cross-fetch@4.0.0/dist/cross-fetch.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react",
"react-dom/client": "https://esm.sh/react-dom/client",
"react/jsx-runtime": "https://esm.sh/react/jsx-runtime",
"sql.js": "/node_modules/sql.js/dist/sql-wasm.js"
}
}
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold mb-6">Boxergy API App</h1>
<!-- Tabs Container -->
<div class="mb-8">
<!-- Tab Navigation -->
<div class="flex border-b border-gray-200">
<button class="py-2 px-4 font-medium text-blue-600 border-b-2 border-blue-600 tab-button active" data-tab="givenergy">
GivEnergy System
</button>
<button class="py-2 px-4 font-medium text-gray-500 hover:text-blue-600 tab-button" data-tab="alphaess">
AlphaESS System
</button>
</div>
<!-- Tab Content -->
<div class="bg-white rounded-lg shadow-md mt-1">
<!-- GivEnergy Tab -->
<div id="givenergy-tab" class="tab-content active p-4">
<div class="mb-6 border-b pb-6">
<h2 class="text-xl font-bold mb-4">System Data</h2>
<input type="text" id="serial-givenergy-data" placeholder="GivEnergy Serial Number" class="w-full p-2 border rounded mb-2">
<button id="fetch-givenergy-data-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full mb-4">
Fetch GivEnergy System Data
</button>
<div id="givenergy-system-output" class="mt-4 p-3 bg-gray-100 rounded overflow-auto max-h-96"></div>
</div>
<div>
<h2 class="text-xl font-bold mb-4">System Events</h2>
<input type="text" id="serial-givenergy-events" placeholder="GivEnergy Serial Number" class="w-full p-2 border rounded mb-2">
<button id="fetch-givenergy-events-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full mb-4">
Fetch GivEnergy Events
</button>
<div id="givenergy-events-output" class="mt-4 p-3 bg-gray-100 rounded overflow-auto max-h-96"></div>
<canvas id="givenergyChart" class="mt-4 h-64"></canvas>
</div>
</div>
<!-- AlphaESS Tab -->
<div id="alphaess-tab" class="tab-content hidden p-4">
<div class="mb-6 border-b pb-6">
<h2 class="text-xl font-bold mb-4">System Data</h2>
<input type="text" id="serial-alphaess-data" placeholder="AlphaESS Serial Number" class="w-full p-2 border rounded mb-2">
<button id="fetch-alphaess-data-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full mb-4">
Fetch AlphaESS System Data
</button>
<div id="alphaess-system-output" class="mt-4 p-3 bg-gray-100 rounded overflow-auto max-h-96"></div>
</div>
<div>
<h2 class="text-xl font-bold mb-4">Historical Data</h2>
<input type="text" id="serial-alphaess-historical" placeholder="AlphaESS Serial Number" class="w-full p-2 border rounded mb-2">
<div class="grid grid-cols-2 gap-2 mb-2">
<div>
<label class="block text-sm">Start Time:</label>
<input type="datetime-local" id="alphaess-start-time" class="w-full p-2 border rounded">
</div>
<div>
<label class="block text-sm">End Time:</label>
<input type="datetime-local" id="alphaess-end-time" class="w-full p-2 border rounded">
</div>
</div>
<button id="fetch-alphaess-historical-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full mb-4">
Fetch AlphaESS Historical Data
</button>
<div id="alphaess-historical-output" class="mt-4 p-3 bg-gray-100 rounded overflow-auto max-h-96"></div>
<div id="alphaess-power-flow-container" class="mt-4"></div>
</div>
</div>
</div>
</div>
</div>
<div id="root"></div>
<script src="bundle.js" type="module"></script>
<script src="client.js"></script>
<script src="alphaess-fetcher.js"></script>
<!-- Tab Functionality Script -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', function () {
const tabId = this.getAttribute('data-tab');
tabButtons.forEach(btn => {
btn.classList.remove('active', 'text-blue-600', 'border-b-2', 'border-blue-600');
btn.classList.add('text-gray-500');
});
tabContents.forEach(content => {
content.style.display = 'none';
content.classList.remove('active');
});
this.classList.add('active', 'text-blue-600', 'border-b-2', 'border-blue-600');
this.classList.remove('text-gray-500');
const activeContent = document.getElementById(`${tabId}-tab`);
activeContent.style.display = 'block';
activeContent.classList.add('active');
const buttons = activeContent.querySelectorAll('button');
buttons.forEach(btn => {
btn.style.display = 'inline-block';
btn.style.visibility = 'visible';
});
const inputs = activeContent.querySelectorAll('input');
inputs.forEach(input => {
input.style.display = 'block';
input.style.visibility = 'visible';
});
});
});
});
</script>
</body>
</html>
style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Reset some default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1, h2, h3 {
margin-bottom: 20px;
color: #444;
}
button {
display: inline-block;
background: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
margin: 10px 0;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #0056b3;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
#root {
margin-top: 20px;
}
#givenergyChart {
margin-top: 20px;
}
.output {
background: #f9f9f9;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 10px;
white-space: pre-wrap;
}
input[type="text"] {
width: 20%;
}
.api-section {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
.datetime-inputs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 10px 0;
}
.datetime-inputs label {
display: flex;
flex-direction: column;
font-size: 14px;
}
.datetime-inputs input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.error {
color: #d9534f;
font-weight: bold;
}
/* Fix button display issues */
button {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Fix input field display issues */
input[type="text"],
input[type="datetime-local"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure tab content is displayed properly */
.tab-content.active {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Fix the tab buttons */
.tab-button {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
When I refresh the page, the buttons momentarily appear, but then immediately disappear. When I am in the GivEnergy tab, and hover over the ‘Alpha ESS system’ button the button text is visible, but oddly enough the reverse is not true, i.e. the ‘GivEnergy system’ button text is never visible under any circumstances. Please note I am not at all sure if Tailwind is correctly installed. In Visual Studio I am seeing the warning ‘”tailwind” is not a known ‘@’ directive.’ for all the lines starting @tailwind in styles.css. I did spend good deal of time trying to troubleshoot the Tailwind install including checking the relevant Windows environment variable was entered correctly and numerous terminal commands, but without success.
Can anyone help please? I have tried several AIs but none have been able to solve the problem and in fact their suggestions only made mattes worse. Thanks in advance.