Skip to content

Commit

Permalink
Solara
Browse files Browse the repository at this point in the history
  • Loading branch information
@IdeaS0ft
IdeaS0ft committed Sep 9, 2024
1 parent cd5103e commit 6fe7c3f
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 86 deletions.
56 changes: 36 additions & 20 deletions solara/lib/core/dashboard/brands/BrandsController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,37 @@ class BrandsController {
}

attachEventListeners() {
document.querySelector('.onboard-brand-button').addEventListener('click', () => this.showOnboardBrandForm());
document.getElementById('brandSearch').addEventListener('input', (e) => this.filterBrands(e.target.value));
document.getElementById('closeAliases').addEventListener('click', () => this.view.hideAliasesBottomSheet());

document.getElementById('cloneOption').onclick = (event) => this.handleCloneOption(event);
document.getElementById('offboardOption').onclick = (event) => this.handleOffboardOption(event);
document.getElementById('doctorOption').onclick = (event) => this.handleDoctorOption(event);
document.getElementById('aliasesOption').onclick = (event) => this.handleAliasesOption(event);
document.getElementById('settingsOption').onclick = (event) => this.handleSettingsOption(event);
document.querySelector('.onboard-brand-button')
.addEventListener('click', () => this.showOnboardBrandForm());
document.getElementById('brandSearch')
.addEventListener('input', (e) => this.filterBrands(e.target.value));
document.getElementById('closeAliases')
.addEventListener('click', () => this.view.hideAliasesBottomSheet());

this.view.brandOptionsSheet.addEventListener('clone', (event) => {
console.log('Clone', event.detail);
this.handleCloneOption(event)
});

this.view.brandOptionsSheet.addEventListener('offboard', (event) => {
console.log('Offboard', event.detail);
this.handleOffboardOption(event)
});

this.view.brandOptionsSheet.addEventListener('doctor', (event) => {
console.log('Doctor', event.detail);
this.handleDoctorOption(event)
});

this.view.brandOptionsSheet.addEventListener('aliases', (event) => {
console.log('Aliases', event.detail);
this.handleAliasesOption(event)
});

this.view.brandOptionsSheet.addEventListener('settings', (event) => {
console.log('Settings', event.detail);
this.handleSettingsOption(event)
});
}

showOnboardBrandForm() {
Expand Down Expand Up @@ -75,16 +97,13 @@ class BrandsController {

handleCloneOption(event) {
event.stopPropagation();
this.view.hideBrandOptionsBottomSheet();
this.showOnboardBrandForm();
}

handleOffboardOption(event) {
event.stopPropagation();
this.view.hideBrandOptionsBottomSheet();

const brandKey = this.view.bottomSheet.dataset.brandKey;
const brandName = this.view.bottomSheet.dataset.brandName;
const brandKey = this.view.brandOptionsSheet.dataset.brandKey;
const brandName = this.view.brandOptionsSheet.dataset.brandName;
this.view.showConfirmationDialog(`Are you sure you need to offboard ${brandKey} (${brandName}) and delete all its configurations?`,
async () => {
await this.model.offboardBrand(brandKey);
Expand All @@ -94,9 +113,8 @@ class BrandsController {

async handleDoctorOption(event) {
event.stopPropagation();
this.view.hideBrandOptionsBottomSheet();

const brandKey = this.view.bottomSheet.dataset.brandKey;
const brandKey = this.view.brandOptionsSheet.dataset.brandKey;
const result = await this.model.runDoctor(brandKey);
if (!result.passed) {
const errors = result.errors
Expand All @@ -110,9 +128,8 @@ class BrandsController {

async handleAliasesOption(event) {
event.stopPropagation();
this.view.hideBrandOptionsBottomSheet();

const brandKey = this.view.bottomSheet.dataset.brandKey;
const brandKey = this.view.brandOptionsSheet.dataset.brandKey;
const aliases = await this.model.fetchAliases(brandKey);
if (aliases) {
this.view.showAliasesBottomSheet(aliases, brandKey);
Expand All @@ -121,9 +138,8 @@ class BrandsController {

handleSettingsOption(event) {
event.stopPropagation();
this.view.hideBrandOptionsBottomSheet();

const brandKey = this.view.bottomSheet.dataset.brandKey;
const brandKey = this.view.brandOptionsSheet.dataset.brandKey;
window.location.href = this.view.brandUrl(brandKey);
}

Expand Down
21 changes: 7 additions & 14 deletions solara/lib/core/dashboard/brands/BrandsView.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import '../component/OnboardBottomSheet.js';
import '../component/ConfirmationDialog.js';
import '../component/MessageBottomSheet.js';
import '../component/BrandOptionsBottomSheet.js';

class BrandsView {
constructor() {
Expand All @@ -9,7 +10,7 @@ class BrandsView {
this.currentBrandItem = document.getElementById('currentBrandItem');
this.overlay = document.getElementById('overlay');
this.aliasesBottomSheet = document.getElementById('aliasesBottomSheet');
this.bottomSheet = document.getElementById('bottomSheet');
this.brandOptionsSheet = document.getElementById('bottomSheet');
this.confirmationDialog = document.getElementById('confirmationDialog');
this.messageBottomSheet = document.getElementById('messageBottomSheet');
this.onboardSheet = document.getElementById('onboardBottomSheet');
Expand Down Expand Up @@ -57,7 +58,7 @@ class BrandsView {
const overflowMenu = brandItem.querySelector('.overflow-menu');
overflowMenu.addEventListener('click', (event) => {
event.stopPropagation();
this.showBrandOptionsBottomSheet(brand);
this.showBrandOptionsSheet(brand);
});

brandItem.dataset.brand = brand.key;
Expand Down Expand Up @@ -127,18 +128,10 @@ class BrandsView {
}, 300);
}

showBrandOptionsBottomSheet(brand) {
this.bottomSheet.dataset.brandName = brand.name;
this.bottomSheet.dataset.brandKey = brand.key;
this.bottomSheet.style.display = 'block';
this.overlay.style.display = 'block';
this.overlay.onclick = () => this.hideBrandOptionsBottomSheet();
setTimeout(() => this.bottomSheet.classList.add('show'), 10);
}

hideBrandOptionsBottomSheet() {
this.bottomSheet.classList.remove('show');
this.overlay.style.display = 'none';
showBrandOptionsSheet(brand) {
this.brandOptionsSheet.dataset.brandName = brand.name;
this.brandOptionsSheet.dataset.brandKey = brand.key;
this.brandOptionsSheet.show();
}

showConfirmationDialog(message, onConfirm) {
Expand Down
56 changes: 4 additions & 52 deletions solara/lib/core/dashboard/brands/brands.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,48 +112,7 @@
.overflow-menu:hover {
color: var(--primary-color);
}
.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; /* Center the bottom sheet */
width: 100%; /* Ensure full width on smaller screens */
}
.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;
}

.current-brand, .brands-list {
margin-bottom: 40px;
max-width: 700px;
Expand Down Expand Up @@ -413,7 +372,7 @@ <h1>Solara Dashboard</h1>
</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>
Expand All @@ -435,15 +394,8 @@ <h2>All Brands</h2>
</div>

<div class="overlay" id="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>

<brand-options-bottom-sheet id="bottomSheet"></brand-options-bottom-sheet>

<confirmation-dialog id="confirmationDialog"></confirmation-dialog>

Expand Down
130 changes: 130 additions & 0 deletions solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js
View file
Original file line number Diff line number Diff line change
@@ -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.1.1/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);

0 comments on commit 6fe7c3f

Please sign in to comment.