Skip to content

Commit

Permalink
Update to @for and @if control flow (#35)
Browse files Browse the repository at this point in the history
  • Loading branch information
@derme302
derme302 authored Jun 10, 2024
1 parent 751348b commit d2a2b5d
Show file tree
Hide file tree
Showing 8 changed files with 149 additions and 115 deletions.
153 changes: 90 additions & 63 deletions src/app/feed/feed.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,25 @@
<br />
<br />
<ion-list>
<ion-item-sliding *ngFor="let source of sourcesService.getSources()">
@for (source of sourcesService.getSources(); track source.url) {
<ion-item-sliding>
<ion-item (click)="filterByUrl(source.url)">
<ion-icon *ngIf="source.url === filter" aria-hidden="true" name="chevron-forward" slot="start"></ion-icon>
<ion-label>
<strong>{{source.title}}</strong>
<br />
<ion-text>{{source.url}}</ion-text>
</ion-label>
@if (source.url === filter) {
<ion-icon aria-hidden="true" name="chevron-forward" slot="start"></ion-icon>
}
<ion-label>
<strong>{{source.title}}</strong>
<br />
<ion-text>{{source.url}}</ion-text>
</ion-label>
</ion-item>

<ion-item-options side="end">
<ion-item-option color="danger">
<ion-icon slot="icon-only" name="trash" (click)="sourcesService.removeSource(source.url)"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-sliding>
}
</ion-list>
<br />
<ion-button ion-button (click)="filterClear()" [disabled]="filter === ''">Clear Filter</ion-button>
Expand Down Expand Up @@ -78,69 +81,93 @@

<!-- Feed list -->
<ion-list>
<div *ngFor="let entry of feedService.entries">
<div *ngIf="filter === '' || entry.feedUrl === filter">
<div *ngIf="!settingsService.getSettings().compressedFeed">
<ion-card [button]="true" (click)="openPreview(entry.title, entry.content, entry.link)">
<div *ngIf="settingsService.getSettings().showImages" class="card-image">
<img *ngIf="entry.imgLink !== null" alt="Entry Cover Image" src="{{ entry.imgLink }}" />
</div>
<ion-card-header>
<ion-card-subtitle>
{{entry.source}} | {{formatDate(entry.isoDate, settingsService.getSettings().locale)}}
</ion-card-subtitle>
<ion-card-title>
<!---ToDo: We override the background as the colour is slightly different on iOS-->
<ion-item class="ion-no-padding" style="--ion-item-background: transparent;">
<ion-label>{{entry.title}}</ion-label>
<ion-button *ngIf="entry.bookmark !== true" slot="end" fill="clear" (click)="addBookmark($event, entry)">
<ion-icon color="medium" name="bookmark-outline"></ion-icon>
</ion-button>
<ion-button *ngIf="entry.bookmark !== false" slot="end" fill="clear" (click)="removeBookmark($event, entry)">
<ion-icon color="medium" name="bookmark"></ion-icon>
</ion-button>
</ion-item>
</ion-card-title>
</ion-card-header>
<ion-card-content>
{{entry.contentStripped}}
</ion-card-content>
</ion-card>
</div>
<div *ngIf="settingsService.getSettings().compressedFeed">
<ion-item-sliding>
<ion-item [button]="true" (click)="openPreview(entry.title, entry.content, entry.link)">
<div *ngIf="settingsService.getSettings().showImages">
<ion-thumbnail *ngIf="entry.imgLink !== null" slot="start">
<img alt="Entry Cover Image" src="{{ entry.imgLink }}" />
</ion-thumbnail>
@for (entry of feedService.entries; track entry) {
<div>
@if (filter === '' || entry.feedUrl === filter) {
<div>
@if (!settingsService.getSettings().compressedFeed) {
<div>
<ion-card [button]="true" (click)="openPreview(entry.title, entry.content, entry.link)">
@if (settingsService.getSettings().showImages) {
<div class="card-image">
@if (entry.imgLink !== null) {
<img alt="Entry Cover Image" src="{{ entry.imgLink }}" />
}
</div>
}
<ion-card-header>
<ion-card-subtitle>
{{entry.source}} | {{formatDate(entry.isoDate, settingsService.getSettings().locale)}}
</ion-card-subtitle>
<ion-card-title>
<!---ToDo: We override the background as the colour is slightly different on iOS-->
<ion-item class="ion-no-padding" style="--ion-item-background: transparent;">
<ion-label>{{entry.title}}</ion-label>
@if (entry.bookmark !== true) {
<ion-button slot="end" fill="clear" (click)="addBookmark($event, entry)">
<ion-icon color="medium" name="bookmark-outline"></ion-icon>
</ion-button>
}
@if (entry.bookmark !== false) {
<ion-button slot="end" fill="clear" (click)="removeBookmark($event, entry)">
<ion-icon color="medium" name="bookmark"></ion-icon>
</ion-button>
}
</ion-item>
</ion-card-title>
</ion-card-header>
<ion-card-content>
{{entry.contentStripped}}
</ion-card-content>
</ion-card>
</div>
<ion-label>
<strong>{{entry.title}}</strong><br />
<ion-text>{{entry.source}}</ion-text><br />
<ion-note color="medium" class="ion-text-wrap">{{entry.contentStripped}}</ion-note>
</ion-label>
<div class="metadata-end-wrapper" slot="end">
<ion-note color="medium">{{formatDateAsDay(entry.isoDate, settingsService.getSettings().locale)}}</ion-note>
<!-- <ion-icon color="medium" name="chevron-forward"></ion-icon> -->
}
@if (settingsService.getSettings().compressedFeed) {
<div>
<ion-item-sliding>
<ion-item [button]="true" (click)="openPreview(entry.title, entry.content, entry.link)">
@if (settingsService.getSettings().showImages) {
<div>
@if (entry.imgLink !== null) {
<ion-thumbnail slot="start">
<img alt="Entry Cover Image" src="{{ entry.imgLink }}" />
</ion-thumbnail>
}
</div>
}
<ion-label>
<strong>{{entry.title}}</strong><br />
<ion-text>{{entry.source}}</ion-text><br />
<ion-note color="medium" class="ion-text-wrap">{{entry.contentStripped}}</ion-note>
</ion-label>
<div class="metadata-end-wrapper" slot="end">
<ion-note color="medium">{{formatDateAsDay(entry.isoDate, settingsService.getSettings().locale)}}</ion-note>
<!-- <ion-icon color="medium" name="chevron-forward"></ion-icon> -->
</div>
</ion-item>
</ion-item-sliding>
</div>
</ion-item>
</ion-item-sliding>
</div>
}
</div>
}
</div>
</div>
}
</ion-list>

<!-- Return to top button -->
<ion-fab slot="fixed" vertical="bottom" horizontal="end">
<ion-fab-button *ngIf="currentScrollOffset > 10" (click)="scrollToTop()">
<ion-icon name="chevron-up-outline"></ion-icon>
</ion-fab-button>
@if (currentScrollOffset > 10) {
<ion-fab-button (click)="scrollToTop()">
<ion-icon name="chevron-up-outline"></ion-icon>
</ion-fab-button>
}
</ion-fab>

<!-- Onboarding -->
<div *ngIf="feedService.entries.length === 0" class="ion-text-center">
It doesn't look like you have any feed items yet, would you like to <a href="/tabs/sources">add some sources?</a>
</div>
@if (feedService.entries.length === 0) {
<div class="ion-text-center">
It doesn't look like you have any feed items yet, would you like to <a href="/tabs/sources">add some sources?</a>
</div>
}
</ion-content>
</div>
3 changes: 1 addition & 2 deletions src/app/feed/feed.page.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { CommonModule } from '@angular/common';
import { Component, ElementRef, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
Expand Down Expand Up @@ -38,7 +37,7 @@ import { SettingsComponent } from '../settings/settings.component';
templateUrl: 'feed.page.html',
styleUrls: ['feed.page.scss'],
standalone: true,
imports: [CommonModule, FormsModule, IonCard, IonCardHeader, IonCardContent,
imports: [FormsModule, IonCard, IonCardHeader, IonCardContent,
IonCardSubtitle, IonCardTitle, IonHeader, IonToolbar, IonTitle, IonNote,
IonContent, IonList, IonInput, IonItem, IonItemOption, IonItemOptions,
IonIcon, IonButton, IonButtons, IonText, IonMenu, IonThumbnail, IonMenuToggle,
Expand Down
38 changes: 20 additions & 18 deletions src/app/saved/saved.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,27 @@

<!-- Bookmark list -->
<ion-list>
<div *ngFor="let entry of bookmarks.getBookmarks()">
<ion-card [button]="true" (click)="platformService.openUrlInPlatformBrowser(entry.link)">
<ion-card-header>
<ion-card-subtitle>
{{entry.source}} | {{formatDate(entry.pubDate, "en-AU")}}
</ion-card-subtitle>
<ion-card-title>
<ion-item class="ion-no-padding">
<ion-label>{{entry.title}}</ion-label>
<ion-button slot="end" fill="clear" (click)="removeBookmark($event, entry)">
<ion-icon color="medium" name="bookmark"></ion-icon>
</ion-button>
</ion-item>
</ion-card-title>
</ion-card-header>
<ion-card-content>
@for (entry of bookmarks.getBookmarks(); track entry.url) {
<div>
<ion-card [button]="true" (click)="platformService.openUrlInPlatformBrowser(entry.link)">
<ion-card-header>
<ion-card-subtitle>
{{entry.source}} | {{formatDate(entry.pubDate, "en-AU")}}
</ion-card-subtitle>
<ion-card-title>
<ion-item class="ion-no-padding">
<ion-label>{{entry.title}}</ion-label>
<ion-button slot="end" fill="clear" (click)="removeBookmark($event, entry)">
<ion-icon color="medium" name="bookmark"></ion-icon>
</ion-button>
</ion-item>
</ion-card-title>
</ion-card-header>
<ion-card-content>
{{entry.contentStripped}}
</ion-card-content>
</ion-card>
</ion-card-content>
</ion-card>
</div>
}
</ion-list>
</ion-content>
3 changes: 1 addition & 2 deletions src/app/saved/saved.page.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle,
IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar
Expand All @@ -14,7 +13,7 @@ import { PlatformService } from '../services/platform.service';
templateUrl: 'saved.page.html',
styleUrls: ['saved.page.scss'],
standalone: true,
imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardHeader, IonCardContent,
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardHeader, IonCardContent,
IonCardSubtitle, IonCardTitle, IonButton, IonLabel, IonList, IonIcon, IonItem],
})
export class SavedPage {
Expand Down
53 changes: 30 additions & 23 deletions src/app/sources/sources.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,34 +23,38 @@
</ion-toolbar>
</ion-header>

<form [formGroup]="rssForm">
<ion-input
[(ngModel)]="inputUrl"
formControlName="url"
type="url"
placeholder="Please enter an RSS/Atom Feed URL"
helperText="Enter a valid url"
errorText="Invalid url"
[clearOnEdit]="true"
<form [formGroup]="rssForm">
<ion-input
[(ngModel)]="inputUrl"
formControlName="url"
type="url"
placeholder="Please enter an RSS/Atom Feed URL"
helperText="Enter a valid url"
errorText="Invalid url"
[clearOnEdit]="true"
></ion-input>
</form>
<ion-button ion-button (click)="discoverUrl(inputUrl)" [disabled]="!rssForm.valid">Search for Feed</ion-button>
<ion-button ion-button (click)="addUrl(inputUrl)" [disabled]="!rssForm.valid">Add Feed</ion-button>

<ion-list>
<ion-item-sliding *ngFor="let source of sourcesService.getSources()">
@for (source of sourcesService.getSources(); track source.url) {
<ion-item-sliding>
<ion-item>
<ion-label>
<strong>{{source.title}}</strong>
<br />
<ion-text>{{source.url}}</ion-text>
<br />
<ion-note color="medium">{{source.description}}</ion-note>
</ion-label>
<ion-icon *ngIf="source.healthy" color="success" slot="end" name="checkmark-circle-outline"></ion-icon>
<ion-icon *ngIf="!source.healthy" color="danger" slot="end" name="close-circle-outline"></ion-icon>
<ion-label>
<strong>{{source.title}}</strong>
<br />
<ion-text>{{source.url}}</ion-text>
<br />
<ion-note color="medium">{{source.description}}</ion-note>
</ion-label>
@if (source.healthy) {
<ion-icon color="success" slot="end" name="checkmark-circle-outline"></ion-icon>
}
@else {
<ion-icon color="danger" slot="end" name="close-circle-outline"></ion-icon>
}
</ion-item>

<ion-item-options side="end">
<ion-item-option color="secondary">
<ion-icon slot="icon-only" name="create" (click)="editUrl(source)"></ion-icon>
Expand All @@ -59,12 +63,15 @@
<ion-icon slot="icon-only" name="trash" (click)="sourcesService.removeSource(source.url)"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-sliding>
}
</ion-list>

<!-- // Onboarding -->
<div *ngIf="sourcesService.getSources().length === 0" class="ion-text-center" >
@if (sourcesService.getSources().length === 0) {
<div class="ion-text-center" >
It doesn't look like you have any sources yet, would you like to <a (click)="openSuggestions()">add some?</a>
</div>
</div>
}

</ion-content>
3 changes: 1 addition & 2 deletions src/app/sources/sources.page.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import {
Expand Down Expand Up @@ -31,7 +30,7 @@ const URL_REGEX = /^[A-Za-z][A-Za-z\d.+-]*:\/*(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?
templateUrl: 'sources.page.html',
styleUrls: ['sources.page.scss'],
standalone: true,
imports: [ CommonModule, FormsModule, IonHeader, IonNote, IonToolbar, IonTitle, IonContent, IonList,
imports: [FormsModule, IonHeader, IonNote, IonToolbar, IonTitle, IonContent, IonList,
IonInput, IonItem, IonIcon, IonButton, IonButtons, IonText, IonItemSliding, IonLabel, IonItemOption,
IonItemOptions, ReactiveFormsModule]
})
Expand Down
8 changes: 5 additions & 3 deletions src/app/suggested/suggested.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<ion-content class="ion-padding">
<h1>Suggested Feeds</h1>
<ion-list>
<ion-item *ngFor="let feed of suggestedFeeds">
<ion-checkbox [(ngModel)]="feed.selected"> {{ feed.title }} </ion-checkbox>
</ion-item>
@for (feed of suggestedFeeds; track feed.xmlUrl) {
<ion-item>
<ion-checkbox [(ngModel)]="feed.selected"> {{ feed.title }} </ion-checkbox>
</ion-item>
}
</ion-list>
<ion-button ion-button (click)="addFeeds()">Import Feeds</ion-button>
</ion-content>
3 changes: 1 addition & 2 deletions src/app/suggested/suggested.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { suggestFeeds } from './suggested-feeds';
import { IonButton, IonCheckbox, IonContent, IonItem, IonList } from '@ionic/angular/standalone';
Expand All @@ -10,7 +9,7 @@ import { SourcesService } from '../services/sources.service';
templateUrl: './suggested.component.html',
styleUrls: ['./suggested.component.scss'],
standalone: true,
imports: [CommonModule, FormsModule, IonContent, IonList, IonItem, IonCheckbox, IonButton]
imports: [FormsModule, IonContent, IonList, IonItem, IonCheckbox, IonButton]
})
export class SuggestedComponent implements OnInit {

Expand Down

0 comments on commit d2a2b5d

Please sign in to comment.