Initial implementation of ASD Dashboard with customizable boards, views and widgets

.github/workflows/playwright.yml

@@ -0,0 +1,30 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [ main, develop, feature/*, gpt-pilot/* ]
+  pull_request:
+    branches: [ main, develop, feature/*, gpt-pilot/* ]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+
+    - name: Install Playwright Browsers
+      run: npm i && npx playwright install
+
+    - name: Run Playwright tests
+      run: npm run test
+
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -0,0 +1,10 @@
+services.json
+yarn.lock
+dist
+config.json
+node_modules
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+*.webm

.husky/pre-commit

@@ -0,0 +1 @@
+npm run lint

LICENSE

@@ -1,21 +1,19 @@
-MIT License
+# ASD-Dashboard License
 
-Copyright (c) 2024 kelvin.id
+The ASD-dashboard project is proprietary software. By using this software, you agree to the following terms:
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+1. Usage Rights:
+   - You are permitted to use this project for personal or internal purposes.
+   - You are not permitted to modify, distribute, sublicense, or sell this software in any form without explicit permission from the copyright holder.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+2. Proprietary Notice:
+   - All rights to the ASD-dashboard project are reserved. The code, design, and associated assets remain the intellectual property of the copyright holder, K.R. Wuite.
+   - Copyright (c) 2024, K.R. Wuite, The Netherlands. All rights reserved.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+3. Future Licensing:
+   - The author intends to transition the project to an open-source license, likely the MIT License, in the future. Until that time, the current proprietary terms apply.
+   
+4. Disclaimer:
+   - This software is provided "as is," without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the software or the use or other dealings in the software.
+
+For more information, please contact [[email protected]](mailto:[email protected])

README.md

@@ -1,2 +1,74 @@
-# asd-dashboard
-asd web dashboard for ⚡ Accelerated Software Development / 🚀 Automated Service Deployment
+# ASD Dashboard
+
+The ASD web dashboard is a VanillaJS Progressive Web App (PWA) designed to streamline ⚡ Accelerated Software Development and 🚀 Automated Service Deployment. This application empowers users to manage remote services through dynamic, resizable widgets encapsulated within iframes. It supports multiple boards and views for flexible configurations, with user preferences stored in localStorage for persistent sessions. Services are configured in `services.json` and the configuration can be loaded via a `config.json` file. Both files can be loaded local or remote due to the way the project has been designed as a PWA.
+
+## Overview
+
+ASD Dashboard is architected with a focus on simplicity and adaptability:
+
+- **Frontend**: Built using VanillaJS without any frameworks, it leverages CSS Grid for responsive layouts and iframes for embedding widgets.
+- **Storage**: Utilizes localStorage for saving user preferences, such as widget positions and board/view states. Configuration is fetched and applied from a `config.json` file.
+- **Service Worker**: Provides PWA capabilities, enabling offline functionality and caching of essential resources.
+- **Testing**: Automated UI testing is conducted using Playwright, integrated with GitHub Actions for continuous integration. Static files are served by a Python web server during tests.
+- **Widgets**: Widgets are loaded through iframes, supporting content from URLs or APIs with options for auto-refresh and configurable intervals.
+- **Configurable Grid**: The widget layout grid is flexible, scaling from 1 to 6 columns/rows by default, with options for customization through configuration.
+
+## Features
+
+- **Widget Management**: Add, resize, reorder, and remove widgets dynamically. Widgets can be customized with properties such as size, metadata, and settings. Resizing is facilitated via mouse cursor dragging, adhering to grid standards.
+- **Board and View Structure**: Manage multiple boards and views, akin to tabs, allowing users to switch, rename, delete, or reset configurations. State is persistently stored.
+- **Global Configuration**: Centralized configuration through `config.json` for global settings like themes and widget store URLs.
+- **LocalStorage Integration**: Persistent storage of dashboard preferences, with a modal for editing localStorage, enabling import/export and modification of JSON data.
+- **Responsive Grid Layout**: Widgets are arranged in a grid that adapts to screen size, with default configurations and options for customization.
+- **Service Selection**: Widgets can be added from a predefined JSON file, custom URL, or remote services, with support for merging multiple sources.
+- **Service Worker & PWA**: Offline capabilities and caching through a service worker enhance usability and performance.
+- **Playwright Integration & Testing**: Comprehensive testing using Playwright, with automated tests running via GitHub Actions.
+- **Custom Logger Integration**: All log statements use a custom logger for better development and debugging.
+
+## Getting started
+
+### Requirements
+
+To run the ASD Dashboard, ensure the following are installed on your system:
+
+- Node.js: A JavaScript runtime required to run the application.
+
+### Quickstart
+
+Follow these steps to set up and run the ASD Dashboard:
+
+1. Clone the repository:
+   ```bash
+   git clone <repository-url>
+   cd asd-dashboard
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+3. Start the application:
+   ```bash
+   npm run start
+   ```
+
+4. Open your browser and navigate to `http://localhost:8000` to access the dashboard.
+
+## Built With
+
+This project was built using the following tools and platforms:
+
+- [GPT Pilot](https://github.com/Pythagora-io/gpt-pilot): An AI developer tool that assists in generating production-ready applications.
+  - 15-10-2024: Upgraded to the latest edition of GPT-Pilot after this README commit. The current project might not reflect the previous 161 commits in GPT-Pilot because I chose not to sync my fork of the project for various reasons.
+- [Cursor](https://www.cursor.com/): An AI code editor designed to enhance productivity by integrating AI capabilities directly into the coding environment.
+- [OpenAI Platform](https://platform.openai.com/): Provides the AI models and APIs used in this project.
+
+### License
+
+The ASD-dashboard project is currently proprietary. You are allowed to use the project for personal or internal purposes, but you are not permitted to distribute or sublicense the code.  
+Copyright (c) 2024, K.R. Wuite.  
+For more information, please visit: [https://kelvin.id](https://kelvin.id) or email [[email protected]](mailto:[email protected]).
+
+**Note**: I plan to transition the project to an open-source license (likely MIT) in the future. However, during this early stage of development, with a focus on networking security related to the commercial side, I am keeping it proprietary to ensure I have the time to shape all ASD-related projects in a way that allows anyone to use them without compromising personal data, privacy, or project security.
+