Move to new website

CNAME

@@ -0,0 +1 @@
+www.chronomaps.net

projects/chronomaps/src/app/app-routing.module.ts

@@ -2,10 +2,13 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DirectoryPageComponent } from './directory-page/directory-page.component';
 import { ChronomapPageComponent } from './chronomap-page/chronomap-page.component';
+import { AppComponent } from './app.component';
+import { HomepageComponent } from './homepage/homepage.component';
 
 const routes: Routes = [
-  {path: ':slug', component: ChronomapPageComponent},
-  {path: '', component: DirectoryPageComponent},
+  {path: ':dbid/:slug', component: ChronomapPageComponent},
+  {path: ':dbid', component: DirectoryPageComponent},
+  {path: '', component: HomepageComponent},
 ];
 
 @NgModule({

projects/chronomaps/src/app/app.component.ts

@@ -6,7 +6,7 @@ import { DataService } from './data.service';
 import * as relativeTimePlugin from 'dayjs/plugin/relativeTime';
 import * as utcPlugin from 'dayjs/plugin/utc';
 import * as dayjs from 'dayjs';
-import { NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { filter, map } from 'rxjs';
 import { StateService } from './state.service';
@@ -25,7 +25,9 @@ dayjs.extend(utcPlugin);
   styleUrls: ['./app.component.less']
 })
 export class AppComponent {
-  constructor(private data: DataService) {
+  found = true;
+
+  constructor(private route: ActivatedRoute) {
     // Marked.js options
     const renderer = new marked.Renderer();
     const linkRenderer = renderer.link;
@@ -34,7 +36,7 @@ export class AppComponent {
       const html = linkRenderer.call(renderer, href, title, text);
       return localLink ? html : html.replace(/^<a /, `<a target="_blank" rel="noreferrer noopener nofollow" `);
     };
-    marked.use({renderer});    
+    marked.use({renderer});
   }
 
 }

projects/chronomaps/src/app/baserow/baserow-database.ts

@@ -6,7 +6,7 @@ export class BaserowDatabase {
 
     tables = new ReplaySubject<BaserowTable[]>(1);
 
-    constructor(private endpoint: string, private token: string, private database: number) {
+    constructor(private endpoint: string, private token: string, protected database: number) {
     }
 
     fetchTables(http: HttpClient) {

projects/chronomaps/src/app/chronomap-page/chronomap-page.component.html

@@ -23,7 +23,7 @@
             </div>
         </div>
         <div class='header' [style.border-color]='chronomap()?.secondaryColor()'>
-            <a [routerLink]='["/"]'>
+            <a [routerLink]='["/", chronomap()?.directoryId]'>
                 <img class='logo layout-mobile' [src]='chronomap()?.logo()'>
                 <img class='logo layout-desktop' [src]='chronomap()?.logo()'>
             </a>

projects/chronomaps/src/app/chronomap-page/chronomap-page.component.ts

@@ -36,6 +36,8 @@ export class ChronomapPageComponent {
     this.route.params.pipe(
       first()
     ).subscribe(params => {
+      const dbId = parseInt(params['dbid']);
+      this.data.fetchData(dbId);
       this.slug = params['slug'];
       this.loadChronomap(this.data.directory.chronomaps(), this.slug);
       this._info = localStorage.getItem(this.storageKey) !== 'opened';

projects/chronomaps/src/app/chronomap/chronomap.component.ts

@@ -131,7 +131,7 @@ export class ChronomapComponent implements OnInit, AfterViewInit, OnDestroy {
       this.baseMap.addControl(new mapboxgl.AttributionControl({compact: true}), 'top-right');
       this.baseMap.on('style.load', () => {
         if (this.chronomap.mapView()) {
-          this.baseMap.jumpTo(MapService.parseMapView(this.chronomap.mapView()));
+          this.baseMap.flyTo(MapService.parseMapView(this.chronomap.mapView()));
         }
         this.updateMarkers(!this.chronomap.mapView());
       });
@@ -397,7 +397,7 @@ export class ChronomapComponent implements OnInit, AfterViewInit, OnDestroy {
       }
       if (updateMap) {
         const bounds = new mapboxgl.LngLatBounds([minLon, minLat], [maxLon, maxLat]);
-        this.baseMap.fitBounds(bounds, {animate: false, padding: 100});
+        this.baseMap.fitBounds(bounds, {animate: false, padding: 50});
       }
     });
   }

projects/chronomaps/src/app/data.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, effect, signal } from '@angular/core';
 
-import { BASEROW_ENDPOINT, BASEROW_ADMIN_DB, BASEROW_ADMIN_TOKEN } from 'CONFIGURATION';
+import { BASEROW_ENDPOINT, BASEROW_ADMIN_TOKEN } from 'CONFIGURATION';
 import { BaserowDatabase } from './baserow/baserow-database';
 import { HttpClient } from '@angular/common/http';
 import { ReplaySubject, forkJoin, map, switchMap, tap } from 'rxjs';
@@ -73,6 +73,7 @@ export class TimelineItem extends ContentItem {
 export class ChronomapDatabase extends BaserowDatabase {
 
   id: string;
+  directoryId: number;
   slug = signal<string>('');
   editor_name = signal<string>('');
   editor_email = signal<string>('');
@@ -110,9 +111,10 @@ export class ChronomapDatabase extends BaserowDatabase {
 
   ready = new ReplaySubject<boolean>(1);
 
-  constructor(chronomap: any, private http: HttpClient) {
+  constructor(directoryId: number, chronomap: any, private http: HttpClient) {
     super(BASEROW_ENDPOINT, chronomap.Database_Token, chronomap.Database_ID);
     this.id = chronomap.id;
+    this.directoryId = directoryId;
     this.title.set(chronomap.Title);
     this.slug.set(chronomap.URL_Slug);
     this.editor_name.set(chronomap.Editor_Name);
@@ -306,8 +308,8 @@ export class DirectoryDatabase extends BaserowDatabase {
   zoomUntil = signal<number>(2100);
   url = signal<string>('');
 
-  constructor(private http: HttpClient) {
-    super(BASEROW_ENDPOINT, BASEROW_ADMIN_TOKEN, BASEROW_ADMIN_DB);
+  constructor(dbId: number, private http: HttpClient) {
+    super(BASEROW_ENDPOINT, BASEROW_ADMIN_TOKEN, dbId);
   }
 
   fetchMaps() {
@@ -332,7 +334,7 @@ export class DirectoryDatabase extends BaserowDatabase {
     });
     this.getTable('Chronomaps').subscribe((chronomapsTable) => {
       this.chronomaps.set(chronomapsTable?.rows.filter(row => row.Status?.value === 'Published').map((chronomap: any) => {
-        const map = new ChronomapDatabase(chronomap, this.http);        
+        const map = new ChronomapDatabase(this.database, chronomap, this.http);        
         return map;
       }) || []);
       forkJoin([...this.chronomaps().map(map => map.fetch())]).subscribe((maps) => {
@@ -351,16 +353,18 @@ export class DirectoryDatabase extends BaserowDatabase {
 export class DataService {
 
   directory: DirectoryDatabase;
+  currentDbId: number = 0;
 
   constructor(private http: HttpClient) {
-    this.fetchData();
-    effect(() => {
-      console.log('data!', this.directory.title());
-    });
   }
 
-  fetchData() {
-    this.directory = new DirectoryDatabase(this.http);
+  fetchData(dbId: number) {
+    if (this.currentDbId === dbId) {
+      return;
+    }
+    console.log('fetching data for', dbId);
+    this.currentDbId = dbId;
+    this.directory = new DirectoryDatabase(dbId, this.http);
     this.directory.fetchMaps();
   }
 }

projects/chronomaps/src/app/directory-page/directory-item/directory-item.component.ts

@@ -81,6 +81,6 @@ export class DirectoryItemComponent implements AfterViewInit {
   }
 
   navigate() {
-    this.router.navigate(['/', this.chronomap.slug()]);
+    this.router.navigate(['/', this.chronomap.directoryId, this.chronomap.slug()]);
   }
 }

projects/chronomaps/src/app/directory-page/directory-page.component.ts

@@ -4,6 +4,7 @@ import { marked } from 'marked';
 import { LayoutService } from '../layout.service';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { animationFrameScheduler, debounceTime, filter, first, fromEvent, merge, tap, throttleTime, timer } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
 
 @UntilDestroy()
 @Component({
@@ -27,7 +28,11 @@ export class DirectoryPageComponent implements AfterViewInit {
   @ViewChild('title') title: ElementRef<HTMLDivElement>;
   startY: number;
 
-  constructor(public data: DataService, public layout: LayoutService) {
+  constructor(public data: DataService, public layout: LayoutService, private route: ActivatedRoute) {
+    route.params.subscribe((params) => {
+      const dbId = parseInt(params['dbid']);
+      this.data.fetchData(dbId);
+    });
     effect(() => {
       let minDate: Date|null = null;
       let maxDate: Date|null = null;

projects/chronomaps/src/app/homepage/homepage.component.html

@@ -0,0 +1,3 @@
+@if (!found) {
+    <img src='assets/img/404.png'/>
+}

projects/chronomaps/src/app/homepage/homepage.component.less

@@ -0,0 +1,12 @@
+:host {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    img {
+        max-width: 80%;
+        height: 50%;
+    }
+}

projects/chronomaps/src/app/homepage/homepage.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-homepage',
+  standalone: true,
+  imports: [],
+  templateUrl: './homepage.component.html',
+  styleUrl: './homepage.component.less'
+})
+export class HomepageComponent {
+
+  found = true;
+
+  constructor(private route: ActivatedRoute) {
+    route.params.subscribe((params) => {
+      console.log('params', params);
+      try {
+        const dbId = parseInt(params['dbid']);
+        this.found = dbId > 0;
+      } catch (e) {
+        this.found = false;
+      }
+    });
+  }
+}