Skip to content

Commit ad7c1ef

Browse files
IdrimiIdrimi
authored
Merge pull request #11 from byrdsandbytes/feature/sc-2038-create-mock-setup-fo-apple-and-google-review
mock server
2 parents 82d4105 + c30a503 commit ad7c1ef

File tree

6 files changed

+252
-49
lines changed

6 files changed

+252
-49
lines changed

‎src/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
66

77
import { AppRoutingModule } from './app-routing.module';
88
import { AppComponent } from './app.component';
9+
import { HttpClientModule } from '@angular/common/http';
910

1011
@NgModule({
1112
declarations: [AppComponent],
12-
imports: [BrowserModule, IonicModule.forRoot(
13+
imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(
1314
{
1415
mode: 'ios', // Set the mode to 'ios' for iOS style
1516

‎src/app/components/snapcast-status/snapcast-status.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ <h3>JSON Server Response:</h3>
55

66
<div *ngIf="(displayState |async) as state" class="key-value-container">
77

8-
<pre>{{ state.server| json }}</pre>
8+
<pre>{{ state| json }}</pre>
99

1010
</div>
1111

‎src/app/pages/dashboard/dashboard.page.html‎

Lines changed: 55 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -28,68 +28,71 @@
2828
<ion-fab-button class="custom-fab-button" color="light" [routerLink]="'/tabs/menu/server-status'">
2929
<ion-icon [name]="lastServerResponseDeltaInSeconds < 2400?'wifi':'wifi-outline'"></ion-icon>
3030
</ion-fab-button>
31-
<div class="fab-label">{{lastServerResponseDeltaInSeconds < 240?'Online':'Offline'}}: {{lastServerResponseTime | date: 'dd.MM.yy HH:mm'}}</div>
32-
</div>
33-
<div class="col">
34-
<ion-fab-button class="custom-fab-button" color="light" (click)="getPlayerStatus()">
35-
<ion-icon [name]="numberOfPlayingStreams>0?'musical-note':'musical-note-outline'"></ion-icon>
36-
</ion-fab-button>
37-
<div class="fab-label">{{numberOfPlayingStreams +"/"+ totalStreams}} Stream(s) playing</div>
31+
<div class="fab-label">{{lastServerResponseDeltaInSeconds < 240?'Online':'Offline'}}: {{lastServerResponseTime |
32+
date: 'dd.MM.yy HH:mm' }}</div>
33+
</div>
34+
<div class="col">
35+
<ion-fab-button class="custom-fab-button" color="light" (click)="getPlayerStatus()">
36+
<ion-icon [name]="numberOfPlayingStreams>0?'musical-note':'musical-note-outline'"></ion-icon>
37+
</ion-fab-button>
38+
<div class="fab-label">{{numberOfPlayingStreams +"/"+ totalStreams}} Stream(s) playing</div>
39+
40+
</div>
3841

3942
</div>
4043

41-
</div>
4244

4345

46+
</div>
4447

45-
</div>
48+
<ng-container *ngIf="(displayState|async) as state else noState">
49+
<div class="container">
50+
<ion-list-header>
51+
<ion-label><span *ngIf="userPreeferenceUsername as name">{{name ? name+"s": 'Your'}}</span>
52+
Devices</ion-label>
53+
<ion-button size="small" fill="clear" (click)="openModal()">
54+
<ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
55+
</ion-button>
56+
</ion-list-header>
57+
</div>
4658

47-
<ng-container *ngIf="(displayState|async) as state else noState">
48-
<div class="container">
49-
<ion-list-header>
50-
<ion-label><span *ngIf="userPreeferenceUsername as name">{{name ? name+"s": 'Your'}}</span> Devices</ion-label>
51-
<ion-button size="small" fill="clear" (click)="openModal()">
52-
<ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
53-
</ion-button>
54-
</ion-list-header>
55-
</div>
5659

60+
<div class="container-fluid">
61+
<swiper (swiper)="onSwiper($event)" (slideChange)="onSlideChange($event)" [config]="swiperConfig">
62+
<ng-container *ngFor="let group of state.server.groups; let i = index">
63+
<ng-template swiperSlide *ngIf="group.clients[0].connected">
5764

58-
<div class="container-fluid">
59-
<swiper (swiper)="onSwiper($event)" (slideChange)="onSlideChange($event)" [config]="swiperConfig">
60-
<ng-container *ngFor="let group of state.server.groups; let i = index">
61-
<ng-template swiperSlide *ngIf="group.clients[0].connected">
65+
<app-snapcast-group-preview [streams]="state.server.streams" [group]="group"></app-snapcast-group-preview>
66+
</ng-template>
6267

63-
<app-snapcast-group-preview [streams]="state.server.streams" [group]="group"></app-snapcast-group-preview>
64-
</ng-template>
68+
</ng-container>
69+
<ng-container *ngFor="let group of state.server.groups; let i = index">
70+
<ng-template swiperSlide *ngIf="group.clients[0].connected === false">
71+
<app-snapcast-group-preview class="disconnected" [streams]="state.server.streams"
72+
[group]="group"></app-snapcast-group-preview>
73+
</ng-template>
6574

66-
</ng-container>
67-
<ng-container *ngFor="let group of state.server.groups; let i = index">
68-
<ng-template swiperSlide *ngIf="group.clients[0].connected === false">
69-
<app-snapcast-group-preview class="disconnected" [streams]="state.server.streams"
70-
[group]="group"></app-snapcast-group-preview>
71-
</ng-template>
75+
</ng-container>
76+
</swiper>
77+
</div>
78+
<div class="container">
7279

73-
</ng-container>
74-
</swiper>
75-
</div>
76-
<div class="container">
7780

81+
<ion-list-header>
82+
<ion-label><span *ngIf="userPreeferenceUsername as name">{{name ? name+"s": 'Your'}}</span>
83+
Streams</ion-label>
84+
</ion-list-header>
85+
<swiper (swiper)="onSwiper($event)" (slideChange)="onSlideChange($event)" [config]="swiperConfig">
86+
<ng-template swiperSlide *ngFor="let stream of state.server.streams; let i = index">
87+
<app-snapcast-stream-preview [stream]="stream"></app-snapcast-stream-preview>
88+
</ng-template>
89+
</swiper>
90+
</div>
91+
</ng-container>
7892

79-
<ion-list-header>
80-
<ion-label><span *ngIf="userPreeferenceUsername as name">{{name ? name+"s": 'Your'}}</span> Streams</ion-label>
81-
</ion-list-header>
82-
<swiper (swiper)="onSwiper($event)" (slideChange)="onSlideChange($event)" [config]="swiperConfig">
83-
<ng-template swiperSlide *ngFor="let stream of state.server.streams; let i = index">
84-
<app-snapcast-stream-preview [stream]="stream"></app-snapcast-stream-preview>
85-
</ng-template>
86-
</swiper>
93+
<!-- <app-snapcast-status></app-snapcast-status> -->
94+
<div class="page-padding-bottom">
8795
</div>
88-
</ng-container>
89-
90-
<!-- <app-snapcast-status></app-snapcast-status> -->
91-
<div class="page-padding-bottom">
92-
</div>
9396

9497
</ion-content>
9598

@@ -117,8 +120,13 @@
117120
Wanna use a different server? Go to the <a routerLink="/tabs/menu/settings">Settings</a> page and change the
118121
Snapcast server URL.
119122
<br>
123+
Just wana test test? Enable the Demo mode:
124+
120125

121126
</ion-card-content>
127+
<ion-button fill="clear" color="primary" (click)="enableDemoMode()">
128+
<ion-icon name="play"></ion-icon> Enable Demo Mode
129+
</ion-button>
122130
</div>
123131
</ng-template>
124132
</div>

‎src/app/pages/dashboard/dashboard.page.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,12 @@ export class DashboardPage implements OnInit {
192192

193193
}
194194

195+
enableDemoMode(): void {
196+
console.log('Enabling demo mode...');
197+
this.snapcastService.mockServerState()
198+
this.isLoading = false;
199+
}
200+
195201

196202

197203

‎src/app/services/snapcast.service.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import {
4141
import { environment } from 'src/environments/environment';
4242
import { Preferences } from '@capacitor/preferences';
4343
import { UserPreference } from '../enum/user-preference.enum';
44+
import { HttpClient } from '@angular/common/http';
4445

4546
// --- Type Definitions ---
4647
interface JsonRpcBaseRequest { jsonrpc: '2.0'; id: number; method: string; }
@@ -74,6 +75,7 @@ export class SnapcastService implements OnDestroy {
7475
public readonly isConnected$ = new BehaviorSubject<boolean>(false).asObservable();
7576

7677
constructor(
78+
private http: HttpClient
7779
) {
7880

7981
this.state$ = this.stateSubject$.asObservable().pipe(
@@ -386,6 +388,19 @@ export class SnapcastService implements OnDestroy {
386388
return this.state$.pipe(map(state => state?.server?.groups.flatMap(g => g.clients).find(c => c.id === clientId)));
387389
}
388390

391+
public mockServerState(): void {
392+
const url = "assets/mock/json/server-state.json"
393+
this.http.get<SnapCastServerStatusResponse>(url).subscribe({
394+
next: (data) => {
395+
console.log('Mock server state loaded:', data);
396+
this.stateSubject$.next(data);
397+
},
398+
error: (err) => {
399+
console.error('Failed to load mock server state:', err);
400+
}
401+
});
402+
}
403+
389404
// TODO: ... other get methods ...
390405

391406

‎src/assets/mock/json/server-state.json‎

Lines changed: 173 additions & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)