feat(stalker): add import stalker portal component

src/app/app-routing.module.ts

@@ -36,6 +36,13 @@ const routes: Routes = [
                 (c) => c.XtreamMainContainerComponent
             ),
     },
+    {
+        path: 'portals/:id',
+        loadComponent: () =>
+            import('./stalker/stalker-main-container.component').then(
+                (c) => c.StalkerMainContainerComponent
+            ),
+    },
     {
         path: '**',
         redirectTo: '',

src/app/home/home.component.html

@@ -46,9 +46,7 @@
                 </div>
             </ng-template>
             <ng-template matTabContent>
-                <app-url-upload
-                    (urlAdded)="sendPlaylistsUrl($event)"
-                />
+                <app-url-upload (urlAdded)="sendPlaylistsUrl($event)" />
             </ng-template>
         </mat-tab>
         <mat-tab>
@@ -59,14 +57,12 @@
                 </div>
             </ng-template>
             <ng-template matTabContent>
-                <app-text-import
-                    (textAdded)="uploadAsText($event)"
-                />
+                <app-text-import (textAdded)="uploadAsText($event)" />
             </ng-template>
         </mat-tab>
         <mat-tab>
             <ng-template mat-tab-label>
-                <mat-icon class="tab-icon">text_format</mat-icon>
+                <mat-icon class="tab-icon">video_library</mat-icon>
                 <div class="tab-title">
                     {{ 'HOME.TABS.XTREME_IMPORT' | translate }}
                 </div>
@@ -75,6 +71,17 @@
                 <app-xtream-code-import />
             </ng-template>
         </mat-tab>
+        <mat-tab>
+            <ng-template mat-tab-label>
+                <mat-icon class="tab-icon">dashboard</mat-icon>
+                <div class="tab-title">
+                    {{ 'HOME.TABS.STALKER_PORTAL_IMPORT' | translate }}
+                </div>
+            </ng-template>
+            <ng-template matTabContent>
+                <app-stalker-portal-import />
+            </ng-template>
+        </mat-tab>
     </mat-tab-group>
 
     <!-- Loading spinner -->

src/app/home/home.module.ts

@@ -5,6 +5,7 @@ import { DragDropFileUploadDirective } from './file-upload/drag-drop-file-upload
 import { FileUploadComponent } from './file-upload/file-upload.component';
 import { HomeComponent } from './home.component';
 import { HomeRoutingModule } from './home.routing';
+import { StalkerPortalImportComponent } from './stalker-portal-import/stalker-portal-import.component';
 import { TextImportComponent } from './text-import/text-import.component';
 import { UrlUploadComponent } from './url-upload/url-upload.component';
 import { XtreamCodeImportComponent } from './xtream-code-import/xtream-code-import.component';
@@ -15,6 +16,7 @@ import { XtreamCodeImportComponent } from './xtream-code-import/xtream-code-impo
         HomeRoutingModule,
         SharedModule,
         XtreamCodeImportComponent,
+        StalkerPortalImportComponent,
     ],
     declarations: [
         DragDropFileUploadDirective,

src/app/home/stalker-portal-import/stalker-portal-import.component.html

@@ -0,0 +1,54 @@
+<form [formGroup]="form">
+    <mat-form-field class="full-width">
+        <mat-label for="title">{{
+            'HOME.STALKER_PORTAL.TITLE' | translate
+        }}</mat-label>
+        <input matInput type="text" id="title" formControlName="title" />
+    </mat-form-field>
+    <mat-form-field class="full-width">
+        <mat-label for="portalUrl">{{
+            'HOME.STALKER_PORTAL.SERVER_URL' | translate
+        }}</mat-label>
+        <input
+            matInput
+            type="text"
+            id="portalUrl"
+            formControlName="portalUrl"
+        />
+        <mat-hint>{{
+            'HOME.STALKER_PORTAL.URL_VALIDATION_ERROR' | translate
+        }}</mat-hint>
+        <mat-error>{{ 'SETTINGS.EPG_URL_ERROR' | translate }}</mat-error>
+    </mat-form-field>
+    <mat-form-field class="full-width">
+        <mat-label for="macAddress">{{
+            'HOME.STALKER_PORTAL.MAC_ADDRESS' | translate
+        }}</mat-label>
+        <input
+            matInput
+            type="text"
+            id="macAddress"
+            formControlName="macAddress"
+        />
+    </mat-form-field>
+    <!-- <mat-form-field class="full-width">
+        <mat-label for="username">{{
+            'HOME.XTREAM_PLAYLIST.USERNAME' | translate
+        }}</mat-label>
+        <input matInput type="text" id="username" formControlName="username" />
+    </mat-form-field>
+    <mat-form-field class="full-width">
+        <mat-label for="password">{{
+            'HOME.XTREAM_PLAYLIST.PASSWORD' | translate
+        }}</mat-label>
+        <input matInput type="text" id="password" formControlName="password" />
+    </mat-form-field> -->
+    <button
+        mat-button
+        type="submit"
+        [disabled]="!form.valid"
+        (click)="addPlaylist()"
+    >
+        {{ 'HOME.STALKER_PORTAL.ADD' | translate }}
+    </button>
+</form>

src/app/home/stalker-portal-import/stalker-portal-import.component.ts

@@ -0,0 +1,69 @@
+import { Component, inject } from '@angular/core';
+import {
+    FormControl,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { Store } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
+import { v4 as uuid } from 'uuid';
+import { Playlist } from '../../../../shared/playlist.interface';
+import { DataService } from '../../services/data.service';
+import { addPlaylist } from '../../state/actions';
+
+@Component({
+    standalone: true,
+    imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatButtonModule,
+        TranslateModule,
+    ],
+    selector: 'app-stalker-portal-import',
+    templateUrl: './stalker-portal-import.component.html',
+    styles: [
+        `
+            :host {
+                display: flex;
+                margin: 10px;
+                justify-content: center;
+            }
+
+            form {
+                width: 100%;
+            }
+        `,
+    ],
+})
+export class StalkerPortalImportComponent {
+    URL_REGEX = /^(http|https|file):\/\/[^ "]+$/;
+
+    form = new FormGroup({
+        _id: new FormControl(uuid()),
+        title: new FormControl('', [Validators.required]),
+        macAddress: new FormControl(''),
+        password: new FormControl(''),
+        username: new FormControl(''),
+        portalUrl: new FormControl('', [
+            Validators.required,
+            Validators.pattern(this.URL_REGEX),
+        ]),
+        importDate: new FormControl(new Date().toISOString()),
+    });
+
+    dataService = inject(DataService);
+    store = inject(Store);
+
+    addPlaylist() {
+        this.store.dispatch(
+            addPlaylist({ playlist: this.form.value as Playlist })
+        );
+    }
+}