From f6cf8e8d8e9bc61dac266886c873613bb715936d Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 15 Feb 2023 15:53:40 +0100
Subject: Fix stats anchor link

---
 .../about-instance/about-instance.component.html   |   4 +-
 .../about-instance/about-instance.component.ts     |   8 +-
 .../about-instance/about-instance.resolver.ts      |  62 +++++++++----
 .../instance-statistics.component.html             | 101 +++++++++++++++++++++
 .../instance-statistics.component.scss             |  39 ++++++++
 .../instance-statistics.component.ts               |  11 +++
 client/src/app/+about/about.module.ts              |   8 +-
 client/src/app/shared/shared-instance/index.ts     |   1 -
 .../instance-statistics.component.html             | 101 ---------------------
 .../instance-statistics.component.scss             |  39 --------
 .../instance-statistics.component.ts               |  24 -----
 .../shared-instance/shared-instance.module.ts      |   8 +-
 12 files changed, 211 insertions(+), 195 deletions(-)
 create mode 100644 client/src/app/+about/about-instance/instance-statistics.component.html
 create mode 100644 client/src/app/+about/about-instance/instance-statistics.component.scss
 create mode 100644 client/src/app/+about/about-instance/instance-statistics.component.ts
 delete mode 100644 client/src/app/shared/shared-instance/instance-statistics.component.html
 delete mode 100644 client/src/app/shared/shared-instance/instance-statistics.component.scss
 delete mode 100644 client/src/app/shared/shared-instance/instance-statistics.component.ts

(limited to 'client/src')

diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index fdd6157e5..f602ec1b5 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -210,6 +210,7 @@
 
   <div class="col" myPluginSelector pluginSelectorId="about-instance-statistics">
     <div class="anchor" id="statistics"></div>
+
     <a
       class="anchor-link"
       routerLink="/about/instance"
@@ -218,7 +219,8 @@
       (click)="onClickCopyLink(anchorLink)">
       <h2 i18n class="middle-title">STATISTICS</h2>
     </a>
-    <my-instance-statistics></my-instance-statistics>
+
+    <my-instance-statistics [serverStats]="serverStats"></my-instance-statistics>
   </div>
 </div>
 
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index e1501d7de..fc5214215 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router'
 import { Notifier, ServerService } from '@app/core'
 import { AboutHTML } from '@app/shared/shared-instance'
 import { copyToClipboard } from '@root-helpers/utils'
-import { HTMLServerConfig } from '@shared/models/server'
+import { HTMLServerConfig, ServerStats } from '@shared/models/server'
 import { ResolverData } from './about-instance.resolver'
 import { ContactAdminModalComponent } from './contact-admin-modal.component'
 
@@ -26,6 +26,8 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
 
   initialized = false
 
+  serverStats: ServerStats
+
   private serverConfig: HTMLServerConfig
 
   private lastScrollHash: string
@@ -50,7 +52,9 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   }
 
   ngOnInit () {
-    const { about, languages, categories, aboutHTML, descriptionElement }: ResolverData = this.route.snapshot.data.instanceData
+    const { about, languages, categories, aboutHTML, descriptionElement, serverStats }: ResolverData = this.route.snapshot.data.instanceData
+
+    this.serverStats = serverStats
 
     this.aboutHTML = aboutHTML
     this.descriptionElement = descriptionElement
diff --git a/client/src/app/+about/about-instance/about-instance.resolver.ts b/client/src/app/+about/about-instance/about-instance.resolver.ts
index 8818fc582..94388e71d 100644
--- a/client/src/app/+about/about-instance/about-instance.resolver.ts
+++ b/client/src/app/+about/about-instance/about-instance.resolver.ts
@@ -1,12 +1,14 @@
-import { forkJoin } from 'rxjs'
+import { forkJoin, Observable } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { Resolve } from '@angular/router'
+import { ServerService } from '@app/core'
 import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 import { AboutHTML, InstanceService } from '@app/shared/shared-instance'
-import { About } from '@shared/models/server'
+import { About, ServerStats } from '@shared/models/server'
 
 export type ResolverData = {
+  serverStats: ServerStats
   about: About
   languages: string[]
   categories: string[]
@@ -19,25 +21,47 @@ export class AboutInstanceResolver implements Resolve<any> {
 
   constructor (
     private instanceService: InstanceService,
-    private customMarkupService: CustomMarkupService
-
+    private customMarkupService: CustomMarkupService,
+    private serverService: ServerService
   ) {}
 
-  resolve () {
+  resolve (): Observable<ResolverData> {
+    return forkJoin([
+      this.buildInstanceAboutObservable(),
+      this.buildInstanceStatsObservable()
+    ]).pipe(
+      map(([
+        [ about, languages, categories, aboutHTML, { rootElement } ],
+        serverStats
+      ]) => {
+        return {
+          serverStats,
+          about,
+          languages,
+          categories,
+          aboutHTML,
+          descriptionElement: rootElement
+        }
+      })
+    )
+  }
+
+  private buildInstanceAboutObservable () {
     return this.instanceService.getAbout()
-               .pipe(
-                 switchMap(about => {
-                   return forkJoin([
-                     Promise.resolve(about),
-                     this.instanceService.buildTranslatedLanguages(about),
-                     this.instanceService.buildTranslatedCategories(about),
-                     this.instanceService.buildHtml(about),
-                     this.customMarkupService.buildElement(about.instance.description)
-                   ])
-                 }),
-                 map(([ about, languages, categories, aboutHTML, { rootElement } ]) => {
-                   return { about, languages, categories, aboutHTML, descriptionElement: rootElement } as ResolverData
-                 })
-               )
+      .pipe(
+        switchMap(about => {
+          return forkJoin([
+            Promise.resolve(about),
+            this.instanceService.buildTranslatedLanguages(about),
+            this.instanceService.buildTranslatedCategories(about),
+            this.instanceService.buildHtml(about),
+            this.customMarkupService.buildElement(about.instance.description)
+          ])
+        })
+      )
+  }
+
+  private buildInstanceStatsObservable () {
+    return this.serverService.getServerStats()
   }
 }
diff --git a/client/src/app/+about/about-instance/instance-statistics.component.html b/client/src/app/+about/about-instance/instance-statistics.component.html
new file mode 100644
index 000000000..68b209990
--- /dev/null
+++ b/client/src/app/+about/about-instance/instance-statistics.component.html
@@ -0,0 +1,101 @@
+<p i18n *ngIf="null === serverStats">Loading instance statistics...</p>
+
+<section *ngIf="null !== serverStats">
+  <h3 i18n>By users on this instance</h3>
+
+  <div class="row">
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalUsers | number }}</p>
+          <p class="stat-label" i18n>users</p>
+        </div>
+        <my-global-icon iconName="user"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
+          <p class="stat-label" i18n>videos</p>
+        </div>
+        <my-global-icon iconName="film"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
+          <p class="stat-label" i18n>views</p>
+        </div>
+        <my-global-icon iconName="eye-open"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
+          <p class="stat-label" i18n>comments</p>
+        </div>
+        <my-global-icon iconName="message-circle"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
+          <p class="stat-label" i18n>hosted video</p>
+        </div>
+        <my-global-icon iconName="home"></my-global-icon>
+      </div>
+    </div>
+  </div>
+
+  <h3 i18n>In this instance federation</h3>
+
+  <div class="row">
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalVideos | number }}</p>
+          <p class="stat-label" i18n>videos</p>
+        </div>
+        <my-global-icon iconName="film"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
+          <p class="stat-label" i18n>comments</p>
+        </div>
+        <my-global-icon iconName="message-circle"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
+          <p class="stat-label" i18n>followers</p>
+        </div>
+        <my-global-icon iconName="share"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
+          <p class="stat-label" i18n>following</p>
+        </div>
+        <my-global-icon iconName="globe"></my-global-icon>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/client/src/app/+about/about-instance/instance-statistics.component.scss b/client/src/app/+about/about-instance/instance-statistics.component.scss
new file mode 100644
index 000000000..e1d489d28
--- /dev/null
+++ b/client/src/app/+about/about-instance/instance-statistics.component.scss
@@ -0,0 +1,39 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+h3 {
+  font-size: 1.25rem;
+}
+
+.stat {
+  text-align: center;
+  margin-bottom: 1em;
+  overflow: hidden;
+
+  .stat-value {
+    font-size: 2.25em;
+    line-height: 1em;
+    margin: 0;
+  }
+
+  .stat-label {
+    font-size: 1.15em;
+    margin: 0;
+  }
+
+  .card-body {
+    z-index: 2;
+  }
+}
+
+my-global-icon {
+  opacity: 0.12;
+  position: absolute;
+  left: 16px;
+  top: -24px;
+  width: 110px;
+
+  &.icon-bottom {
+    top: 4px;
+  }
+}
diff --git a/client/src/app/+about/about-instance/instance-statistics.component.ts b/client/src/app/+about/about-instance/instance-statistics.component.ts
new file mode 100644
index 000000000..ac6984438
--- /dev/null
+++ b/client/src/app/+about/about-instance/instance-statistics.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { ServerStats } from '@shared/models/server'
+
+@Component({
+  selector: 'my-instance-statistics',
+  templateUrl: './instance-statistics.component.html',
+  styleUrls: [ './instance-statistics.component.scss' ]
+})
+export class InstanceStatisticsComponent {
+  @Input() serverStats: ServerStats
+}
diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts
index 6a3d72290..2cdfdf822 100644
--- a/client/src/app/+about/about.module.ts
+++ b/client/src/app/+about/about.module.ts
@@ -3,6 +3,7 @@ import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.c
 import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
+import { InstanceStatisticsComponent } from '@app/+about/about-instance/instance-statistics.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
 import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
 import { SharedFormModule } from '@app/shared/shared-forms'
@@ -25,10 +26,13 @@ import { AboutComponent } from './about.component'
 
   declarations: [
     AboutComponent,
+
     AboutInstanceComponent,
+    ContactAdminModalComponent,
+    InstanceStatisticsComponent,
+
     AboutPeertubeComponent,
-    AboutFollowsComponent,
-    ContactAdminModalComponent
+    AboutFollowsComponent
   ],
 
   exports: [
diff --git a/client/src/app/shared/shared-instance/index.ts b/client/src/app/shared/shared-instance/index.ts
index d7172f7b6..d8a69afe0 100644
--- a/client/src/app/shared/shared-instance/index.ts
+++ b/client/src/app/shared/shared-instance/index.ts
@@ -2,6 +2,5 @@ export * from './feature-boolean.component'
 export * from './instance-about-accordion.component'
 export * from './instance-features-table.component'
 export * from './instance-follow.service'
-export * from './instance-statistics.component'
 export * from './instance.service'
 export * from './shared-instance.module'
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.html b/client/src/app/shared/shared-instance/instance-statistics.component.html
deleted file mode 100644
index 68b209990..000000000
--- a/client/src/app/shared/shared-instance/instance-statistics.component.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<p i18n *ngIf="null === serverStats">Loading instance statistics...</p>
-
-<section *ngIf="null !== serverStats">
-  <h3 i18n>By users on this instance</h3>
-
-  <div class="row">
-    <div class="col-6 col-lg-4 col-xl-3">
-      <div class="card stat">
-        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalUsers | number }}</p>
-          <p class="stat-label" i18n>users</p>
-        </div>
-        <my-global-icon iconName="user"></my-global-icon>
-      </div>
-    </div>
-
-    <div class="col-6 col-lg-4 col-xl-3">
-      <div class="card stat">
-        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
-          <p class="stat-label" i18n>videos</p>
-        </div>
-        <my-global-icon iconName="film"></my-global-icon>
-      </div>
-    </div>
-
-    <div class="col-6 col-lg-4 col-xl-3">
-      <div class="card stat">
-        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
-          <p class="stat-label" i18n>views</p>
-        </div>
-        <my-global-icon iconName="eye-open"></my-global-icon>
-      </div>
-    </div>
-
-    <div class="col-6 col-lg-4 col-xl-3">
-      <div class="card stat">
-        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
-          <p class="stat-label" i18n>comments</p>
-        </div>
-        <my-global-icon iconName="message-circle"></my-global-icon>
-      </div>
-    </div>
-
-    <div class="col-6 col-lg-4 col-xl-3">
-      <div class="card stat">
-        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
-          <p class="stat-label" i18n>hosted video</p>
-        </div>
-        <my-global-icon iconName="home"></my-global-icon>
-      </div>
-    </div>
-  </div>
-
-  <h3 i18n>In this instance federation</h3>
-
-  <div class="row">
-    <div class="col-6 col-lg-4 col-xl-3">
-      <div class="card stat">
-        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalVideos | number }}</p>
-          <p class="stat-label" i18n>videos</p>
-        </div>
-        <my-global-icon iconName="film"></my-global-icon>
-      </div>
-    </div>
-
-    <div class="col-6 col-lg-4 col-xl-3">
-      <div class="card stat">
-        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
-          <p class="stat-label" i18n>comments</p>
-        </div>
-        <my-global-icon iconName="message-circle"></my-global-icon>
-      </div>
-    </div>
-
-    <div class="col-6 col-lg-4 col-xl-3">
-      <div class="card stat">
-        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
-          <p class="stat-label" i18n>followers</p>
-        </div>
-        <my-global-icon iconName="share"></my-global-icon>
-      </div>
-    </div>
-
-    <div class="col-6 col-lg-4 col-xl-3">
-      <div class="card stat">
-        <div class="card-body">
-          <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
-          <p class="stat-label" i18n>following</p>
-        </div>
-        <my-global-icon iconName="globe"></my-global-icon>
-      </div>
-    </div>
-  </div>
-</section>
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.scss b/client/src/app/shared/shared-instance/instance-statistics.component.scss
deleted file mode 100644
index e1d489d28..000000000
--- a/client/src/app/shared/shared-instance/instance-statistics.component.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-h3 {
-  font-size: 1.25rem;
-}
-
-.stat {
-  text-align: center;
-  margin-bottom: 1em;
-  overflow: hidden;
-
-  .stat-value {
-    font-size: 2.25em;
-    line-height: 1em;
-    margin: 0;
-  }
-
-  .stat-label {
-    font-size: 1.15em;
-    margin: 0;
-  }
-
-  .card-body {
-    z-index: 2;
-  }
-}
-
-my-global-icon {
-  opacity: 0.12;
-  position: absolute;
-  left: 16px;
-  top: -24px;
-  width: 110px;
-
-  &.icon-bottom {
-    top: 4px;
-  }
-}
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.ts b/client/src/app/shared/shared-instance/instance-statistics.component.ts
deleted file mode 100644
index 0618efe69..000000000
--- a/client/src/app/shared/shared-instance/instance-statistics.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-import { ServerStats } from '@shared/models/server'
-import { ServerService } from '@app/core'
-
-@Component({
-  selector: 'my-instance-statistics',
-  templateUrl: './instance-statistics.component.html',
-  styleUrls: [ './instance-statistics.component.scss' ]
-})
-export class InstanceStatisticsComponent implements OnInit {
-  serverStats: ServerStats = null
-
-  constructor (
-    private serverService: ServerService
-  ) {
-  }
-
-  ngOnInit () {
-    this.serverService.getServerStats()
-        .subscribe(res => {
-          this.serverStats = res
-        })
-  }
-}
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts
index dfce88e11..4ce98eafe 100644
--- a/client/src/app/shared/shared-instance/shared-instance.module.ts
+++ b/client/src/app/shared/shared-instance/shared-instance.module.ts
@@ -1,4 +1,3 @@
-
 import { NgModule } from '@angular/core'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { SharedGlobalIconModule } from '../shared-icons'
@@ -7,7 +6,6 @@ import { FeatureBooleanComponent } from './feature-boolean.component'
 import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
 import { InstanceFeaturesTableComponent } from './instance-features-table.component'
 import { InstanceFollowService } from './instance-follow.service'
-import { InstanceStatisticsComponent } from './instance-statistics.component'
 import { InstanceService } from './instance.service'
 
 @NgModule({
@@ -20,15 +18,13 @@ import { InstanceService } from './instance.service'
   declarations: [
     FeatureBooleanComponent,
     InstanceAboutAccordionComponent,
-    InstanceFeaturesTableComponent,
-    InstanceStatisticsComponent
+    InstanceFeaturesTableComponent
   ],
 
   exports: [
     FeatureBooleanComponent,
     InstanceAboutAccordionComponent,
-    InstanceFeaturesTableComponent,
-    InstanceStatisticsComponent
+    InstanceFeaturesTableComponent
   ],
 
   providers: [
-- 
cgit v1.2.3