diff --git a/apps/taiga-lumbermill/public/music_1.jpg b/apps/taiga-lumbermill/public/music_1.jpg new file mode 100644 index 000000000..10a440431 Binary files /dev/null and b/apps/taiga-lumbermill/public/music_1.jpg differ diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.html new file mode 100644 index 000000000..c4b6cf3b9 --- /dev/null +++ b/apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.html @@ -0,0 +1,60 @@ +
+
+

+ Music +

+
+
+ +

Believer

+

+ Imagine Dragons +

+
+
+ +
+

00:013

+

00:52

+
+
+
+ + + + + +
+
+
+ + + +
+
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.less new file mode 100644 index 000000000..1f2a677d3 --- /dev/null +++ b/apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.less @@ -0,0 +1,29 @@ +.numbers { + display: flex; + justify-content: space-between; + color: var(--tui-text-primary); +} + +.buttons { + display: flex; + align-items: center; + justify-content: space-around; +} + +.volume { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.info { + display: flex; + flex-direction: column; + align-items: center; +} + +.logo { + border-radius: 0.5rem; + width: 9rem; + height: 9rem; +} diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.ts b/apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.ts new file mode 100644 index 000000000..6835537d8 --- /dev/null +++ b/apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.ts @@ -0,0 +1,33 @@ +import {CommonModule} from '@angular/common'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {TuiAppearance, TuiIcon, TuiTitle} from '@taiga-ui/core'; +import {TuiHeader} from '@taiga-ui/experimental'; +import {TuiSliderComponent} from '@taiga-ui/kit'; +import {TuiCardLarge} from '@taiga-ui/layout'; + +// import {MusicService} from './music.service'; + +@Component({ + standalone: true, + selector: 'lmb-music', + imports: [ + CommonModule, + TuiAppearance, + TuiCardLarge, + TuiTitle, + TuiHeader, + TuiSliderComponent, + FormsModule, + ReactiveFormsModule, + TuiIcon, + ], + templateUrl: './music.component.html', + styleUrl: './music.component.less', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class MusicComponent { + protected value = 4; + protected play = new FormControl(60); + protected volume = new FormControl(0); +} diff --git a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html index 9117f4aaf..97bdad3be 100644 --- a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html +++ b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html @@ -23,5 +23,11 @@ +
+
+
+ +
+
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.ts b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.ts index 14e11e71a..06b2a781f 100644 --- a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.ts +++ b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.ts @@ -9,6 +9,7 @@ import {ControlPanelComponent} from './components/control-panel/control-panel.co import {CostComponent} from './components/Cost/cost.component'; import {ElectricityComponent} from './components/electricity/electricity.component'; import {LightingComponent} from './components/Lighting/lighting.component'; +import {MusicComponent} from './components/music/music.component'; import {SafetyComponent} from './components/Safety/safety.component'; @Component({ @@ -23,6 +24,7 @@ import {SafetyComponent} from './components/Safety/safety.component'; LightingComponent, CleaningComponent, ControlPanelComponent, + MusicComponent, TuiAppearance, TuiCardLarge, ],