Skip to content

Commit

Permalink
Merge pull request #38 from codeplaysoftware/add-update-digest
Browse files Browse the repository at this point in the history
Add What's New/Digest Functionality & Storage Updates
  • Loading branch information
scottstraughan authored Sep 27, 2024
2 parents 04bdeef + ba9c45f commit 84de683
Show file tree
Hide file tree
Showing 43 changed files with 1,759 additions and 250 deletions.
2 changes: 2 additions & 0 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@
</div>
</nav>
<main>
<st-alerts></st-alerts>
<router-outlet></router-outlet>
<st-cookie-acceptance></st-cookie-acceptance>
</main>
Expand Down Expand Up @@ -173,6 +174,7 @@ <h1>Network</h1>
<div>
<h1>Useful Links</h1>
<ul>
<li><a routerLink="/changed">What's Changed?</a></li>
<li><a routerLink="/cookies">Cookie Policy</a></li>
<li><a routerLink="/privacy">Privacy Policy</a></li>
<li><a routerLink="/settings">Settings</a></li>
Expand Down
1 change: 1 addition & 0 deletions src/app/app.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ nav {
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, .1);
padding: 0 2rem;
position: relative;
z-index: 999;

input {
display: none;
Expand Down
37 changes: 22 additions & 15 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,12 @@ import { SiteWideSearchComponent } from './shared/components/site-wide-search/si
import { environment } from '../environments/environment';
import { PopupService } from './shared/components/popup/popup.service';
import { SearchComponent } from './shared/components/search/search.component';
import { StateService } from './shared/services/state.service';
import { map, Subscription } from 'rxjs';
import { CookieAcceptanceComponent } from './pages/cookies/shared/cookie-acceptance-popup/cookie-acceptance.component';
import { toSignal } from '@angular/core/rxjs-interop';
import { PlatformService } from './shared/services/platform.service';
import { SafeStorageService } from './shared/services/safe-storage.service';
import { AlertsComponent } from './shared/components/site-wide-alert/alerts.component';

@Component({
selector: 'app-root',
Expand All @@ -50,7 +51,8 @@ import { PlatformService } from './shared/services/platform.service';
NgOptimizedImage,
SearchComponent,
CookieAcceptanceComponent,
NgClass
NgClass,
AlertsComponent
],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
Expand Down Expand Up @@ -84,24 +86,29 @@ export class AppComponent implements OnDestroy {
protected enableDarkModeSwitch: WritableSignal<boolean> = signal(false);

/**
* State service subscription.
* Subscription used for storage changes.
* @protected
*/
protected state$: Subscription | undefined;
protected storageSubscription: Subscription | undefined;

/**
* Constructor.
* @param document
* @param renderer
* @param popupService
* @param safeStorageService
* @param platformService
*/
constructor(
@Inject(DOCUMENT) protected document: Document,
protected renderer: Renderer2,
protected popupService: PopupService,
protected stateService: StateService,
protected safeStorageService: SafeStorageService,
protected platformService: PlatformService,
) {
if (this.platformService.isClient()) {
this.darkModeEnabled = toSignal(this.stateService.getObservable().pipe(
map((state) => state.darkModeEnabled),
this.darkModeEnabled = toSignal(this.safeStorageService.observe().pipe(
map((state) => state['st-dark-mode-enabled']),
), { initialValue: false });

effect(() => {
Expand All @@ -112,10 +119,10 @@ export class AppComponent implements OnDestroy {
}
});

this.state$ = this.stateService.getObservable().subscribe((state) => {
this.storageSubscription = this.safeStorageService.observe().subscribe((state) => {
const fathomTrackers = this.document.documentElement.getElementsByClassName('fathom-tracking-script');

if (state.enableTracking && fathomTrackers.length === 0) {
if (state['st-enable-tracking'] && fathomTrackers.length === 0) {
// Add fathom Analytics
const fathom = document.createElement('script');
fathom.setAttribute('class', 'fathom-tracking-script');
Expand All @@ -126,16 +133,16 @@ export class AppComponent implements OnDestroy {

// Add to dom
this.document.head.appendChild(fathom);
} else if (!state.enableTracking && fathomTrackers.length > 0) {
} else if (!state['st-enable-tracking'] && fathomTrackers.length > 0) {
fathomTrackers[0].remove();
}

this.enableDarkModeSwitch.set(state.cookiesAccepted ? state.cookiesAccepted : false);
this.enableDarkModeSwitch.set(this.safeStorageService.allowed());
});
}

this.darkModeEnabled = toSignal(this.stateService.getObservable().pipe(
map((state) => state.darkModeEnabled)
this.darkModeEnabled = toSignal(this.safeStorageService.observe().pipe(
map((state) => state['st-dark-mode-enabled'])
), { initialValue: false });

effect(() => {
Expand All @@ -151,7 +158,7 @@ export class AppComponent implements OnDestroy {
* @inheritDoc
*/
ngOnDestroy() {
this.state$?.unsubscribe();
this.storageSubscription?.unsubscribe();
}

/**
Expand All @@ -163,7 +170,7 @@ export class AppComponent implements OnDestroy {
return ;
}

this.stateService.setDarkMode(!this.darkModeEnabled());
this.safeStorageService.save('st-dark-mode-enabled', !this.darkModeEnabled());
}

/**
Expand Down
2 changes: 2 additions & 0 deletions src/app/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { TitleCasePipe } from '@angular/common';
import { httpCacheInterceptor } from './http-cache.interceptor';
import { appLegacyRoutes } from './app.legacy-routes';
import { provideMarkdown } from 'ngx-markdown';
import { provideAnimations } from '@angular/platform-browser/animations';

const scrollConfig: InMemoryScrollingOptions = {
scrollPositionRestoration: 'top',
Expand Down Expand Up @@ -88,5 +89,6 @@ export const appConfig: ApplicationConfig = {
),
TitleCasePipe,
provideMarkdown(),
provideAnimations()
]
};
5 changes: 5 additions & 0 deletions src/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { CookiesComponent } from './pages/cookies/cookies.component';
import { PrivacyComponent } from './pages/privacy/privacy.component';
import { SettingsComponent } from './pages/settings/settings.component';
import { Error404Component } from './pages/404/error-404.component';
import { ChangedComponent } from './pages/changed/changed.component';

export const routes: Routes = [
{
Expand All @@ -47,6 +48,10 @@ export const routes: Routes = [
path: 'playground',
component: PlaygroundComponent
},
{
path: 'changed',
component: ChangedComponent
},
{
path: 'getting-started',
component: GettingStartedComponent
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<header>
<div>
<span class="material-symbols-outlined popup-icon">event</span>
<h1>Set Start Date</h1>

@if (noLastVisit()) {
<h2>You've not been here before.</h2>
}

<h2>Please set a start date that we can use to determine what has changed.</h2>
</div>
</header>

<main>
<article>
<div>
<input type="date"
value="{{ startDate() | date: 'yyyy-MM-dd' }}"
(change)="onDateChanged($event)" />
</div>
@if (errorMessage(); as message) {
<div class="error" [innerHTML]="message"></div>
}
</article>
<footer>
<a class="button centered cancel" (click)="onClose()">
<span class="material-symbols-outlined">close</span> Close
</a>
</footer>
</main>
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
:host {
@media screen and (min-width: 800px) {
width: 100vw !important;
}

header {
h2 {
font-weight: normal;
opacity: .7;
}

div {
text-align: center;
}
}

input {
display: block;
width: 100%;
padding: 1.5rem;
border: var(--border-default);
border-radius: var(--border-radius);
background-color: transparent;
color: var(--text-color);
font-family: inherit;
font-size: 1.2rem;
}

.error {
background-color: #ffd2d2;
padding: 2rem;
text-align: center;
color: red;
margin-top: 1rem;
border-radius: var(--border-radius);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
/*---------------------------------------------------------------------------------------------
*
* Copyright (C) Codeplay Software Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*--------------------------------------------------------------------------------------------*/

import { ChangeDetectionStrategy, Component, Inject, signal, Signal, WritableSignal } from '@angular/core';
import { DatePipe, NgOptimizedImage } from '@angular/common';
import { PopupReference } from '../../../shared/components/popup/popup.service';

@Component({
selector: 'st-change-start-date',
standalone: true,
templateUrl: './change-start-date.component.html',
imports: [
NgOptimizedImage,
DatePipe
],
styleUrls: [
'../../../shared/components/popup/layouts/large-top-header.scss',
'./change-start-date.component.scss'
],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChangeStartDateComponent {
protected readonly noLastVisit: Signal<boolean>;
protected readonly errorMessage: WritableSignal<string> = signal('');
protected readonly startDate: Signal<Date>;

/**
* Constructor.
* @param popupReference
*/
constructor(
@Inject('POPUP_DATA') protected popupReference: PopupReference,
) {
if (this.popupReference.data) {
this.noLastVisit = signal(false);
this.startDate = signal(new Date(this.popupReference.data));
} else {
this.noLastVisit = signal(true);

const dateDateTime = new Date();
dateDateTime.setMonth(dateDateTime.getMonth() - 5);
dateDateTime.setDate(1);

// Set a default date, just in case we can't load one successfully
this.startDate = signal(dateDateTime);
}
}

/**
* Called when the date selector changes.
* @param event
*/
onDateChanged(event: any) {
const selectedDate: any = new Date(event.target.value);
const currentDate = new Date();

if (isNaN(selectedDate)) {
this.errorMessage.set('Please ensure that the date is in a correct format.');
return;
}

if (ChangeStartDateComponent.monthDifference(selectedDate, currentDate) > 6) {
this.errorMessage.set('You cannot pick a date that is more than six months from the current date.');
return;
}

if (selectedDate > currentDate) {
this.errorMessage.set('You cannot set a date that is in the future, please choose an earlier date.');
return;
}

this.popupReference.close(selectedDate);
}

/**
* Called when the user clicks on the cancel button.
*/
onClose() {
this.popupReference.close(this.startDate());
}

/**
* Calculate the month difference between two dates.
* @param dateFrom
* @param dateTo
*/
public static monthDifference(dateFrom: Date, dateTo: Date): number {
return dateTo.getMonth() - dateFrom.getMonth() +
(12 * (dateTo.getFullYear() - dateFrom.getFullYear()))
}
}
Loading

0 comments on commit 84de683

Please sign in to comment.