Skip to content

Commit

Permalink
Solara
Browse files Browse the repository at this point in the history
  • Loading branch information
@ideyaa
ideyaa committed Sep 7, 2024
1 parent f06683b commit 78c7b49
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 61 deletions.
1 change: 0 additions & 1 deletion solara/lib/core/dashboard/brand/BrandController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ class BrandController {
}

async initRemote() {
this.view.initializeApp()
}

async initLoal() {
Expand Down
4 changes: 3 additions & 1 deletion solara/lib/core/dashboard/brand/BrandModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ class BrandModel {
this.brandKey = this.getQueryFromUrl('brand_key');

const sourceFromUrl = this.getQueryFromUrl('source');
this.source = sourceFromUrl === DataSource.LOCAL ? DataSource.LOCAL : DataSource.REMOTE;
// TODO: uncomment
// this.source = sourceFromUrl === DataSource.LOCAL ? DataSource.LOCAL : DataSource.REMOTE;
this.source = DataSource.REMOTE;
}

getQueryFromUrl(name) {
Expand Down
22 changes: 18 additions & 4 deletions solara/lib/core/dashboard/brand/BrandView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,19 @@ import {DataSource} from './BrandModel.js';
class BrandView {
constructor(model) {
this.model = model;
this.brandDetailsContainer = document.getElementById('brand-details-container');
this.addBrandContainer = document.getElementById('add-brand-container');

this.sectionsContainer = document.getElementById('sections');
this.addFieldSheet = document.getElementById('addFieldSheet');
this.overlay = document.getElementById('overlay');
this.confirmationDialog = document.getElementById('confirmationDialog');
this.messageBottomSheet = document.getElementById('messageBottomSheet');
this.selectFolderBtn = document.getElementById('selectFolder');

this.uploadBrandBtn = document.getElementById('uploadBrandBtn');
this.newBrandBtn = document.getElementById('newBrandBtn');

this.initializeApp();
}

async initializeApp() {
Expand All @@ -23,21 +30,28 @@ class BrandView {
}

async initRemote() {
this.selectFolderBtn.style.display = 'block';
this.selectFolderBtn.addEventListener('click', async () => {
this.toggleAddBrandContainer(true);

this.uploadBrandBtn.addEventListener('click', async () => {
try {
const dirHandle = await window.showDirectoryPicker();
const configList = await this.processFolder(dirHandle);
const json = JSON.stringify(configList, null, 2);
console.log(json, this);
const sections = {sectionItems: configList, brandName: dirHandle.name};
this.toggleAddBrandContainer(false);
this.onSelectBrandFolder(sections)
} catch (error) {
console.error('Error:', error);
}
});
}

toggleAddBrandContainer(show) {
this.addBrandContainer.style.display = show ? 'block' : 'none';
this.brandDetailsContainer.style.display = show ? 'none' : 'block';
}

async processFolder(dirHandle) {
const configList = [];
const expectedFiles = [
Expand Down Expand Up @@ -90,7 +104,7 @@ class BrandView {
}

async initLoal() {

this.toggleAddBrandContainer(false);
}

updateAppNameTitle(brandName) {
Expand Down
171 changes: 116 additions & 55 deletions solara/lib/core/dashboard/brand/brand.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,11 +441,11 @@
background-color: #3A7BC8;
}

#switchButton, #applyChangesButton {
#switchButton {
display: none;
}

#applyChangesButton, #applyChangesButton {
#applyChangesButton {
display: none;
}

Expand Down Expand Up @@ -530,7 +530,61 @@
.close-message:hover {
background-color: #0056b3; /* Darker shade on hover */
}
.select-brand-folder {

.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: 1001;
animation: fadeIn 0.5s ease-out;
display: none;
}

@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: 30px;
}

.add-brand-container button {
display: block;
width: 200px;
margin: 10px 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;
}

.add-brand-container button:hover {
background-color: #3A7BC8;
transform: scale(1.05);
}


/* Hide the brand-details-container by default */
#brand-details-container {
display: none;
}
</style>
Expand All @@ -545,69 +599,76 @@ <h1><span id="brandNametitle"></span></h1>

</header>

<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>
<div id="add-brand-container" class="add-brand-container">
<img src="../solara.png" alt="Solara Logo">
<button id="uploadBrandBtn">Upload Brand</button>
<button id="newBrandBtn">New Brand</button>
</div>

<div class="container">
<button id="selectFolder" class="select-brand-folder">Select Brand Folder</button>
<div id="sections"></div>
</div>
<div id="brand-details-container">
<button id="error-button">
⚠️
<span class="count">5</span>
</button>

<div class="bottom-sheet" id="addFieldSheet">
<h3>Add New Field</h3>
<form class="add-field-form" id="addFieldForm">
<div class="form-group">
<label for="fieldName">
Field Name
<div class="tooltip">
<i class="fas fa-question-circle question-icon"></i>
<span class="tooltiptext">Enter the name of the new field</span>
</div>
</label>
<input type="text" id="fieldName" name="fieldName" required>
</div>
<div class="action-buttons">
<button id="allBrandsButton">All Brands</button>
<button id="switchButton">Switch</button>
<button id="applyChangesButton">Apply Changes</button>
</div>

<div class="form-group">
<label for="fieldValue">
Field Value
<div class="tooltip">
<i class="fas fa-question-circle question-icon"></i>
<span class="tooltiptext">Enter the value for the new field (text or color)</span>
<div class="container">
<div id="sections"></div>
</div>

<div class="bottom-sheet" id="addFieldSheet">
<h3>Add New Field</h3>
<form class="add-field-form" id="addFieldForm">
<div class="form-group">
<label for="fieldName">
Field Name
<div class="tooltip">
<i class="fas fa-question-circle question-icon"></i>
<span class="tooltiptext">Enter the name of the new field</span>
</div>
</label>
<input type="text" id="fieldName" name="fieldName" required>
</div>

<div class="form-group">
<label for="fieldValue">
Field Value
<div class="tooltip">
<i class="fas fa-question-circle question-icon"></i>
<span class="tooltiptext">Enter the value for the new field (text or color)</span>
</div>
</label>
<input type="text" id="fieldValue" name="fieldValue" required>
<div class="color-picker-container">
<input type="color" id="colorPicker" name="colorPicker">
</div>
</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>
<button type="submit" class="add-field-button">Add Field</button>
</form>
</div>

<div class="message-bottom-sheet" id="messageBottomSheet">
<div class="message-content" id="messageContent"></div>
<button class="close-message" id="closeMessage">Close</button>
</div>
<div class="message-bottom-sheet" id="messageBottomSheet">
<div class="message-content" id="messageContent"></div>
<button class="close-message" id="closeMessage">Close</button>
</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 class="cancel" id="cancelButton">Cancel</button>
<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 class="cancel" id="cancelButton">Cancel</button>
</div>
</div>
</div>

<div class="overlay" id="overlay"></div>
<div class="overlay" id="overlay"></div>
</div>

<script type="module" src="Brand.js"></script>

Expand Down

0 comments on commit 78c7b49

Please sign in to comment.