solara 0.2.0 → 0.2.2

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

@@ -25,6 +25,75 @@
                 padding-top: 110px;
             }
             .container {
+                display: table;
+                width: 100%;
+                height: 100vh;
+            }
+            .row {
+                display: table-row;
+            }
+            .column {
+                display: table-cell;
+                padding: 20px;
+                vertical-align: top;
+            }
+            .left {
+                position: fixed;
+                width: 20%;
+            }
+            .middle {
+                width: 60%;
+                background-color: #e0e0e0;
+            }
+            .right {
+                position: fixed;
+                width: 20%;
+                max-height: 600px; /* Set a fixed height */
+                overflow-y: auto; /* Enable vertical scrolling */
+                padding: 10px; /* Optional: add padding */
+            }
+            ul {
+                list-style-type: none;
+                padding: 0;
+            }
+            li {
+                margin-bottom: 10px;
+            }
+
+            .index {
+                list-style-type: none; /* Remove default list styling */
+                padding: 0; /* Remove padding */
+                margin: 40px;
+            }
+            .index li {
+                padding: 8px; /* Add some padding to list items */
+                border-bottom: 1px solid #eee; /* Optional: add a bottom border */
+            }
+
+            .index li:last-child {
+                border-bottom: none; /* Remove the border from the last item */
+            }
+            .index a {
+                color: #0066cc;
+                text-decoration: none;
+            }
+            .index a:hover {
+                text-decoration: underline;
+            }
+            .index-item {
+                list-style: none; /* Remove default list styling */
+                padding: 10px; /* Add some padding */
+                margin: 5px 0; /* Space between items */
+                background-color: white; /* Background color for contrast */
+                border-radius: 5px; /* Rounded corners */
+                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow effect */
+                transition: box-shadow 0.3s; /* Smooth transition for shadow */
+            }
+
+            .index-item:hover {
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Darker shadow on hover */
+            }
+            .sections {
                 max-width: 1000px;
                 margin: 0 auto;
                 padding: 20px;
@@ -60,6 +129,21 @@
             .input-group:hover {
                 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
             }
+            .input-wrapper {
+                display: flex;
+                align-items: center;
+                flex-grow: 1;
+            }
+            .input-wrapper input[type="checkbox"] {
+                margin-right: 10px;
+                flex-grow: 0;
+            }
+            .checkbox-label {
+                flex-grow: 1;
+            }
+            .input-wrapper label[for] {
+                margin-right: 10px;
+            }
             label {
                 display: inline-block;
                 margin-right: 10px;
@@ -67,11 +151,6 @@
                 min-width: 250px;
                 flex-shrink: 0;
             }
-            .input-wrapper {
-                display: flex;
-                align-items: center;
-                flex-grow: 1;
-            }
             input, select {
                 flex-grow: 1;
                 padding: 10px;
@@ -138,7 +217,7 @@
             }
 
             @media (max-width: 768px) {
-                .container {
+                .sections {
                     padding: 10px;
                 }
                 .input-group {
@@ -214,6 +293,18 @@
                 display: flex;
                 align-items: center;
                 justify-content: center;
+                transition: transform 0.3s ease;
+                transform: translateY(0);
+                z-index: 1000;
+            }
+            .scroll-down {
+                transform: translateY(-100%);
+            }
+
+            .header-content {
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
 
             header {
@@ -238,39 +329,35 @@
             .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;
+                min-width: 250px;
+                background-color: var(--primary-color);
+                color: white;
+                margin: 10px;
+                font-size: 18px;
+                transition: background-color 0.3s ease, opacity 0.3s ease;
             }
 
-            .action-buttons button {
-                min-width: 250px;
+            .add-field-btn {
+                min-width: 150px;
                 background-color: var(--primary-color);
                 color: white;
-                padding: 12px 10px;
-                border: none;
-                border-radius: 4px;
-                cursor: pointer;
+                margin: 10px;
+                font-size: 18px;
+                transition: background-color 0.3s ease, opacity 0.3s ease;
+            }
+
+            .apply-changes-button {
+                min-width: 250px;
+                background-color: #ff4136;
+                color: white;
+                margin: 10px;
                 font-size: 18px;
                 transition: background-color 0.3s ease, opacity 0.3s ease;
             }
@@ -287,7 +374,6 @@
                 display: none;
             }
 
-
             #error-button {
                 position: fixed;
                 bottom: 20px;
@@ -305,6 +391,7 @@
                 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                 transition: transform 0.2s;
                 display: none;
+                z-index: 1000;
             }
 
             #error-button:hover {
@@ -327,7 +414,20 @@
                 align-items: center;
             }
 
+            .add-brand-overlay {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                color: white;
+                background-color: black;
+                z-index: 998;
+            }
+
             .add-brand-container {
+                display: none;
                 position: fixed;
                 top: 50%;
                 left: 50%;
@@ -341,6 +441,7 @@
                 animation: fadeIn 0.5s ease-out;
             }
 
+
             @keyframes fadeIn {
                 from {
                     opacity: 0;
@@ -417,60 +518,106 @@
                 }
             }
 
-
-            /* Hide the brand-details-container by default */
             #brand-details-container {
                 display: none;
             }
+            #add-brand-container {
+                display: none;
+            }
+
+            .loading-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: black;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 9999;
+            }
+
+            .loading-overlay-logo {
+                width: 150px;
+                height: 150px;
+                margin-right: 20px;
+                filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
+                transition: transform 0.3s ease;
+            }
         </style>
     </head>
     <body>
 
-        <header>
-            <div class="header-container">
+        <header id="header"  class="header-container">
+            <div  class="header-content">
                 <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 class="loading-overlay" id="loadingOverlay">
+            <img class="loading-overlay-logo" src="../solara.png" alt="Loading Logo">
         </div>
 
-        <onboard-bottom-sheet id="onboardBottomSheet"></onboard-bottom-sheet>
+        <div class="container">
+            <div class="row">
 
-        <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="column left">
+                    <div>
+                        <button id="allBrandsButton" class="action-buttons">All Brands</button>
+                        <button id="switchButton" class="action-buttons">Switch</button>
+                        <button id="applyChangesButton" class="apply-changes-button">Apply Changes</button>
+                        <button id="exportBrandBtn" class="action-buttons">Export</button>
+                    </div>
+                </div>
 
-            <div class="container">
-                <div id="sections"></div>
-            </div>
+                <div class="column middle">
+
+                    <div id="brand-details-container">
+                        <button id="error-button">
+                            ⚠️
+                            <span class="count">5</span>
+                        </button>
+
+                        <div class="sections">
+                            <div id="sections"></div>
+                        </div>
+                    </div>
+
+                    <div class="add-brand-overlay" id="add-brand-overlay"></div>
+
+                    <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>
 
-            <add-field-sheet id="addFieldSheet"></add-field-sheet>
+                </div>
 
-            <message-bottom-sheet id="messageBottomSheet"></message-bottom-sheet>
 
-            <confirmation-dialog id="confirmationDialog"></confirmation-dialog>
+                <div class="column right">
+                    <ul id="index" class="index">
+                    </ul>
+                </div>
+
+            </div>
         </div>
 
+        <onboard-bottom-sheet id="onboardBottomSheet"></onboard-bottom-sheet>
+
+        <add-field-sheet id="addFieldSheet"></add-field-sheet>
+
+        <message-bottom-sheet id="messageBottomSheet"></message-bottom-sheet>
+
+        <confirmation-dialog id="confirmationDialog"></confirmation-dialog>
+
         <script type="module" src="BrandDetail.js"></script>
 
     </body>

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

@@ -14,7 +14,7 @@ class BrandLocalSource {
                 throw new Error('No brand_key provided in URL');
             }
 
-            const url = `/configurations?brand_key=${encodeURIComponent(brandKey)}`;
+            const url = `/brand/details?brand_key=${encodeURIComponent(brandKey)}`;
             console.log('Fetching configurations from:', url);
 
             const response = await fetch(url);

data/solara/lib/core/dashboard/brand/source/BrandRemoteSource.js

@@ -4,31 +4,11 @@ class BrandRemoteSource {
     constructor() {
     }
 
-    async fetchBrandDetails(brandKey) {
-
-    }
-
-    async fetchCurrentBrand(brandKey) {
-        // Empty for now
-    }
-
-    async saveSection(sectionItem, configuration, brandKey) {
-        // Empty for now
-    }
-
-    async switchToBrand(brandKey) {
-        // Empty for now
-    }
-
-    async checkBrandHealth(brandKey) {
-        // Empty for now
-    }
-
     async createNewBrandConfogurations() {
         const configurations_template = `
         [
   {
-    "key": "theme",
+    "key": "theme.json",
     "name": "Theme Configuration",
     "inputType": "color",
     "content": {
@@ -46,9 +26,9 @@ class BrandRemoteSource {
       },
       "typography": {
         "fontFamily": {
-          "regular": "Roboto",
-          "medium": "Roboto-Medium",
-          "bold": "Roboto-Bold"
+          "regular": "",
+          "medium": "",
+          "bold": ""
         },
         "fontSize": {
           "small": 12,
@@ -77,17 +57,16 @@ class BrandRemoteSource {
     }
   },
   {
-    "key": "brand_config",
+    "key": "brand_config.json",
     "name": "Brand Configuration",
     "inputType": "text",
     "content": {}
   },
   {
-    "key": "android_config",
+    "key": "android_config.json",
     "name": "Android Platform Configuration",
     "inputType": "text",
     "content": {
-      "brandName": "",
       "applicationId": "",
       "versionName": "1.0.0",
       "versionCode": 1,
@@ -95,7 +74,7 @@ class BrandRemoteSource {
     }
   },
   {
-    "key": "android_signing",
+    "key": "android_signing.json",
     "name": "Android Signing",
     "inputType": "text",
     "content": {
@@ -106,19 +85,30 @@ class BrandRemoteSource {
     }
   },
   {
-    "key": "ios_config",
+    "key": "ios_config.json",
     "name": "iOS Platform Configuration",
     "inputType": "text",
     "content": {
-      "PRODUCT_NAME": "",
       "PRODUCT_BUNDLE_IDENTIFIER": "",
       "MARKETING_VERSION": "1.0.0",
-      "BUNDLE_VERSION": "1",
+      "BUNDLE_VERSION": 1,
       "APL_MRCH_ID": ""
     }
   },
   {
-    "key": "ios_signing",
+    "key": "ios_signing.json",
+    "name": "iOS Signing",
+    "inputType": "text",
+    "content": {
+      "CODE_SIGN_IDENTITY": "",
+      "DEVELOPMENT_TEAM": "",
+      "PROVISIONING_PROFILE_SPECIFIER": "",
+      "CODE_SIGN_STYLE": "Automatic",
+      "CODE_SIGN_ENTITLEMENTS": ""
+    }
+  },
+  {
+    "key": "ios_signing.json",
     "name": "iOS Signing",
     "inputType": "text",
     "content": {
@@ -129,7 +119,8 @@ class BrandRemoteSource {
       "CODE_SIGN_ENTITLEMENTS": ""
     }
   }
-]`;
+]
+`;
         return JSON.parse(configurations_template);
     }
 
@@ -183,46 +174,40 @@ class BrandRemoteSource {
         const configList = [];
         const expectedFiles = [
             {
-                key: 'theme',
+                key: 'theme.json',
                 name: 'Theme Configuration',
-                input_type: 'color',
-                filename: 'theme.json'
+                input_type: 'color'
             },
             {
-                key: 'brand_config',
+                key: 'brand_config.json',
                 name: 'Brand Configuration',
-                input_type: 'text',
-                filename: 'brand_config.json'
+                input_type: 'text'
             },
             {
-                key: 'android_config',
+                key: 'android_config.json',
                 name: 'Android Platform Configuration',
-                input_type: 'text',
-                filename: 'android_config.json'
+                input_type: 'text'
             },
             {
-                key: 'android_signing',
+                key: 'android_signing.json',
                 name: 'Android Signing',
-                input_type: 'text',
-                filename: 'android_signing.json'
+                input_type: 'text'
             },
             {
-                key: 'ios_config',
+                key: 'ios_config.json',
                 name: 'iOS Platform Configuration',
-                input_type: 'text',
-                filename: 'ios_config.json'
+                input_type: 'text'
             },
             {
-                key: 'ios_signing',
+                key: 'ios_signing.json',
                 name: 'iOS Signing',
-                input_type: 'text',
-                filename: 'ios_signing.json'
+                input_type: 'text'
             }
         ];
 
         for (const file of expectedFiles) {
             try {
-                const fileContent = await this.findAndReadFile(dirHandle, file.filename);
+                const fileContent = await this.findAndReadFile(dirHandle, file.key);
                 if (fileContent) {
                     configList.push({
                         key: file.key,
@@ -232,7 +217,7 @@ class BrandRemoteSource {
                     });
                 }
             } catch (error) {
-                console.warn(`File not found or invalid JSON: ${file.filename}`);
+                console.warn(`File not found or invalid JSON: ${file.key}`);
             }
         }
 

data/solara/lib/core/dashboard/brands/BrandsController.js

@@ -49,18 +49,18 @@ class BrandsController {
         });
     }
 
-    showOnboardBrandForm() {
+    showOnboardBrandForm(clone_brand_key = null) {
         this.view.showOnboardBrandForm();
         this.view.onboardSheet.addEventListener('onboard', async (event) => {
             event.preventDefault();
             const {brandKey, brandName} = event.detail;
-            await this.handleOnboardBrandSubmit(brandKey, brandName);
+            await this.handleOnboardBrandSubmit(brandKey, brandName, clone_brand_key);
         });
     }
 
-    async handleOnboardBrandSubmit(brandKey, brandName) {
+    async handleOnboardBrandSubmit(brandKey, brandName, clone_brand_key = null) {
         try {
-            await this.model.onboardBrand(brandName, brandKey);
+            await this.model.onboardBrand(brandName, brandKey, clone_brand_key);
             await this.view.hideOnboardBrandForm();
             location.reload();
         } catch (error) {
@@ -95,7 +95,8 @@ class BrandsController {
 
     handleCloneOption(event) {
         event.stopPropagation();
-        this.showOnboardBrandForm();
+        const brandKey = this.view.brandOptionsSheet.dataset.brandKey;
+        this.showOnboardBrandForm(brandKey);
     }
 
     handleOffboardOption(event) {

data/solara/lib/core/dashboard/brands/BrandsModel.js

@@ -27,7 +27,7 @@ class BrandsModel {
 
     async fetchBrands() {
         try {
-            const response = await fetch('/brands.json');
+            const response = await fetch('/brands/all');
             const result = await response.json();
             if (!response.ok) {
                 throw new Error(result.error);
@@ -42,7 +42,7 @@ class BrandsModel {
 
     async fetchAliases(brand) {
         try {
-            const response = await fetch(`/brand/aliases?brand_key=${brand.key}`);
+            const response = await fetch(`/brand/aliases`);
             let result = await response.json();
             if (!response.ok) {
                 throw new Error(result.error);

data/solara/lib/core/dashboard/brands/BrandsView.js

@@ -90,9 +90,9 @@ class BrandsView {
         this.onboardSheet.hide();
     }
 
-    showAliasesBottomSheet(aliases, brand) {
+    showAliasesBottomSheet(aliases, brandKey) {
         const aliasesSheet = document.getElementById('aliasesSheet');
-        aliasesSheet.show(aliases, brand);
+        aliasesSheet.show(aliases, brandKey);
     }
 
     showBrandOptionsSheet(brand) {

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

@@ -97,6 +97,7 @@
                 font-size: 16px;
                 transition: background-color 0.3s ease;
                 margin-right: 15px;
+                min-width: 130px;
             }
             .switch-button:hover {
                 background-color: #3a7bc8;
@@ -146,6 +147,7 @@
                 cursor: pointer;
                 font-size: 16px;
                 transition: background-color 0.3s ease;
+                min-width: 130px;
             }
             .onboard-brand-button:hover {
                 background-color: #3a7bc8;
@@ -309,7 +311,7 @@
         </button>
 
         <div class="container">
-            <div class="current-brand" id="currentBrandSection" style="        display: none;">
+            <div class="current-brand" id="currentBrandSection" style="display: none;">
                 <h2>Current Brand</h2>
                 <div id="currentBrandItem"></div>
             </div>