Skip to content

Added UI stuff and changed Devcontainer configuration#11

Open
JoelHer wants to merge 11 commits intomainfrom
database
Open

Added UI stuff and changed Devcontainer configuration#11
JoelHer wants to merge 11 commits intomainfrom
database

Conversation

@JoelHer
Copy link
Member

@JoelHer JoelHer commented Feb 8, 2026

This pull request introduces several significant improvements to the Skyhook development environment and frontend application. The most notable changes include the addition of a local MariaDB database using Docker Compose, enhancements to the developer experience with new VS Code tasks, UI improvements with new sidebar structure and tooltips, and the integration of ApexCharts for advanced charting capabilities.

Development Environment Setup:

  • Added a docker-compose.yml file to .devcontainer for orchestrating a local MariaDB service and updated devcontainer.json to use Docker Compose, expose the MariaDB port (3306), and ensure the MariaDB client is installed in the dev container. This enables seamless local database development and testing. [1] [2] [3]

Frontend Dependency and Feature Additions:

  • Integrated apexcharts and vue3-apexcharts as dependencies, enabling advanced charting capabilities in the frontend. [1] [2] [3] [4] [5] [6] [7]
  • Added a new GradientLineApex.vue component for rendering gradient line charts using ApexCharts.

UI/UX Improvements:

  • Updated the sidebar navigation structure for better clarity, grouping items more logically, and added a logo that switches based on the theme. [1] [2] [3]
  • Enhanced UI feedback by adding hover tooltips (using HoverCard) to badges in the header and status strip, providing users with contextual information about server connectivity and data rates. [1] [2] [3] [4]

Developer Experience:

  • Introduced a .vscode/tasks.json file with tasks for running the frontend and backend in development mode, streamlining local development workflows.

Branding Updates:

  • Updated the favicon and application title in index.html to reflect Skyhook branding.

These changes collectively improve the development workflow, enhance the application's UI/UX, and lay the groundwork for more advanced frontend features.

JoelHer and others added 5 commits January 27, 2026 15:57
Replaced favicon and app title in index.html to reflect Skyhook branding. Updated sidebar navigation items for improved clarity and organization, including new sections and renamed items. Removed unused vue.svg asset and added ber.svg. Enhanced Overview page to dynamically display wind direction and speed from weather data.
…ink throughput

- Implemented GradientLineApex.vue for rendering gradient line charts using ApexCharts.
- Created comms.ts store to manage telemetry data for narrowband communication, including uplink and downlink metrics.
- Developed Narrowband.vue view to display real-time telemetry data, including health status, metrics, and throughput charts for both uplink and downlink.
- Added utility functions for formatting telemetry data and managing state updates.
Replaced the old SVG logo with new PNG assets for both dark and light themes. Updated AppSidebar.vue to display the appropriate logo based on the theme. Also updated navicon_lowres_light.png and added new navicon_lowres_dark.png, maxres_dark.png, and maxres_light.png assets.
@JoelHer JoelHer requested a review from tillx4 February 8, 2026 21:44
…ation

- Implemented cdc_bridge.py to read binlog events from MariaDB and emit measurements via Socket.IO.
- Added telemetry_sim.py to generate and insert simulated telemetry data into the database.
- Configured environment variables for database connection settings.
- Enhanced measurement handling with type-safe value insertion and robust error handling.
- Introduced a simple state machine for simulating telemetry data generation.
… views

- Introduced a constant `NA` for representing "n/a" values across various metrics.
- Updated health and state tone functions to handle string inputs and return neutral for "n/a".
- Added utility functions for formatting telemetry data, including age, last update, and state labels.
- Enhanced the telemetry store to manage sensor data and subscriptions, including parsing sensor IDs from environment variables.
- Improved the Overview view to display telemetry data, including weather and launchpad information, with appropriate handling for missing data.
- Refactored event handling to ensure proper display of telemetry events with fallback values.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant