From f22b139e511a5df730940ba3f181f470acb043f8 Mon Sep 17 00:00:00 2001
From: "nise.moe" <hey@nise.moe>
Date: Sat, 8 Jun 2024 20:08:24 +0200
Subject: [PATCH] Draft of the /api page in frontend.

---
 nise-frontend/src/app/api/api.component.css  |  0
 nise-frontend/src/app/api/api.component.html | 25 ++++++++++++++++++++
 nise-frontend/src/app/api/api.component.ts   | 22 +++++++++++++++++
 nise-frontend/src/app/app-routing.module.ts  |  3 +++
 4 files changed, 50 insertions(+)
 create mode 100644 nise-frontend/src/app/api/api.component.css
 create mode 100644 nise-frontend/src/app/api/api.component.html
 create mode 100644 nise-frontend/src/app/api/api.component.ts

diff --git a/nise-frontend/src/app/api/api.component.css b/nise-frontend/src/app/api/api.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/nise-frontend/src/app/api/api.component.html b/nise-frontend/src/app/api/api.component.html
new file mode 100644
index 0000000..4e5c8f8
--- /dev/null
+++ b/nise-frontend/src/app/api/api.component.html
@@ -0,0 +1,25 @@
+<div class="main term mb-2">
+  <div class="fade-stuff">
+    <h1 class="mb-4"># <span class="board">/api/</span> stuff</h1>
+    <p>
+      if you'd like to retrieve data from our database, you are invited to use the same endpoints meant for the frontend but in a programmatic way. <u>currently there's no rate limits.</u>
+    </p>
+    <p>as of today, you MUST pass the following parameters:</p>
+    <ul>
+      <li>The <code>X-NISE-API</code> header with a value of <code>20240218</code> in every request.</li>
+      <li>The <code>Accept</code> header with a value of <code>application/json</code> (if you want JSON instead of XML)</li>
+    </ul>
+    <h1 class="mt-4">## scores search</h1>
+    <p>score search is based on predicates. a predicate is a list of specifications/conditions to match results. predicates can be combined with operators such as <code>AND</code> and <code>OR</code></p>
+
+    <h1 class="mt-4">## get single score</h1>
+    <p>if you have a <code>replay_id</code>, you can retrieve all the information 'bout that score.</p>
+    <ul>
+      <li><strong>ENDPOINT:</strong> <code>/api/score/&#123;replay_id&#125;</code></li>
+      <li><strong>METHOD:</strong> GET</li>
+    </ul>
+    Example:
+    <code style="font-size: 12px">curl -H "X-NISE-API: 20240218" -H "Accept: application/json" https://nise.moe/api/score/3808640439</code>
+
+  </div>
+</div>
diff --git a/nise-frontend/src/app/api/api.component.ts b/nise-frontend/src/app/api/api.component.ts
new file mode 100644
index 0000000..e467c32
--- /dev/null
+++ b/nise-frontend/src/app/api/api.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import {CalculatePageRangePipe} from "../../corelib/calculate-page-range.pipe";
+import {CuteLoadingComponent} from "../../corelib/components/cute-loading/cute-loading.component";
+import {DatePipe, DecimalPipe, NgForOf, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'app-api',
+  standalone: true,
+    imports: [
+        CalculatePageRangePipe,
+        CuteLoadingComponent,
+        DatePipe,
+        DecimalPipe,
+        NgForOf,
+        NgIf
+    ],
+  templateUrl: './api.component.html',
+  styleUrl: './api.component.css'
+})
+export class ApiComponent {
+
+}
diff --git a/nise-frontend/src/app/app-routing.module.ts b/nise-frontend/src/app/app-routing.module.ts
index 940bc5b..02b9684 100644
--- a/nise-frontend/src/app/app-routing.module.ts
+++ b/nise-frontend/src/app/app-routing.module.ts
@@ -10,6 +10,7 @@ import {SearchComponent} from "./search/search.component";
 import {ContributeComponent} from "./contribute/contribute.component";
 import {BanlistComponent} from "./banlist/banlist.component";
 import {ProfileComponent} from "./profile/profile.component";
+import {ApiComponent} from "./api/api.component";
 
 const routes: Routes = [
   {path: 'sus/:f', component: ViewSuspiciousScoresComponent,  title: '/sus/'},
@@ -29,6 +30,8 @@ const routes: Routes = [
   {path: 'banlist', component: BanlistComponent, title: '/ban/'},
   {path: 'contribute', component: ContributeComponent, title: '/contribute/ <3'},
 
+  {path: 'api', component: ApiComponent, title: '/api/ explanation'},
+
   {path: '**', component: HomeComponent, title: '/nise.moe/'},
 ];