RubyGems - solara - Versions diffs - 0.1.0 - Mend

solara 0.1.0

Files changed (175) hide show

data/solara/lib/core/dashboard/brands/brands.html ADDED Viewed

@@ -0,0 +1,345 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Solara Dashboard</title>
+        <link rel="icon" href="../res/favicon/favicon.ico" type="image/x-icon">
+        <style>
+            :root {
+                --primary-color: #4A90E2;
+                --secondary-color: #50E3C2;
+                --background-color: #F5F7FA;
+                --text-color: #333;
+                --border-color: #E1E4E8;
+                --offboard-color: #dc3545;
+                --field-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            }
+            body {
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                background-color: var(--background-color);
+                color: var(--text-color);
+                line-height: 1.6;
+                margin: 0;
+                padding-top: 110px;
+            }
+            .container {
+                max-width: 1000px;
+                margin: 0 auto;
+                padding: 20px;
+            }
+            h1 {
+                margin: 0;
+                font-size: 2.5em;
+            }
+            .brand-list {
+                max-width: 700px;
+                margin: 0 auto;
+            }
+            .brand-item {
+                background-color: #fff;
+                border-radius: 12px;
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                padding: 20px;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                transition: transform 0.3s ease, box-shadow 0.3s ease;
+                margin-bottom: 20px;
+                position: relative;
+                overflow: hidden;
+            }
+            .brand-item:hover {
+                transform: translateY(-5px);
+                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+            }
+            .brand-image {
+                width: 80px;
+                height: 80px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-right: 20px;
+                border-radius: 12px;
+                overflow: hidden;
+                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            }
+            .brand-image img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+            .brand-info {
+                flex-grow: 1;
+            }
+            .brand-name {
+                font-size: 20px;
+                font-weight: bold;
+                margin-bottom: 5px;
+                color: var(--primary-color);
+            }
+            .brand-key {
+                font-size: 14px;
+                color: #7f8c8d;
+            }
+            .brand-actions {
+                display: flex;
+                align-items: center;
+            }
+            .switch-button {
+                background-color: var(--primary-color);
+                color: white;
+                border: none;
+                padding: 10px 20px;
+                border-radius: 5px;
+                cursor: pointer;
+                font-size: 16px;
+                transition: background-color 0.3s ease;
+                margin-right: 15px;
+            }
+            .switch-button:hover {
+                background-color: #3a7bc8;
+            }
+            .overflow-menu {
+                cursor: pointer;
+                font-size: 20px;
+                color: #7f8c8d;
+                transition: color 0.3s ease;
+                padding: 10px;
+                margin: -10px;
+            }
+            .overflow-menu:hover {
+                color: var(--primary-color);
+            }
+            .current-brand, .brands-list {
+                margin-bottom: 40px;
+                max-width: 700px;
+                margin-left: auto;
+                margin-right: auto;
+            }
+            .current-brand h2, .brands-list h2 {
+                margin: 0 0 20px 0;
+                font-size: 1.8em;
+                color: var(--primary-color);
+            }
+            .section-title {
+                font-size: 1.5em;
+                color: var(--primary-color);
+                margin-bottom: 20px;
+                text-align: center;
+            }
+            .brands-list-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 20px;
+                margin-right: 40px;
+            }
+            .onboard-brand-button {
+                background-color: var(--primary-color);
+                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;
+            }
+            .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);
+                border-radius: 5px;
+                font-size: 16px;
+            }
+            .question-icon {
+                margin-left: 5px;
+                cursor: pointer;
+                color: var(--primary-color);
+            }
+            .logo {
+                width: 75px;
+                height: 75px;
+                margin-right: 20px;
+                filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
+                transition: transform 0.3s ease;
+            }
+            .logo:hover {
+                transform: scale(1.1);
+            }
+            .header-container {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            header {
+                background-color: var(--primary-color);
+                color: white;
+                text-align: center;
+                padding: 10px 0;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                z-index: 1000;
+                transition: transform 0.3s ease;
+            }
+            .scroll-up header {
+                transform: translateY(0);
+            }
+            .scroll-down header {
+                transform: translateY(-100%);
+            }
+            .logo {
+                width: 50px;
+                height: 50px;
+                margin-right: 20px;
+                filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
+                transition: transform 0.3s ease;
+            }
+            .logo:hover {
+                transform: scale(1.1);
+            }
+            h1 {
+                margin: 0;
+                font-size: 2.5em;
+            }
+            .search-container {
+                margin-top: 20px;
+                margin-bottom: 20px;
+            }
+            #brandSearch {
+                padding: 15px;
+                margin-bottom: 15px;
+                border: 1px solid var(--border-color);
+                border-radius: 5px;
+                font-size: 16px;
+                width: 100%;
+                max-width: 670px;
+            }
+            .brands-list-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 20px;
+            }
+            #error-button {
+                position: fixed;
+                bottom: 20px;
+                right: 20px;
+                background-color: #ff4136;
+                color: white;
+                border: none;
+                border-radius: 50%;
+                width: 60px;
+                height: 60px;
+                font-size: 24px;
+                cursor: pointer;
+                justify-content: center;
+                align-items: center;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+                transition: transform 0.2s;
+                display: none;
+            }
+            #error-button:hover {
+                transform: scale(1.1);
+            }
+            .count {
+                position: absolute;
+                top: -5px;
+                right: -5px;
+                background-color: #ffdc00;
+                color: #111;
+                border-radius: 50%;
+                width: 24px;
+                height: 24px;
+                font-size: 14px;
+                font-weight: bold;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        </style>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+    </head>
+    <body>
+        <header>
+            <div class="header-container">
+                <img class="logo" src="../solara.png" alt="Splash Image">
+                <h1>Solara Dashboard</h1>
+            </div>
+        </header>
+        <button id="error-button">
+            ⚠️
+            <span class="count">5</span>
+        </button>
+        <div class="container">
+            <div class="current-brand" id="currentBrandSection" style="        display: none;">
+                <h2>Current Brand</h2>
+                <div id="currentBrandItem"></div>
+            </div>
+            <div class="brands-list">
+                <div class="brands-list-header">
+                    <h2>All Brands</h2>
+                    <button class="onboard-brand-button">
+                        <i class="fas fa-plus"></i> Onboard
+                    </button>
+                </div>
+                <div class="search-container">
+                    <input type="text" id="brandSearch" placeholder="Search brands...">
+                </div>
+                <div class="brand-list" id="brandList"></div>
+            </div>
+        </div>
+        <brand-options-bottom-sheet id="bottomSheet"></brand-options-bottom-sheet>
+        <confirmation-dialog id="confirmationDialog"></confirmation-dialog>
+        <onboard-bottom-sheet id="onboardBottomSheet"></onboard-bottom-sheet>
+        <message-bottom-sheet id="messageBottomSheet"></message-bottom-sheet>
+        <aliases-bottom-sheet id="aliasesSheet"></aliases-bottom-sheet>
+        <script type="module" src="Brands.js"></script>
+    </body>
+</html>

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

@@ -0,0 +1,212 @@
+class AddFieldSheet extends HTMLElement {
+    constructor() {
+        super();
+        this.onSubmit = null;
+        this.inputType = null;
+        this.attachShadow({mode: 'open'});
+        this.render();
+        this.addFieldSheet = this.shadowRoot.querySelector('#addFieldSheet');
+        this.overlay = this.shadowRoot.getElementById('overlay');
+        this.shadowRoot.querySelector('#addFieldForm').onsubmit = (e) => this.handleSubmit(e);
+        this.shadowRoot.querySelector('#colorPicker').oninput = (e) => this.updateFieldValue(e);
+        this.overlay.onclick = () => this.hideAddFieldForm();
+    }
+    render() {
+        this.shadowRoot.innerHTML = `
+             <style>
+                .bottom-sheet {
+                    position: fixed;
+                    bottom: -100%;
+                    left: 0;
+                    right: 0;
+                    background-color: white;
+                    padding: 30px;
+                    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
+                    transition: bottom 0.3s ease-out;
+                    z-index: 1000;
+                    border-top-left-radius: 25px;
+                    border-top-right-radius: 25px;
+                    height: 60vh;
+                    max-height: 500px;
+                    overflow-y: auto;
+                    max-width: 600px;
+                    margin: 0 auto;
+                }
+                .bottom-sheet.show {
+                    bottom: 0;
+                }
+                .bottom-sheet h3 {
+                    color: var(--primary-color);
+                    margin-top: 0;
+                    margin-bottom: 20px;
+                    font-size: 24px;
+                }
+                .overlay {
+                    display: none;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background: rgba(0, 0, 0, 0.5);
+                    z-index: 999;
+                }
+                .show {
+                    display: block;
+                }
+                .form-group {
+                    margin-bottom: 20px;
+                }
+                .form-group label {
+                    display: block;
+                    margin-bottom: 8px;
+                    font-weight: bold;
+                }
+                .form-group input {
+                    width: 100%;
+                    padding: 12px;
+                    border: 1px solid var(--border-color);
+                    border-radius: 4px;
+                    font-size: 16px;
+                }
+                .tooltip {
+                    position: relative;
+                    display: inline-block;
+                    margin-left: 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%;
+                    transform: translateX(-50%);
+                    opacity: 0;
+                    transition: opacity 0.3s;
+                }
+                .tooltip:hover .tooltiptext {
+                    visibility: visible;
+                    opacity: 1;
+                }
+                .add-field-button {
+                    width: 100%;
+                    padding: 15px;
+                    font-size: 18px;
+                    background-color: var(--primary-color);
+                    color: white;
+                    border: none;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    transition: background-color 0.3s ease;
+                }
+                .add-field-button:hover {
+                    background-color: #3A7BC8;
+                }
+                .color-picker-container {
+                    display: none;
+                    margin-top: 10px;
+                }
+                #fieldValue[type="color"] {
+                    -webkit-appearance: none;
+                    border: none;
+                    width: 32px;
+                    height: 32px;
+                    cursor: pointer;
+                }
+                #fieldValue[type="color"]::-webkit-color-swatch-wrapper {
+                    padding: 0;
+                }
+                #fieldValue[type="color"]::-webkit-color-swatch {
+                    border: none;
+                }
+                #colorPicker {
+                    -webkit-appearance: none; /* Remove default styling */
+                    border: none; /* No border */
+                    width: 100%; /* Set a fixed width */
+                    height: 60px; /* Increase the height */
+                    cursor: pointer; /* Pointer cursor on hover */
+                    border-radius: 4px; /* Optional: Rounded corners */
+                }
+                #colorPicker::-webkit-color-swatch {
+                    border: none; /* No border on the color swatch */
+                    border-radius: 4px; /* Optional: Rounded corners */
+                }
+            </style>
+            <div id="overlay" class="overlay"></div>
+            <div class="bottom-sheet" id="addFieldSheet">
+                <h3>Add New Field</h3>
+                <form id="addFieldForm">
+                    <div class="form-group">
+                        <label for="fieldName">Field Name</label>
+                        <input type="text" id="fieldName" name="fieldName" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="fieldValue">Field Value</label>
+                        <input type="text" id="fieldValue" name="fieldValue" required>
+                        <div class="color-picker-container">
+                            <input type="color" id="colorPicker" name="colorPicker">
+                        </div>
+                    </div>
+                    <button type="submit" class="add-field-button">Add Field</button>
+                </form>
+            </div>
+        `;
+    }
+    show(inputType, onSubmit) {
+        this.onSubmit = onSubmit;
+        this.inputType = inputType;
+        const fieldName = this.shadowRoot.querySelector('#fieldName');
+        const fieldValue = this.shadowRoot.querySelector('#fieldValue');
+        const colorPickerContainer = this.shadowRoot.querySelector('.color-picker-container');
+        fieldName.value = '';
+        fieldValue.value = '';
+        colorPickerContainer.style.display = inputType === 'color' ? 'block' : 'none';
+        this.addFieldSheet.style.display = 'block';
+        this.overlay.classList.add('show');
+        setTimeout(() => this.addFieldSheet.classList.add('show'), 10);
+    }
+    hideAddFieldForm() {
+        this.addFieldSheet.classList.remove('show');
+        this.overlay.classList.remove('show');
+        setTimeout(() => {
+            this.addFieldSheet.style.display = 'none';
+        }, 300);
+    }
+    handleSubmit(e) {
+        e.preventDefault();
+        const fieldName = this.shadowRoot.querySelector('#fieldName').value;
+        let defaultValue = this.shadowRoot.querySelector('#fieldValue').value;
+        if (this.inputType === 'color' && !defaultValue.startsWith('#')) {
+            defaultValue = '#' + defaultValue;
+        }
+        if (this.onSubmit) {
+            this.onSubmit(fieldName, defaultValue);
+        }
+        this.hideAddFieldForm();
+    }
+    updateFieldValue(event) {
+        const fieldValue = this.shadowRoot.querySelector('#fieldValue');
+        fieldValue.value = event.target.value;
+    }
+}
+customElements.define('add-field-sheet', AddFieldSheet);

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

@@ -0,0 +1,128 @@
+class AliasesBottomSheet extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .aliases-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%;
+                    max-height: 80vh;
+                    overflow-y: auto;
+                }
+                .aliases-bottom-sheet.show {
+                    transform: translateY(0);
+                }
+                .aliases-bottom-sheet h3 {
+                    color: var(--primary-color);
+                    margin-top: 0;
+                }
+                .aliases-bottom-sheet ul {
+                    list-style-type: none;
+                    padding: 0;
+                }
+                .aliases-bottom-sheet li {
+                    margin-bottom: 10px;
+                    font-family: monospace;
+                    background-color: #f1f1f1;
+                    padding: 5px;
+                    border-radius: 5px;
+                }
+                .overlay {
+                    display: none;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background: rgba(0, 0, 0, 0.5);
+                    z-index: 999;
+                }
+                .close-aliases {
+                    background-color: var(--primary-color);
+                    color: white;
+                    border: none;
+                    padding: 10px 20px;
+                    border-radius: 5px;
+                    cursor: pointer;
+                    font-size: 16px;
+                    transition: background-color 0.3s ease;
+                    margin-top: 20px;
+            }
+            .close-aliases:hover {
+                background-color: #3a7bc8;
+            }
+            </style>
+            <div class="overlay"></div>
+            <div class="aliases-bottom-sheet" id="aliasesSheet">
+                <h3>Aliases</h3>
+                <div id="commonAliases">
+                    <h4>Common Aliases</h4>
+                    <ul id="commonAliasesList"></ul>
+                </div>
+                <div id="brandAliases">
+                    <h4>Brand Aliases</h4>
+                    <ul id="brandAliasesList"></ul>
+                </div>
+                <button class="close-aliases" id="closeAliases">Close</button>
+            </div>
+        `;
+        this.aliasesBottomSheet = this.shadowRoot.getElementById('aliasesSheet');
+        this.overlay = this.shadowRoot.querySelector('.overlay');
+        this.closeAliasesBtn = this.shadowRoot.getElementById('closeAliases');
+        this.closeAliasesBtn.onclick = () => this.hide();
+        this.overlay.onclick = () => this.hide();
+    }
+    show(aliases, brand) {
+        const commonAliasesList = this.shadowRoot.getElementById('commonAliasesList');
+        const brandAliasesList = this.shadowRoot.getElementById('brandAliasesList');
+        commonAliasesList.innerHTML = '';
+        brandAliasesList.innerHTML = '';
+        aliases.aliases.common_aliases.forEach(alias => {
+            const li = document.createElement('li');
+            li.textContent = alias;
+            commonAliasesList.appendChild(li);
+        });
+        const brandAliases = aliases.aliases.brand_aliases[brand.key] || [];
+        brandAliases.forEach(alias => {
+            const li = document.createElement('li');
+            li.textContent = alias;
+            brandAliasesList.appendChild(li);
+        });
+        this.aliasesBottomSheet.style.display = 'block';
+        this.overlay.style.display = 'block';
+        setTimeout(() => this.aliasesBottomSheet.classList.add('show'), 10);
+    }
+    hide() {
+        this.aliasesBottomSheet.classList.remove('show');
+        setTimeout(() => {
+            this.aliasesBottomSheet.style.display = 'none';
+            this.overlay.style.display = 'none';
+        }, 300); // Match with the CSS transition duration
+    }
+}
+customElements.define('aliases-bottom-sheet', AliasesBottomSheet);