RubyGems - solara - Versions diffs - 0.1.0 - Mend

solara 0.1.0

Files changed (175) hide show

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

@@ -0,0 +1,477 @@
+<!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">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+        <style>
+            :root {
+                --primary-color: #4A90E2;
+                --secondary-color: #50E3C2;
+                --background-color: #F5F7FA;
+                --text-color: #333;
+                --border-color: #E1E4E8;
+                --delete-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;
+            }
+            .section {
+                background-color: white;
+                border-radius: 8px;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                margin-bottom: 30px;
+                padding: 20px;
+            }
+            h2 {
+                color: var(--primary-color);
+                border-bottom: 2px solid var(--border-color);
+                padding-bottom: 10px;
+                margin-top: 0;
+            }
+            .input-group {
+                margin-bottom: 25px;
+                display: flex;
+                align-items: center;
+                background-color: white;
+                border-radius: 8px;
+                box-shadow: var(--field-shadow);
+                padding: 10px;
+                transition: box-shadow 0.3s ease;
+            }
+            .input-group:hover {
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+            }
+            label {
+                display: inline-block;
+                margin-right: 10px;
+                font-weight: bold;
+                min-width: 250px;
+                flex-shrink: 0;
+            }
+            .input-wrapper {
+                display: flex;
+                align-items: center;
+                flex-grow: 1;
+            }
+            input, select {
+                flex-grow: 1;
+                padding: 10px;
+                border: 1px solid var(--border-color);
+                border-radius: 4px;
+                font-size: 16px;
+            }
+            input[type="color"] {
+                height: 50px;
+                padding: 2px;
+            }
+            button {
+                background-color: var(--secondary-color);
+                color: white;
+                padding: 12px 20px;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 18px;
+                transition: background-color 0.3s ease;
+            }
+            button:hover {
+                background-color: #3CC2A3;
+            }
+            .save-section-btn {
+                background-color: #28a745;
+                margin-top: 10px;
+                margin-right: 10px;
+            }
+            .save-section-btn:hover {
+                background-color: #218838;
+            }
+            .button-group {
+                display: flex;
+                justify-content: flex-start;
+                margin-top: 20px;
+            }
+            .delete-icon {
+                color: var(--delete-color);
+                cursor: pointer;
+                font-weight: bold;
+                font-size: 20px;
+                line-height: 1;
+                padding: 10px 15px;
+                margin-left: 10px;
+                border-radius: 4px;
+                transition: background-color 0.3s ease;
+            }
+            .delete-icon:hover {
+                color: #fff;
+                background-color: var(--delete-color);
+            }
+            .section-title-container {
+                margin-bottom: 1em;
+            }
+            .section-title-container h2 {
+                margin-bottom: 0.2em;
+            }
+            .section-subtitle {
+                font-size: 0.9em;
+                color: #666;
+                margin-bottom: 32px;
+            }
+            @media (max-width: 768px) {
+                .container {
+                    padding: 10px;
+                }
+                .input-group {
+                    flex-direction: column;
+                    align-items: flex-start;
+                }
+                label {
+                    margin-bottom: 5px;
+                }
+                .input-wrapper {
+                    width: 100%;
+                }
+            }
+            .array-input-container {
+                display: flex;
+                align-items: center;
+                margin-bottom: 5px;
+                width: 100%;
+            }
+            .array-input {
+                flex-grow: 1;
+                margin-right: 8px;
+            }
+            .add-array-item {
+                background-color: #4CAF50;
+                color: white;
+                border: none;
+                padding: 5px 10px;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+            .array-items-container {
+                margin-top: 5px;
+                width: 100%;
+            }
+            .array-item {
+                display: flex;
+                align-items: center;
+                margin-bottom: 5px;
+            }
+            .array-item-input {
+                flex-grow: 1;
+                margin: 16px;
+            }
+            .delete-array-item {
+                background-color: #f44336;
+                color: white;
+                border: none;
+                padding: 2px 6px;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+            .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;
+            }
+            .action-buttons {
+                position: fixed;
+                top: 100px;
+                left: 20px;
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+                z-index: 1000;
+            }
+            .action-buttons button {
+                min-width: 250px;
+                background-color: var(--primary-color);
+                color: white;
+                padding: 12px 10px;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 18px;
+                transition: background-color 0.3s ease, opacity 0.3s ease;
+            }
+            .action-buttons button:hover {
+                background-color: #3A7BC8;
+            }
+            #switchButton {
+                display: none;
+            }
+            #applyChangesButton {
+                display: none;
+            }
+            #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;
+            }
+            .add-brand-container {
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                text-align: center;
+                background-color: white;
+                padding: 40px;
+                border-radius: 20px;
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+                z-index: 999;
+                animation: fadeIn 0.5s ease-out;
+            }
+            @keyframes fadeIn {
+                from {
+                    opacity: 0;
+                    transform: translate(-50%, -60%);
+                }
+                to {
+                    opacity: 1;
+                    transform: translate(-50%, -50%);
+                }
+            }
+            .add-brand-container img {
+                width: 150px;
+                height: 150px;
+                margin-bottom: 20px;
+            }
+            .add-brand-container h2 {
+                font-size: 18px;
+                color: #333;
+                margin-bottom: 30px;
+                animation: slideDown 0.5s ease-out 0.3s both;
+            }
+            .add-brand-container button {
+                display: block;
+                width: 200px;
+                margin: 20px auto;
+                padding: 15px;
+                font-size: 18px;
+                background-color: var(--primary-color);
+                color: white;
+                border: none;
+                border-radius: 8px;
+                cursor: pointer;
+                transition: background-color 0.3s ease, transform 0.2s ease;
+                opacity: 0;
+                animation: fadeInButton 0.5s ease-out forwards;
+            }
+            .add-brand-container button:hover {
+                background-color: #3A7BC8;
+                transform: scale(1.05);
+            }
+            .button-message {
+                font-size: 18px;
+                color: #666;
+                margin-bottom: 5px;
+                opacity: 0;
+                animation: fadeInMessage 0.5s ease-out forwards;
+            }
+            @keyframes slideDown {
+                from {
+                    opacity: 0;
+                    transform: translateY(-20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+            @keyframes fadeInButton {
+                to {
+                    opacity: 1;
+                }
+            }
+            @keyframes fadeInMessage {
+                to {
+                    opacity: 1;
+                }
+            }
+            /* Hide the brand-details-container by default */
+            #brand-details-container {
+                display: none;
+            }
+        </style>
+    </head>
+    <body>
+        <header>
+            <div class="header-container">
+                <img class="logo" src="../solara.png" alt="Splash Image">
+                <h1><span id="brandNametitle"></span></h1>
+            </div>
+        </header>
+        <div id="add-brand-container" class="add-brand-container">
+            <img src="../solara.png" alt="Solara Logo">
+            <h2>Solara simplifies the management of your brand configurations, allowing you to access and update them anytime, anywhere.</h2>
+            <div class="button-message">You can select a JSON file containing brand configurations that were exported using Solara.</div>
+            <button id="uploadJsonBtn" style=" animation-delay: 0.5s;">Upload JSON</button>
+            <div class="button-message" style=" animation-delay: 0.7s;">Alternatively, upload from a folder that includes the brand's JSON files.</div>
+            <button id="uploadBrandBtn" style=" animation-delay: 0.9s;">Upload Folder</button>
+            <div class="button-message" style=" animation-delay: 1.1s;">You also have the option to create new brand configurations.</div>
+            <button id="newBrandBtn" style=" animation-delay: 1.3s;">New Brand</button>
+        </div>
+        <onboard-bottom-sheet id="onboardBottomSheet"></onboard-bottom-sheet>
+        <div id="brand-details-container">
+            <button id="error-button">
+                ⚠️
+                <span class="count">5</span>
+            </button>
+            <div class="action-buttons">
+                <button id="allBrandsButton">All Brands</button>
+                <button id="switchButton">Switch</button>
+                <button id="applyChangesButton">Apply Changes</button>
+                <button id="exportBrandBtn">Export</button>
+            </div>
+            <div class="container">
+                <div id="sections"></div>
+            </div>
+            <add-field-sheet id="addFieldSheet"></add-field-sheet>
+            <message-bottom-sheet id="messageBottomSheet"></message-bottom-sheet>
+            <confirmation-dialog id="confirmationDialog"></confirmation-dialog>
+        </div>
+        <script type="module" src="BrandDetail.js"></script>
+    </body>
+</html>

data/solara/lib/core/dashboard/brand/source/BrandLocalSource.js ADDED Viewed

@@ -0,0 +1,123 @@
+class BrandLocalSource {
+    constructor() {
+        this.savingInProgress = false;
+    }
+    getQueryFromUrl(name) {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get(name);
+    }
+    async fetchBrandDetails(brandKey) {
+        try {
+            if (!brandKey) {
+                throw new Error('No brand_key provided in URL');
+            }
+            const url = `/configurations?brand_key=${encodeURIComponent(brandKey)}`;
+            console.log('Fetching configurations from:', url);
+            const response = await fetch(url);
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            return result;
+        } catch (error) {
+            console.error('Error fetching configurations:', error);
+            throw error;
+        }
+    }
+    async fetchCurrentBrand(brandKey) {
+        try {
+            const response = await fetch('/brand/current');
+            let result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            let isCurrentBrand = result.key === brandKey;
+            return {isCurrentBrand: isCurrentBrand, contentChanged: result.content_changed};
+        } catch (error) {
+            console.error('Error fetching current brand:', error);
+            throw error;
+        }
+    }
+    async saveSection(sectionItem, configuration, brandKey) {
+        if (this.savingInProgress) return;
+        this.savingInProgress = true;
+        const dataToSend = {
+            brand_key: brandKey,
+            key: sectionItem.key,
+            data: configuration
+        };
+        try {
+            const response = await fetch(`/section/edit`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(dataToSend)
+            });
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            console.log(`${sectionItem.name} configuration saved successfully!`);
+            return true;
+        } catch (error) {
+            console.error('Error saving configuration:', error);
+            throw error;
+        } finally {
+            this.savingInProgress = false;
+        }
+    }
+    async switchToBrand(brandKey) {
+        try {
+            const response = await fetch('/switch', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({brand_key: brandKey}),
+            });
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            console.log('Switch to brand result:', result);
+            return true;
+        } catch (error) {
+            console.error('Error switching to brand:', error);
+            throw error;
+        }
+    }
+    async checkBrandHealth(brandKey) {
+        try {
+            const response = await fetch(`/brand/doctor?brand_key=${encodeURIComponent(brandKey)}`);
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            return result.result;
+        } catch (error) {
+            console.error('Error calling doctor API:', error);
+            throw error;
+        }
+    }
+}
+export default BrandLocalSource;