RubyGems - solara - Versions diffs - 0.1.0 - Mend

solara 0.1.0

Files changed (175) hide show

data/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js ADDED Viewed

@@ -0,0 +1,130 @@
+class BrandOptionsBottomSheet extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+        this.shadowRoot.innerHTML = `
+                <head>
+                    <style>
+                    .bottom-sheet {
+                        display: none;
+                        position: fixed;
+                        bottom: 0;
+                        left: 0;
+                        right: 0;
+                        background-color: white;
+                        border-top-left-radius: 20px;
+                        border-top-right-radius: 20px;
+                        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+                        z-index: 1000;
+                        padding: 20px;
+                        transition: transform 0.3s ease-out;
+                        transform: translateY(100%);
+                        max-width: 700px;
+                        margin: 0 auto;
+                        width: 100%;
+                    }
+                    .bottom-sheet.show {
+                        transform: translateY(0);
+                    }
+                    .bottom-sheet ul {
+                        list-style-type: none;
+                        padding: 0;
+                        margin: 0;
+                    }
+                    .bottom-sheet li {
+                        padding: 15px 20px;
+                        cursor: pointer;
+                        transition: background-color 0.3s ease;
+                        display: flex;
+                        align-items: center;
+                    }
+                    .bottom-sheet li:hover {
+                        background-color: var(--background-color);
+                    }
+                    .bottom-sheet li i {
+                        margin-right: 15px;
+                        font-size: 20px;
+                        width: 24px;
+                        text-align: center;
+                    }
+                    .overlay {
+                        display: none;
+                        position: fixed;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        background: rgba(0, 0, 0, 0.5);
+                        z-index: 999;
+                    }
+                </style>
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+            </head>
+            <div class="overlay"></div>
+            <div class="bottom-sheet" id="bottomSheet">
+                <ul>
+                    <li id="cloneOption" class="clone-option"><i class="fas fa-copy"></i>Clone</li>
+                    <li id="doctorOption" class="doctor-option"><i class="fas fa-stethoscope"></i>Doctor</li>
+                    <li id="offboardOption" class="offboard-option"><i class="fas fa-trash-alt"></i>Offboard</li>
+                    <li id="aliasesOption" class="aliases-option"><i class="fas fa-terminal"></i>Terminal aliases</li>
+                    <li id="settingsOption" class="settings-option"><i class="fas fa-cog"></i>Settings</li>
+                </ul>
+            </div>
+        `;
+        this.bottomSheet = this.shadowRoot.getElementById('bottomSheet');
+        this.overlay = this.shadowRoot.querySelector('.overlay');
+        this.shadowRoot.getElementById('cloneOption').onclick = this.handleCloneOption.bind(this);
+        this.shadowRoot.getElementById('offboardOption').onclick = this.handleOffboardOption.bind(this);
+        this.shadowRoot.getElementById('doctorOption').onclick = this.handleDoctorOption.bind(this);
+        this.shadowRoot.getElementById('aliasesOption').onclick = this.handleAliasesOption.bind(this);
+        this.shadowRoot.getElementById('settingsOption').onclick = this.handleSettingsOption.bind(this);
+        this.overlay.onclick = this.hideBrandOptionsBottomSheet.bind(this);
+    }
+    show() {
+        this.bottomSheet.style.display = 'block';
+        this.overlay.style.display = 'block';
+        setTimeout(() => this.bottomSheet.classList.add('show'), 10);
+    }
+    hideBrandOptionsBottomSheet() {
+        this.bottomSheet.classList.remove('show');
+        this.overlay.style.display = 'none';
+    }
+    handleCloneOption(event) {
+        event.stopPropagation();
+        this.hideBrandOptionsBottomSheet();
+        this.dispatchEvent(new CustomEvent('clone', {detail: this.bottomSheet.dataset}));
+    }
+    handleOffboardOption(event) {
+        event.stopPropagation();
+        this.hideBrandOptionsBottomSheet();
+        this.dispatchEvent(new CustomEvent('offboard', {detail: this.bottomSheet.dataset}));
+    }
+    handleDoctorOption(event) {
+        event.stopPropagation();
+        this.hideBrandOptionsBottomSheet();
+        this.dispatchEvent(new CustomEvent('doctor', {detail: this.bottomSheet.dataset}));
+    }
+    handleAliasesOption(event) {
+        event.stopPropagation();
+        this.hideBrandOptionsBottomSheet();
+        this.dispatchEvent(new CustomEvent('aliases', {detail: this.bottomSheet.dataset}));
+    }
+    handleSettingsOption(event) {
+        event.stopPropagation();
+        this.hideBrandOptionsBottomSheet();
+        this.dispatchEvent(new CustomEvent('settings', {detail: this.bottomSheet.dataset}));
+    }
+}
+customElements.define('brand-options-bottom-sheet', BrandOptionsBottomSheet);

data/solara/lib/core/dashboard/component/ConfirmationDialog.js ADDED Viewed

@@ -0,0 +1,103 @@
+class ConfirmationDialog extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+        this.render();
+    }
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                .confirmation-dialog {
+                    display: none;
+                    position: fixed;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    background-color: white;
+                    padding: 20px;
+                    border-radius: 10px;
+                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                    z-index: 1001;
+                    text-align: center;
+                }
+                .confirmation-dialog h3 {
+                    margin-top: 0;
+                    color: var(--primary-color);
+                }
+                .confirmation-dialog .buttons {
+                    margin-top: 20px;
+                }
+                .confirmation-dialog button {
+                    margin: 0 10px;
+                    padding: 10px 20px;
+                    border: none;
+                    border-radius: 5px;
+                    cursor: pointer;
+                    font-size: 16px;
+                    transition: background-color 0.3s ease;
+                }
+                .confirmation-dialog .confirm {
+                    background-color: #dc3545;
+                    color: white;
+                }
+                .confirmation-dialog .cancel {
+                    background-color: #ccc;
+                    color: #333;
+                }
+                .confirmation-dialog .confirm:hover {
+                    background-color: #c82333;
+                }
+                .confirmation-dialog .cancel:hover {
+                    background-color: #bbb;
+                }
+                .overlay {
+                    display: none;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(0, 0, 0, 0.5);
+                    z-index: 999;
+                }
+            </style>
+            <div class="overlay" id="overlay"></div>
+            <div class="confirmation-dialog" id="confirmationDialog">
+                <h3>Confirm Action</h3>
+                <p id="confirmationMessage"></p>
+                <div class="buttons">
+                    <button class="confirm" id="confirmButton">Confirm</button>
+                    <button id="cancelButton">Cancel</button>
+                </div>
+            </div>
+        `;
+        this.confirmationDialog = this.shadowRoot.getElementById('confirmationDialog');
+        this.overlay = this.shadowRoot.getElementById('overlay');
+        this.confirmButton = this.shadowRoot.getElementById('confirmButton');
+        this.cancelButton = this.shadowRoot.getElementById('cancelButton');
+        this.confirmationMessageElement = this.shadowRoot.getElementById('confirmationMessage');
+        this.cancelButton.onclick = () => this.hide();
+        this.overlay.onclick = () => this.hide();
+    }
+    showDialog(message, onConfirm) {
+        this.confirmationMessageElement.textContent = message;
+        this.confirmationDialog.style.display = 'block';
+        this.overlay.style.display = 'block';
+        this.confirmButton.onclick = () => {
+            onConfirm();
+            this.hide();
+        };
+    }
+    hide() {
+        this.confirmationDialog.style.display = 'none';
+        this.overlay.style.display = 'none';
+    }
+}
+customElements.define('confirmation-dialog', ConfirmationDialog);

data/solara/lib/core/dashboard/component/MessageBottomSheet.js ADDED Viewed

@@ -0,0 +1,80 @@
+class MessageBottomSheet extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+        this.shadowRoot.innerHTML = `
+            <style>
+                .message-bottom-sheet {
+                    display: none;
+                    position: fixed;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    background-color: white;
+                    border-top-left-radius: 20px;
+                    border-top-right-radius: 20px;
+                    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+                    z-index: 1000;
+                    padding: 20px;
+                    transition: transform 0.3s ease-out;
+                    transform: translateY(100%);
+                    max-width: 1000px;
+                    margin: 0 auto;
+                    width: 100%;
+                }
+                .message-bottom-sheet.show {
+                    transform: translateY(0);
+                 }
+                .message-content {
+                    max-height: 300px; /* Set a maximum height */
+                    overflow-y: auto; /* Enable vertical scrolling */
+                    margin-bottom: 20px;
+                }
+                .close-message {
+                    width: 10%;
+                    margin: 20px;
+                    padding: 10px;
+                    background-color: var(--primary-color);
+                    color: white;
+                    border: none;
+                    border-radius: 5px;
+                    cursor: pointer;
+                }
+                .close-message:hover {
+                    background-color: #0056b3; /* Darker shade on hover */
+                }
+            </style>
+            <div class="message-bottom-sheet" id="messageBottomSheet">
+                <div class="message-content" id="messageContent"></div>
+                <button class="close-message" id="closeMessage">Close</button>
+            </div>
+            <div id="overlay" class="overlay" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999;"></div>
+        `;
+        this.messageBottomSheet = this.shadowRoot.getElementById('messageBottomSheet');
+        this.messageContent = this.shadowRoot.getElementById('messageContent');
+        this.closeMessageButton = this.shadowRoot.getElementById('closeMessage');
+            this.overlay = this.shadowRoot.getElementById('overlay');
+        this.closeMessageButton.onclick = () => this.hideMessage();
+        this.overlay.onclick = () => this.hideMessage();
+    }
+    showMessage(message) {
+        this.messageContent.innerHTML = message.replace(/\n/g, '<br>');
+        this.messageBottomSheet.style.display = 'block';
+        this.overlay.style.display = 'block';
+        setTimeout(() => this.messageBottomSheet.classList.add('show'), 10);
+    }
+    hideMessage() {
+        this.messageBottomSheet.classList.remove('show');
+        setTimeout(() => {
+            this.messageBottomSheet.style.display = 'none';
+            this.overlay.style.display = 'none';
+        }, 300);
+    }
+}
+customElements.define('message-bottom-sheet', MessageBottomSheet);

data/solara/lib/core/dashboard/component/OnboardBrandBottomSheet.js ADDED Viewed

@@ -0,0 +1,214 @@
+class OnboardBrandBottomSheet extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+        this.onSubmit = null;
+    }
+    connectedCallback() {
+        this.render();
+        this.setupEventListeners();
+    }
+    render() {
+        this.shadowRoot.innerHTML = `
+        <head>
+            <style>
+                .overlay {
+                    display: none;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background-color: rgba(0, 0, 0, 0.5);
+                    z-index: 999;
+                }
+                .bottom-sheet {
+                    display: none;
+                    position: fixed;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    background-color: white;
+                    border-top-left-radius: 20px;
+                    border-top-right-radius: 20px;
+                    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+                    z-index: 1000;
+                    padding: 20px;
+                    transition: transform 0.3s ease-out;
+                    transform: translateY(100%);
+                    max-width: 700px;
+                    margin: 0 auto;
+                    width: 100%;
+                }
+                .bottom-sheet.show {
+                    transform: translateY(0);
+                }
+                h3 {
+                    color: var(--primary-color, #4A90E2);
+                    margin-top: 0;
+                }
+                .onboard-brand-form {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 15px;
+                }
+                .form-group {
+                    display: flex;
+                    flex-direction: column;
+                }
+                .form-group label {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 5px;
+                    font-weight: bold;
+                }
+                .form-group input {
+                    padding: 10px;
+                    border: 1px solid var(--border-color, #E1E4E8);
+                    border-radius: 5px;
+                    font-size: 16px;
+                }
+                .tooltip {
+                    position: relative;
+                    display: inline-block;
+                    margin: 5px;
+                }
+                .tooltip .tooltiptext {
+                    visibility: hidden;
+                    width: 200px;
+                    background-color: #555;
+                    color: #fff;
+                    text-align: center;
+                    border-radius: 6px;
+                    padding: 5px;
+                    position: absolute;
+                    z-index: 1;
+                    bottom: 125%;
+                    left: 50%;
+                    margin-left: -100px;
+                    opacity: 0;
+                    transition: opacity 0.3s;
+                }
+                .tooltip:hover .tooltiptext {
+                    visibility: visible;
+                    opacity: 1;
+                }
+                .onboard-brand-button {
+                    background-color: var(--primary-color, #4A90E2);
+                    color: white;
+                    border: none;
+                    padding: 10px 20px;
+                    border-radius: 5px;
+                    cursor: pointer;
+                    font-size: 16px;
+                    transition: background-color 0.3s ease;
+                }
+                .onboard-brand-button:hover {
+                    background-color: #3a7bc8;
+                }
+            </style>
+            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+        </head>
+         <div>
+            <div class="overlay" id="overlay"></div>
+            <div class="bottom-sheet" id="onboardBrandSheet">
+                <h3 id="sheetTitle">Onboard New Brand</h3>
+                <form class="onboard-brand-form" id="onboardBrandForm">
+                    <div class="form-group">
+                        <label for="brandKey">
+                            Brand Key
+                            <div class="tooltip">
+                                <i class="fas fa-question-circle question-icon"></i>
+                                <span class="tooltiptext">Brand key will be added to the brands.json and is used to identify the brand with a unique name. It must match the brand folder in brands.</span>
+                            </div>
+                        </label>
+                        <input type="text" id="brandKey" name="brandKey" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="brandName">
+                            Brand Name
+                            <div class="tooltip">
+                                <i class="fas fa-question-circle question-icon"></i>
+                                <span class="tooltiptext">The brand name will be added to the brands.json and is used to identify the brand in Solara. It is not used in the actual app.</span>
+                            </div>
+                        </label>
+                        <input type="text" id="brandName" name="brandName" required>
+                    </div>
+                    <button  id="submitBtn" type="submit" class="onboard-brand-button">Onboard Brand</button>
+                </form>
+            </div>
+        </div>
+        `;
+    }
+    setupEventListeners() {
+        const form = this.shadowRoot.getElementById('onboardBrandForm');
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.submit();
+        });
+    }
+    submit() {
+        const brandKey = this.shadowRoot.getElementById('brandKey').value;
+        const brandName = this.shadowRoot.getElementById('brandName').value;
+        const brandKeyRegex = /^[A-Za-z][A-Za-z0-9_-]*$/;
+        if (!brandKeyRegex.test(brandKey)) {
+            alert('Brand key must start with a letter and contain no spaces. Only letters, numbers, underscores, and hyphens are allowed.');
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('onboard', {
+            detail: {brandKey, brandName},
+            bubbles: true,
+            composed: true
+        }));
+        // Call the onSubmit if it's defined
+        if (this.onSubmit) {
+            this.onSubmit(brandKey, brandName);
+        }
+        this.hide();
+    }
+    show(title, submitTitle, onSubmit) {
+        this.onSubmit = onSubmit; // Store the onSubmit function
+        // Set the title and submit title in the respective elements
+        if (title)
+            this.shadowRoot.getElementById('sheetTitle').textContent = title;
+        if (submitTitle)
+            this.shadowRoot.getElementById('submitBtn').textContent = submitTitle;
+        // Reference the sheet element and display it
+        const sheet = this.shadowRoot.getElementById('onboardBrandSheet');
+        sheet.style.display = 'block'; // Make the sheet visible
+        // Use a timeout to allow for smooth transitions
+        setTimeout(() => {
+            sheet.classList.add('show'); // Add 'show' class for CSS transitions
+            this.overlay = this.shadowRoot.getElementById('overlay');
+            this.overlay.style.display = 'block'; // Show the overlay
+            // Set up the overlay click event to hide the sheet
+            this.overlay.onclick = () => this.hide();
+        }, 10);
+    }
+    hide() {
+        const sheet = this.shadowRoot.getElementById('onboardBrandSheet');
+        sheet.classList.remove('show');
+        setTimeout(() => {
+            sheet.style.display = 'none';
+            this.overlay.style.display = 'none';
+        }, 300);
+    }
+}
+customElements.define('onboard-bottom-sheet', OnboardBrandBottomSheet);

data/solara/lib/core/dashboard/dashboard_manager.rb ADDED Viewed

@@ -0,0 +1,19 @@
+class DashboardManager
+    def start(brand_key = nil, port = 8000)
+        Solara.logger.header("Solara Dashboard #{brand_key.nil? || brand_key.empty? ? "" : "for #{brand_key}"}")
+        if brand_key.nil? || brand_key.empty?
+            open("brands/brands.html?source=local", port)
+            Solara.logger.header("Solara Dashboard")
+        else
+            open("brand/brand.html?brand_key=#{brand_key}&source=local", port)
+            Solara.logger.header("Solara Dashboard for #{brand_key}")
+        end
+    end
+    private
+    def open(page, port = 8000)
+        DashboardServer.new(page, port, FilePath.dashboard).start
+    end
+end

data/solara/lib/core/dashboard/dashboard_server.rb ADDED Viewed

@@ -0,0 +1,132 @@
+Dir[File.expand_path('handler/*.rb', __dir__)].each { |file| require_relative file }
+Dir[File.expand_path('../.solara/core/brands/*.rb')].each { |file| require_relative file }
+Dir[File.expand_path('platform/android/*.rb', __dir__)].each { |file| require_relative file }
+Dir[File.expand_path('scripts/*.rb', __dir__)].each { |file| require_relative file }
+require 'webrick'
+require 'json'
+require 'cgi'
+require 'cgi'
+class DashboardServer
+    attr_reader :home, :root
+    def initialize(home, port, document_root)
+        @home = home
+        @port = port
+        @root = File.expand_path(document_root) || File.expand_path('.')
+        @server = nil
+        @router = nil
+    end
+    def start
+        create_server
+        setup_router
+        add_cors_headers
+        print_server_info
+        open_browser
+        start_server
+    end
+    def shutdown
+        Solara.logger.debug("Shutting down server...")
+        @server.shutdown if @server
+    end
+    def handle_error(res, error, message, status = 500)
+        Solara.logger.failure("#{message}: #{error.message}")
+        res.status = status
+        res.body = JSON.generate({ success: false, error: "#{message}: #{error.message}" })
+        res.content_type = 'application/json'
+    end
+    private
+    def create_server
+        logger = WEBrick::Log.new($stderr, Solara.verbose ? WEBrick::Log::DEBUG : WEBrick::Log::INFO)
+        @server = WEBrick::HTTPServer.new(
+            Port: @port,
+            DocumentRoot: @root,
+            DirectoryIndex: ['local.html'],
+            Logger: logger
+        )
+    rescue StandardError => e
+        Solara.logger.failure("Error creating server: #{e.message}")
+        exit(1)
+    end
+    def setup_router
+        @router = Router.new(@server, self)
+        register_handlers
+        @router.mount_routes
+    end
+    def register_handlers
+        return if @router.nil?
+        @router.register_handler(RedirectHandler)
+        @router.register_handler(BrandSectionHandler)
+        @router.register_handler(SwitchToBrandHandler)
+        @router.register_handler(CurrentBrandHandler)
+        @router.register_handler(BrandConfigurationsHandler)
+        @router.register_handler(BrandsHandler)
+        @router.register_handler(EditSectionHandler)
+        @router.register_handler(OnboardBrandHandler)
+        @router.register_handler(OffboardBrandHandler)
+        @router.register_handler(DoctorHandler)
+        @router.register_handler(BrandAliasesHandler)
+        @router.register_handler(BrandIconHandler)
+    end
+    def add_cors_headers
+    end
+    def print_server_info
+        Solara.logger.debug("Server starting on http://localhost:#{@port}")
+        Solara.logger.debug("Serving files from: #{@root}")
+        Solara.logger.debug("Press Ctrl+C to stop the server")
+    end
+    def start_server
+        trap 'INT' do
+            shutdown
+        end
+        @server.start
+    rescue StandardError => e
+        Solara.logger.failure("Error starting server: #{e.message}")
+        exit(1)
+    end
+    def open_browser
+        url = "http://localhost:#{@port}"
+        Solara.logger.debug("Opening browser at #{url}")
+        case RUBY_PLATFORM
+        when /darwin/
+            system "/usr/bin/open", url
+        when /linux/
+            system "/usr/bin/xdg-open", url
+        when /mswin|mingw|cygwin/
+            system "start", url
+        end
+    rescue StandardError => e
+        Solara.logger.failure("Error opening browser: #{e.message}")
+    end
+end
+class Router
+    def initialize(server, dashboard_server)
+        @server = server
+        @dashboard_server = dashboard_server
+        @handlers = []
+    end
+    def register_handler(handler_class)
+        @handlers << handler_class.new(@server, @dashboard_server)
+    end
+    def mount_routes
+        @handlers.each(&:mount)
+    end
+end