Other

MacOS-en többféle módon is korlátozhatod bizonyos weboldalak elérhetőségét. Az alábbiakban néhány módszert mutatok be:

1. Hosts fájl szerkesztése

A hosts fájl szerkesztésével megakadályozhatod bizonyos weboldalak elérését. Ehhez kövesd az alábbi lépéseket:

1. Nyisd meg a Terminal alkalmazást. (Finder -> Applications -> Utilities -> Terminal)
2. Írd be a következő parancsot a hosts fájl megnyitásához:

   sudo nano /etc/hosts

3. Add hozzá a blokkolni kívánt weboldalakat a fájl végéhez, például:

   127.0.0.1 facebook.com
   127.0.0.1 www.facebook.com
   127.0.0.1 x.com
   127.0.0.1 www.x.com

4. Mentéshez nyomd meg a Ctrl + O, majd az Enter gombot. Kilépéshez nyomd meg a Ctrl + X gombot.
5. Az új beállítások érvényesítéséhez futtasd az alábbi parancsot:

   sudo dscacheutil -flushcache

2. Screen Time (Képernyőidő) használata

A macOS beépített Screen Time funkciójával is korlátozhatod a weboldalakat:

1. Nyisd meg a System Preferences-t (Rendszerbeállítások).
2. Kattints a “Screen Time” (Képernyőidő) ikonra.
3. Ha még nem tetted, kapcsolja be a Screen Time-ot.
4. Válaszd a “Content & Privacy” (Tartalom és adatvédelem) opciót.
5. Kattints a “Turn On” (Bekapcsolás) gombra, ha a Tartalom és adatvédelem korlátozásai még nem aktívak.
6. Menj a “Web Content” (Webtartalom) részhez.
7. Válaszd az “Limit Adult Websites” (Felnőtt webhelyek korlátozása) lehetőséget.
8. A “Never Allow” (Sose engedélyezd) rész alatt kattints a “+” gombra és add hozzá a blokkolni kívánt weboldalak URL-jeit (pl. facebook.com, x.com).

3. Harmadik féltől származó szoftverek használata

Számos harmadik féltől származó alkalmazás is elérhető, amelyek lehetővé teszik a weboldalak blokkolását. Ilyen például a:

• Cold Turkey
• Focus
• SelfControl

Ezek az alkalmazások további funkciókat is kínálnak, mint például a munkaidő menedzsment és a zavaró tényezők kizárása.

Ezekkel a módszerekkel hatékonyan korlátozhatod bizonyos weboldalak elérhetőségét a macOS rendszeren. Ha további segítségre van szükséged, kérlek, jelezd!

npm install ngx-device-detector --save

export class AppComponent implements OnInit {
  isChrome: boolean;
  isFirefox: boolean;

private readonly _deviceDetectorService = inject(DeviceDetectorService);

  ngOnInit() {
    const browser = this.deviceService.browser;
    this.isChrome = browser === 'Chrome';
    this.isFirefox = browser === 'Firefox';

    console.log(`Is Chrome: ${this.isChrome}`);
    console.log(`Is Firefox: ${this.isFirefox}`);
  }
}

export class AppComponent implements OnInit {
  isChrome: boolean;
  isFirefox: boolean;

  constructor(private deviceService: DeviceDetectorService) {}

  ngOnInit() {
    const browser = this.deviceService.browser;
    this.isChrome = browser === 'Chrome';
    this.isFirefox = browser === 'Firefox';

    console.log(`Is Chrome: ${this.isChrome}`);
    console.log(`Is Firefox: ${this.isFirefox}`);
  }
}

<swiper-container #swiper1>
  @for (item of data.running; track item) {
    <swiper-slide>
      <app-ad-card [data]="item" />
    </swiper-slide>
  }
</swiper-container>

swiper-container {
  display: grid;
}

import { CommonModule, isPlatformBrowser } from '@angular/common';
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  ElementRef,
  Inject,
  inject,
  OnDestroy,
  OnInit,
  PLATFORM_ID,
  ViewChild,
} from '@angular/core';
import { DeviceService, HeaderNavService } from '@app/core/services';
import { AdCardComponent } from '@app/lib/components/ad-card/ad-card.component';
import { BarType } from '@app/lib/components/progress-bar-2/progress-bar-2.enum';
import { StatType } from '@app/lib/components/stats/stats.enum';
import { StatusType } from '@app/lib/shared/enums/status.enum';
import { EmptyAdsComponent } from '@app/shared/components/empty-ads/empty-ads.component';
import { TranslocoPipe } from '@jsverse/transloco';
import { Subject, takeUntil } from 'rxjs';
import { SwiperContainer } from 'swiper/swiper-element';

import { MockOverview } from '../../mock/overview.mock';
import { Overview } from '../../models/overview.model';

@Component({
  selector: 'app-overview',
  standalone: true,
  imports: [CommonModule, EmptyAdsComponent, TranslocoPipe, AdCardComponent],
  templateUrl: './overview.component.html',
  styleUrl: './overview.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OverviewComponent implements OnInit, AfterViewInit, OnDestroy {
  private readonly _headerNavService = inject(HeaderNavService);
  private readonly _cdr = inject(ChangeDetectorRef);
  private readonly _deviceService = inject(DeviceService);
  private readonly _destroy$ = new Subject();

  @ViewChild('swiper1') private readonly _swiper1Ref!: ElementRef<SwiperContainer>;
  @ViewChild('swiper2') private readonly _swiper2Ref!: ElementRef<SwiperContainer>;
  @ViewChild('swiper3') private readonly _swiper3Ref!: ElementRef<SwiperContainer>;

  isBrowser: boolean = false;
  isMobile: boolean = true;
  title: string;
  data: Overview = MockOverview;

  StatusType = StatusType;
  StatType = StatType;
  BarType = BarType;

  constructor(@Inject(PLATFORM_ID) private readonly _platformId: object) {
    this.isBrowser = isPlatformBrowser(this._platformId);
  }

  public get classes(): string[] {
    const deviceType = this.isMobile ? 'mobile' : 'desktop';
    return [deviceType];
  }

  public ngOnInit(): void {
    this._deviceService.isMobileObs$.pipe(takeUntil(this._destroy$)).subscribe((isMobile) => {
      this.isMobile = isMobile;
      this._cdr.markForCheck();
    });
    this._headerNavService.isVisible = true;
    this._headerNavService.isInfoCardVisible = false;
    this._headerNavService.isSingleButton = true;
    this._headerNavService.btnPrimaryLabel = 'SHARED.NEW_AD';
    this._headerNavService.isBtnPrimaryLabelVisible = true;
    this._headerNavService.buttonPrimaryMobilIcon = 'icon-plus';
    this._headerNavService.isSubpage = false;
    this._headerNavService.isButtonsVisible = true;
  }

  public ngAfterViewInit(): void {
    if (this.isBrowser) {
      this._initSwiper1(this._swiper1Ref);
      this._initSwiper1(this._swiper2Ref);
      this._initSwiper1(this._swiper3Ref);
    }
  }

  ngOnDestroy(): void {
    this._destroy$.next(null);
    this._destroy$.complete();
  }

  private _initSwiper1(swiperElement: ElementRef<SwiperContainer>): void {
    const options = {
      slidesPerView: 3,
      breakpoints: {
        0: {
          slidesPerView: 1,
        },
        470: {
          slidesPerView: 1.5,
        },
        599: {
          slidesPerView: 1,
        },
        780: {
          slidesPerView: 1.5,
        },
        930: {
          slidesPerView: 2,
        },
        1100: {
          slidesPerView: 2.5,
        },
        1250: {
          slidesPerView: 3,
        },
      },
      spaceBetween: 24,
    };
    const swiperElem = swiperElement.nativeElement;
    Object.assign(swiperElem, options);
    swiperElem.initialize();
  }
}

angular.json

"stylePreprocessorOptions": {
  "includePaths": ["src/scss"]
},

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

import { Confirmation } from '../models';

@Injectable({
  providedIn: 'root',
})
export class ConfirmationService {
  private readonly requireConfirmation$ = new Subject<Confirmation | null>();
  public requireConfirmationObs$: Observable<Confirmation | null>;
  private readonly acceptConfirmation$ = new Subject<Confirmation | null>();
  public acceptObs$: Observable<Confirmation | null>;

  constructor() {
    this.requireConfirmationObs$ = this.requireConfirmation$.asObservable();
    this.acceptObs$ = this.acceptConfirmation$.asObservable();
  }

  confirm(confirmation: Confirmation): this {
    this.requireConfirmation$.next(confirmation);
    return this;
  }

  close(): this {
    this.requireConfirmation$.next(null);
    return this;
  }

  onAccept(): void {
    this.acceptConfirmation$.next(null);
  }
}

onDeleteProfileClick(event: Event): void {
    event.preventDefault();

    this.confirmationService.confirm({
      header: this.translocoService.translate('PROFILE.DELETE_PROFILE'),
      message: this.translocoService.translate('PROFILE.DELETE_PROFILE_CONFIRMATION'),
      acceptLabel: this.translocoService.translate('PROFILE.DELETE_PROFILE'),
      rejectLabel: this.translocoService.translate('SHARED.CANCEL'),
      icon: 'icon-alert-triangle',
      accept: () => {
        console.log('ITT HÍVJUK AZ APIT A TÖRLÉSHEZ');
      },
    });
  }

<div class="card card-notification" [ngClass]="getClasses()">
  <h5 class="card-title">{{ data.title }}</h5>
  <p class="card-text">{{ data.text }}</p>
  <div class="card-footer">
    <span>
      @if (data.redirect_url) {
        <a class="card-readmore" [href]="data.redirect_url">{{ 'SHARED.FORWARD' | transloco }}</a>
      }
    </span>
    <div class="card-date">{{ data.date | date: 'yyyy.MM.dd hh:mm' }}</div>
  </div>
  <div class="card-icon-top-right" (click)="onClose()">
    <app-icon [icon]="icon" [size]="size"></app-icon>
  </div>
</div>

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { IconComponent } from '@app/shared/components/icon/icon.component';
import { TranslocoPipe } from '@jsverse/transloco';

import { CardNotification } from './card-notification.model';

@Component({
  selector: 'app-card-notification',
  standalone: true,
  imports: [CommonModule, IconComponent, TranslocoPipe],
  templateUrl: './card-notification.component.html',
  styleUrl: './card-notification.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardNotificationComponent {
  @Input() data: CardNotification = {
    title: 'Kampány limit elérve',
    text: 'Az XYZ Kampány elérte a 80 000 Ft-os limitet',
    status: 'unread',
    redirect_url: 'https://example.com',
    date: new Date(),
  };
  @Input() icon: string = 'icon-close';
  @Input() size: number = 14;

  @Output() closeCardNotification = new EventEmitter<void>();

  getClasses(): string[] {
    const classes = [];
    switch (this.data.status) {
      case 'unread':
        classes.push('unread');
        break;
      case 'read':
        classes.push('read');
        break;
      case 'archived':
        classes.push('archived');
        break;
    }
    return classes;
  }

  onClose(): void {
    this.closeCardNotification.emit();
  }
}

@use 'shared' as *;

:host {
  display: block;
}
.card {
  max-width: 100%;
  margin-bottom: 8px;
  .card-title {
    font-weight: 500;
  }
  &.unread {
    background: var(--color-grey-50);
    .card-title {
      font-weight: 700;
    }
  }
  &.archived {
    opacity: 0.6;
  }
  &-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-readmore {
    color: var(--color-purple-500);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin-top: 4px;
    &:hover {
      text-decoration: underline;
    }
  }
  &-date {
    color: var(--color-grey-700);
    text-align: right;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
  }
  &-notification {
    cursor: pointer;
    &:hover {
      background-color: var(--color-grey-100);
    }
  }
}

get limitedData() {
    const limit = this.isMobile ? 2 : 4;
    return this.data.slice(0, limit);
}

*ngFor="let item of limitedData; let i = index"

export class Component implements OnInit, OnDestroy {}

private readonly _deviceService = inject(DeviceService);
private readonly _cdr = inject(ChangeDetectorRef);
private readonly _destroy$ = new Subject();

@Input() public isMobile: boolean;

public ngOnInit(): void {
    this._getDevice();
}

public ngOnDestroy(): void {
    this._destroy$.next(null);
    this._destroy$.complete();
  }

public get classes(): string[] {
  const deviceType = this.isMobile ? 'mobile' : 'desktop';
  return [deviceType];
}

private _getDevice(): void {
  this._deviceService.isMobileObs$.pipe(takeUntil(this._destroy$)).subscribe((isMobile) => {
    this.isMobile = isMobile;
    this._cdr.markForCheck();
  });
}

---

import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { inject, Injectable, OnDestroy } from '@angular/core';
import { DeviceType } from '@app/shared/enums';
import { BehaviorSubject, Subject, takeUntil } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DeviceService implements OnDestroy {
  private readonly _breakpointObserver = inject(BreakpointObserver);
  private readonly _deviceTypeBs$ = new BehaviorSubject<DeviceType>(DeviceType.DESKTOP);
  private readonly _isMobileBs$ = new BehaviorSubject<boolean>(false);
  private readonly _destroy$ = new Subject();
  public readonly deviceTypeObs$ = this._deviceTypeBs$.asObservable();
  public readonly isMobileObs$ = this._isMobileBs$.asObservable();

  public get deviceType(): DeviceType {
    return this._deviceTypeBs$.value;
  }

  public set deviceType(deviceType: DeviceType) {
    this._deviceTypeBs$.next(deviceType);
    this.isMobile = deviceType === DeviceType.MOBILE;
  }

  public get isMobile(): boolean {
    return this._isMobileBs$.value;
  }

  public set isMobile(isMobile: boolean) {
    this._isMobileBs$.next(isMobile);
  }

  public constructor() {
    this._breakpointObserver
      .observe([Breakpoints.XSmall, Breakpoints.Small])
      .pipe(takeUntil(this._destroy$))
      .subscribe(
        (state: BreakpointState) => (this.deviceType = state.matches ? DeviceType.MOBILE : DeviceType.DESKTOP)
      );
  }

  public ngOnDestroy(): void {
    this._destroy$.next(null);
    this._destroy$.complete();
  }
}

Ez az Angular kód egy Component osztályt definiál, amely implementálja az OnInit és az OnDestroy interfészeket. Íme, mit csinál részletesen:

1. Attribútumok:

• isMobile: Ez egy boolean típusú attribútum, amely azt jelzi, hogy az eszköz mobil-e vagy sem.
• destroy$: Egy Subject, amelyet a komponens elpusztításakor használnak a megfigyelések befejezésére.

1. Konstruktor:

• deviceService: Egy szolgáltatás, amely információt nyújt arról, hogy az eszköz mobil-e.
• cdr: A ChangeDetectorRef szolgáltatás, amelyet a komponens változásainak észlelésére használnak.

1. ngOnInit metódus:

• Ez a metódus az Angular életciklusának része, és akkor fut le, amikor a komponens inicializálódik.
• Feliratkozik a deviceService.isMobileObs$ Observable-re, hogy figyelje, az eszköz mobil-e vagy sem.
• A feliratkozás során frissíti az isMobile attribútumot az aktuális értékkel és jelzi az ChangeDetectorRef-nek, hogy ellenőrizze a változásokat (markForCheck).

1. ngOnDestroy metódus:

• Ez a metódus az Angular életciklusának része, és akkor fut le, amikor a komponens elpusztul.
• Ekkor jelet küld a destroy$ Subject-nek (next), és befejezi azt (complete), ezzel biztosítva, hogy minden feliratkozás megszűnjön és az erőforrások felszabaduljanak.

Összefoglalva:

Ez a komponens figyeli, hogy az eszköz mobil-e a deviceService segítségével, és frissíti a komponens állapotát ennek megfelelően. Az erőforrások megfelelő kezelése érdekében a komponens elpusztításakor minden feliratkozást megszüntet.

display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 30px;

export interface ImageDetails {
  fileName: string;
  imageSrc: string;
  imageAlt: string;
  imageSize: string;
  fileSize: string;
  uploadTime: Date;
}

@Input() data: ImageDetails;

export const Default: Story = {
  args: {
    data: {
      fileName: 'Fejhallgato_01.jpg',
      imageSrc: 'assets/images/headphone.jpg',
      imageAlt: 'Headphone',
      imageSize: '300x300',
      fileSize: '323kb',
      uploadTime: new Date(),
    },
  },
};

<div class="image-details">
  <figure class="image-details-figure">
    <img class="image-details-image" [src]="data.imageSrc" [alt]="data.imageAlt" />
  </figure>
  <div class="image-details-body">
    <h5 class="image-details-filename">{{ data.fileName }}</h5>
    <div class="image-details-meta">
      <span class="image-details-meta-key">{{ 'STORAGE.SIZE' | transloco }}: </span>
      <span class="image-details-meta-value">{{ data.imageSize }}</span>
    </div>
    <div class="image-details-meta">
      <span class="image-details-meta-key">{{ 'STORAGE.FILE_SIZE' | transloco }}: </span>
      <span class="image-details-meta-value">{{ data.fileSize }}</span>
    </div>
    <div class="image-details-meta">
      <span class="image-details-meta-key">{{ 'STORAGE.UPLOADED' | transloco }}: </span>
      <span class="image-details-meta-value">{{ data.uploadTime | date: 'yyyy.MM.dd hh:mm' }}</span>
    </div>
  </div>
</div>