git init

client/src/app/app.html

@@ -0,0 +1,137 @@
+<main class="shell">
+  <section class="panel" aria-labelledby="page-title">
+    <div class="heading">
+      <p class="eyebrow">Strava Datenimport</p>
+      <h1 id="page-title">Verbindung zu Strava</h1>
+      <p class="intro">
+        Verbinde deinen Strava Account einmalig, damit die API Aktivitaeten und
+        Streams serverseitig abrufen kann.
+      </p>
+    </div>
+
+    @if (justConnected()) {
+      <div class="notice success" role="status">
+        Strava wurde verbunden. Der Token wurde im Backend gespeichert.
+      </div>
+    }
+
+    @if (connectionCanceled()) {
+      <div class="notice error" role="alert">
+        Strava wurde nicht verbunden. Starte den Verbindungsprozess erneut.
+      </div>
+    }
+
+    @if (error()) {
+      <div class="notice error" role="alert">
+        {{ error() }}
+      </div>
+    }
+
+    @if (syncError()) {
+      <div class="notice error" role="alert">
+        {{ syncError() }}
+      </div>
+    }
+
+    <div class="status-row">
+      <div>
+        <span class="label">Status</span>
+        @if (loading()) {
+          <strong>Pruefe Verbindung...</strong>
+        } @else if (status()?.connected) {
+          <strong class="connected">Verbunden</strong>
+        } @else {
+          <strong class="disconnected">Nicht verbunden</strong>
+        }
+      </div>
+
+      <button
+        type="button"
+        class="icon-button"
+        (click)="loadStatus()"
+        [disabled]="loading()"
+        title="Status aktualisieren"
+      >
+        <span aria-hidden="true">R</span>
+        <span class="sr-only">Status aktualisieren</span>
+      </button>
+    </div>
+
+    @if (status()?.connected && status()?.athlete; as athlete) {
+      <div class="athlete">
+        @if (athlete.profile) {
+          <img [src]="athlete.profile" alt="" />
+        } @else {
+          <div class="avatar" aria-hidden="true">
+            {{ athleteName().slice(0, 1) }}
+          </div>
+        }
+
+        <div>
+          <span class="label">Account</span>
+          <strong>{{ athleteName() }}</strong>
+          <span class="meta">Strava ID {{ athlete.stravaAthleteId }}</span>
+        </div>
+      </div>
+    }
+
+    <div class="sync-panel">
+      <div class="sync-header">
+        <div>
+          <span class="label">Activities Sync</span>
+          <strong>{{ syncStatusLabel() }}</strong>
+        </div>
+
+        <button
+          type="button"
+          class="secondary"
+          (click)="startSync()"
+          [disabled]="!canStartSync()"
+        >
+          @if (syncLoading() || isSyncActive()) {
+            Sync laeuft
+          } @else {
+            Activities synchronisieren
+          }
+        </button>
+      </div>
+
+      @if (syncJob(); as job) {
+        <div class="sync-stats">
+          <div>
+            <span class="label">Activities</span>
+            <strong>{{ job.activityCount }}</strong>
+          </div>
+          <div>
+            <span class="label">Details</span>
+            <strong>{{ job.detailCount }}</strong>
+          </div>
+          <div>
+            <span class="label">Stream Punkte</span>
+            <strong>{{ job.streamPointCount }}</strong>
+          </div>
+        </div>
+
+        @if (job.errorMessage) {
+          <p class="job-error">{{ job.errorMessage }}</p>
+        }
+      } @else {
+        <p class="sync-empty">
+          Noch kein Sync gestartet.
+        </p>
+      }
+    </div>
+
+    <div class="actions">
+      <button type="button" class="primary" (click)="connectStrava()">
+        Mit Strava verbinden
+      </button>
+    </div>
+  </section>
+
+  <app-dashboard
+    [apiBaseUrl]="apiBaseUrl"
+    [connected]="status()?.connected ?? false"
+    [refreshKey]="dashboardRefreshKey()"
+  />
+</main>