Convert project to TS and Vite

KSP-RO · Sep 23, 2024 · 1291d65 · 1291d65
1 parent 0f421fe
commit 1291d65
Show file tree

Hide file tree

Showing 119 changed files with 6,926 additions and 2,350 deletions.
diff --git a/.gitignore b/.gitignore
@@ -210,6 +210,7 @@ project.lock.json
 *.feature.xlsx.*
 *.Specs_*.html
 
+RP1AnalyticsWebApp/wwwroot/*
 RP1AnalyticsWebApp/appsettings.Development.json
 RP1AnalyticsWebApp/appsettings.json
 *.pubxml
diff --git a/README.md b/README.md
@@ -2,14 +2,17 @@
 Receives career progress information from the game and shows various useful visualizations for comparing careers and balancing RP-1.
 
 ## Technology stack
-* .NET 5
-* ASP.NET Core 5 (Razor pages + web API)
-* Vue.js
+* .NET 6
+* ASP.NET Core 6 (Razor pages + web API)
+* Vue.js 3
 * MongoDB
+* Microsoft.AspNetCore.OData
 * Application Insights
 * AspNetCore.Identity.Mongo
 * AspNet.Security.OAuth.GitHub
 * Swagger / OpenAPI
+* Vite.AspNetCore
+* Node.js 20
 
 ## Install
 ### Production
@@ -24,7 +27,7 @@ I.e:
 ```
 
 ### Development
-Add appsettings.json to \RP1AnalyticsWebApp\ and hit F5 in VS.
+Add appsettings.json to \RP1AnalyticsWebApp\ and hit F5 in VS. Npm install will be run automatically and vite dev server will start on first request.
 Example settings file:
 ```
 {

diff --git a/RP1AnalyticsWebApp/.eslintrc.cjs b/RP1AnalyticsWebApp/.eslintrc.cjs
@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+    root: true,
+    'extends': [
+        'plugin:vue/vue3-essential',
+        'eslint:recommended',
+        '@vue/eslint-config-typescript',
+        '@vue/eslint-config-prettier/skip-formatting'
+    ],
+    parserOptions: {
+        ecmaVersion: 'latest'
+    }
+}
diff --git a/RP1AnalyticsWebApp/Areas/Admin/Pages/Races.cshtml b/RP1AnalyticsWebApp/Areas/Admin/Pages/Races.cshtml
@@ -4,20 +4,11 @@
     ViewData["Title"] = "Race management";
 }
 
-<div id="app" class="ml-4 box">
-    <h2 class="subtitle">Careers</h2>
-    <race-management></race-management>
-</div>
+<div id="app" class="ml-4 box"></div>
 
+@section Styles {
+    <link rel="stylesheet" vite-href="~/races-main.ts" asp-append-version="true" />
+}
 @section Scripts {
-    <script src="~/js/components/loading-spinner.js" asp-append-version="true"></script>
-    <script src="~/js/components/race-management.js" asp-append-version="true"></script>
-    <script type="text/javascript">
-        (() => {
-            const app = Vue.createApp();
-            app.component('loading-spinner', LoadingSpinner);
-            app.component('race-management', RaceManagement);
-            const vm = app.mount('#app');
-        })();
-    </script>
-}
+    <script type="module" vite-src="~/races-main.ts"></script>
+}
diff --git a/RP1AnalyticsWebApp/Areas/Admin/Pages/_ViewImports.cshtml b/RP1AnalyticsWebApp/Areas/Admin/Pages/_ViewImports.cshtml
@@ -3,3 +3,4 @@
 @using RP1AnalyticsWebApp.Areas.Admin
 @using RP1AnalyticsWebApp.Areas.Admin.Pages
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, Vite.AspNetCore
diff --git a/RP1AnalyticsWebApp/contractData.json → RP1AnalyticsWebApp/Configs/contractData.json b/RP1AnalyticsWebApp/contractData.json → RP1AnalyticsWebApp/Configs/contractData.json
diff --git a/RP1AnalyticsWebApp/leaders.json → RP1AnalyticsWebApp/Configs/leaders.json b/RP1AnalyticsWebApp/leaders.json → RP1AnalyticsWebApp/Configs/leaders.json
diff --git a/RP1AnalyticsWebApp/milestoneContracts.json → ...icsWebApp/Configs/milestoneContracts.json b/RP1AnalyticsWebApp/milestoneContracts.json → ...icsWebApp/Configs/milestoneContracts.json
diff --git a/RP1AnalyticsWebApp/programs.json → RP1AnalyticsWebApp/Configs/programs.json b/RP1AnalyticsWebApp/programs.json → RP1AnalyticsWebApp/Configs/programs.json
diff --git a/RP1AnalyticsWebApp/repeatableContracts.json → ...csWebApp/Configs/repeatableContracts.json b/RP1AnalyticsWebApp/repeatableContracts.json → ...csWebApp/Configs/repeatableContracts.json
diff --git a/RP1AnalyticsWebApp/techTree.json → RP1AnalyticsWebApp/Configs/techTree.json b/RP1AnalyticsWebApp/techTree.json → RP1AnalyticsWebApp/Configs/techTree.json
diff --git a/RP1AnalyticsWebApp/Models/Settings/ContractSettings.cs b/RP1AnalyticsWebApp/Models/Settings/ContractSettings.cs
@@ -13,17 +13,17 @@ public class ContractSettings : IContractSettings
 
         public ContractSettings()
         {
-            const string _fileName = @"contractData.json";
+            const string _fileName = @"Configs/contractData.json";
             string jsonString = File.ReadAllText(_fileName);
             var arr = JsonSerializer.Deserialize<ContractDefinitionItem[]>(jsonString);
             ContractNameDict = arr.ToDictionary(e => e.Name, e => e.Title);
 
-            const string _milestoneFileName = @"milestoneContracts.json";
+            const string _milestoneFileName = @"Configs/milestoneContracts.json";
             jsonString = File.ReadAllText(_milestoneFileName);
             var arr2 = JsonSerializer.Deserialize<string[]>(jsonString);
             MilestoneContractNames = new HashSet<string>(arr2);
 
-            const string _repeatableFileName = @"repeatableContracts.json";
+            const string _repeatableFileName = @"Configs/repeatableContracts.json";
             jsonString = File.ReadAllText(_repeatableFileName);
             var arr3 = JsonSerializer.Deserialize<string[]>(jsonString);
             RepeatableContractNames = new HashSet<string>(arr3);

diff --git a/RP1AnalyticsWebApp/Models/Settings/LeaderSettings.cs b/RP1AnalyticsWebApp/Models/Settings/LeaderSettings.cs
@@ -11,7 +11,7 @@ public class LeaderSettings : ILeaderSettings
 
         public LeaderSettings()
         {
-            const string _fileName = @"leaders.json";
+            const string _fileName = @"Configs/leaders.json";
             string jsonString = File.ReadAllText(_fileName);
             var arr = JsonSerializer.Deserialize<LeaderDefinitionItem[]>(jsonString);
             LeaderDict = arr.ToDictionary(e => e.Name);

diff --git a/RP1AnalyticsWebApp/Models/Settings/ProgramSettings.cs b/RP1AnalyticsWebApp/Models/Settings/ProgramSettings.cs
@@ -11,7 +11,7 @@ public class ProgramSettings : IProgramSettings
 
         public ProgramSettings()
         {
-            const string _fileName = @"programs.json";
+            const string _fileName = @"Configs/programs.json";
             string jsonString = File.ReadAllText(_fileName);
             var arr = JsonSerializer.Deserialize<ProgramDefinitionItem[]>(jsonString);
             ProgramNameDict = arr.ToDictionary(e => e.Name, e => e.Title);

diff --git a/RP1AnalyticsWebApp/Models/Settings/TechTreeSettings.cs b/RP1AnalyticsWebApp/Models/Settings/TechTreeSettings.cs
@@ -11,7 +11,7 @@ public class TechTreeSettings : ITechTreeSettings
 
         public TechTreeSettings()
         {
-            const string _fileName = @"techTree.json";
+            const string _fileName = @"Configs/techTree.json";
             string jsonString = File.ReadAllText(_fileName);
             var arr = JsonSerializer.Deserialize<TechTreeNode[]>(jsonString);
             NodeTitleDict = arr.ToDictionary(e => e.ID, e => e.Title);

diff --git a/RP1AnalyticsWebApp/Pages/Index.cshtml b/RP1AnalyticsWebApp/Pages/Index.cshtml
@@ -5,65 +5,11 @@
     ViewData["Title"] = "RP-1 Analytics";
 }
 
-<div id="appWrapper">
-    <div class="box columns is-centered">
-        <div class="field">
-            <career-select :selected-career="careerId" :filters="filters" v-on:career-changed="handleCareerChange"></career-select>
-        </div>
-    </div>
-
-    <div class="pb-5">
-        <meta-information :title="careerTitle" :meta="careerLogMeta" :is-loading="isLoadingCareerMeta"></meta-information>
-    </div>
-
-    <div id="selection-tab" class="selection-tab">
-        <selection-tab :active="activeTab" v-on:change-active="handleChangeActive"></selection-tab>
-    </div>
-    <div id="milestones" class="contracts-app">
-        <milestone-contracts :active-tab="activeTab" :career-id="careerId"></milestone-contracts>
-    </div>
-
-    <div id="repeatables" class="contracts-app">
-        <repeatable-contracts :active-tab="activeTab" :career-id="careerId"></repeatable-contracts>
-    </div>
-
-    <div id="programs" class="contracts-app">
-        <programs :active-tab="activeTab" :career-id="careerId"></programs>
-    </div>
-
-    <div id="tech" class="contracts-app">
-        <tech-unlocks :active-tab="activeTab" :career-id="careerId"></tech-unlocks>
-    </div>
-
-    <div id="launches" class="contracts-app">
-        <launches :active-tab="activeTab" :career-id="careerId" :can-edit="canEdit"></launches>
-    </div>
-
-    <div id="facilities" class="contracts-app">
-        <facilities :active-tab="activeTab" :career-id="careerId"></facilities>
-    </div>
-
-    <div id="leaders" class="contracts-app">
-        <leaders :active-tab="activeTab" :career-id="careerId"></leaders>
-    </div>
-</div>
-
-
-<div id="chart"></div>
+<div id="appWrapper"></div>
 
+@section Styles {
+    <link rel="stylesheet" vite-href="~/careerlog-main.ts" asp-append-version="true" />
+}
 @section Scripts {
-    <script src="~/js/components/career-select.js" asp-append-version="true"></script>
-    <script src="~/js/components/data-tab-mixin.js" asp-append-version="true"></script>
-    <script src="~/js/components/meta-information.js" asp-append-version="true"></script>
-    <script src="~/js/components/selection-tab.js" asp-append-version="true"></script>
-    <script src="~/js/components/milestone-contracts.js" asp-append-version="true"></script>
-    <script src="~/js/components/repeatable-contracts.js" asp-append-version="true"></script>
-    <script src="~/js/components/tech-unlocks.js" asp-append-version="true"></script>
-    <script src="~/js/components/launches.js" asp-append-version="true"></script>
-    <script src="~/js/components/facilities.js" asp-append-version="true"></script>
-    <script src="~/js/components/programs.js" asp-append-version="true"></script>
-    <script src="~/js/components/leaders.js" asp-append-version="true"></script>
-    <script src="~/js/components/loading-spinner.js" asp-append-version="true"></script>
-    <script src="~/js/careerLog.js" asp-append-version="true"></script>
-
-}
+    <script type="module" vite-src="~/careerlog-main.ts"></script>
+}
diff --git a/RP1AnalyticsWebApp/Pages/Records.cshtml b/RP1AnalyticsWebApp/Pages/Records.cshtml
@@ -4,26 +4,11 @@
     ViewData["Title"] = "Records";
 }
 
-<div id="app" class="container mt-4 mb-4">
-    <h2 class="subtitle">Program Records</h2>
-    <div id="selection-tab" class="selection-tab mb-1">
-        <program-record-type-select :active="programsMode" v-on:change-active="handleChangeActive"></program-record-type-select>
-    </div>
-    <program-records-table :mode="programsMode" :filters="filters" v-on:program-clicked="showProgramLeaderboard"></program-records-table>
-    <program-leaderboard-modal ref="programModal" :program-name="programName" :mode="programsMode" :filters="filters"></program-leaderboard-modal>
-
-    <h2 class="subtitle">Contract Records</h2>
-    <contract-records-table :filters="filters" v-on:contract-clicked="showContractLeaderboard"></contract-records-table>
-    <contract-leaderboard-modal ref="contractModal" :contract-name="contractName" :filters="filters"></contract-leaderboard-modal>
-</div>
+<div id="app" class="container mt-4 mb-4"></div>
 
+@section Styles {
+    <link rel="stylesheet" vite-href="~/records-main.ts" asp-append-version="true" />
+}
 @section Scripts {
-    <script src="~/js/components/career-dates.js" asp-append-version="true"></script>
-    <script src="~/js/components/program-leaderboard-modal.js" asp-append-version="true"></script>
-    <script src="~/js/components/contract-leaderboard-modal.js" asp-append-version="true"></script>
-    <script src="~/js/components/loading-spinner.js" asp-append-version="true"></script>
-    <script src="~/js/components/program-record-type-select.js" asp-append-version="true"></script>
-    <script src="~/js/components/program-records-table.js" asp-append-version="true"></script>
-    <script src="~/js/components/contract-records-table.js" asp-append-version="true"></script>
-    <script src="~/js/records.js" asp-append-version="true"></script>
-}
+    <script type="module" vite-src="~/records-main.ts"></script>
+}
diff --git a/RP1AnalyticsWebApp/Pages/Shared/_Layout.cshtml b/RP1AnalyticsWebApp/Pages/Shared/_Layout.cshtml
@@ -1,24 +1,23 @@
-@using RP1AnalyticsWebApp.Utilities
-@inject SignInManager<Models.WebAppUser> SignInManager
+@inject SignInManager<Models.WebAppUser> SignInManager
 @inject UserManager<Models.WebAppUser> UserManager
+@inject IViteManifest Manifest
 
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"]</title>
-    <script src="https://cdn.jsdelivr.net/npm/moment"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/2.3.2/moment-duration-format.min.js" integrity="sha512-ej3mVbjyGQoZGS3JkES4ewdpjD8UBxHRGW+MN5j7lg3aGQ0k170sFCj5QJVCFghZRCio7DEmyi+8/HAwmwWWiA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://cdn.plot.ly/plotly-2.2.1.min.js"></script>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
+
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
-    <link rel="stylesheet" href="~/css/styles.css" asp-append-version="true" />
+    <link rel="stylesheet" vite-href="~/css/styles.scss" asp-append-version="true" />
+    <link rel="stylesheet" vite-href="~/navbar-main.ts" asp-append-version="true" />
+
+    @await RenderSectionAsync("Styles", required: false)
 
     <link rel="apple-touch-icon" sizes="57x57" href="/images/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="/images/apple-icon-60x60.png">
@@ -43,7 +42,7 @@
 <nav class="navbar is-link" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
         <a class="navbar-item" href="https://github.com/KSP-RO">
-            <img alt="rp-1 logo" src="https://github.com/KSP-RO/RP-0/raw/master/Source/RP-1%20Logo.png?v=4&s=50" width="28" height="28">
+            <img class="logo" alt="rp-1 logo" src="/images/logo-72x72.png" width="36" height="36">
         </a>
         <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">
             <span aria-hidden="true"></span>
@@ -69,24 +68,21 @@
                 <i class="fa fa-filter" aria-hidden="true"></i>
             </a>
         </div>
-
-        <career-filters-modal v-model:is-visible="modalVisible" v-model:filters="filters" v-on:apply-filters="applyFilters"></career-filters-modal>
-
         <div class="navbar-end">
             <div class="navbar-item">
                 <div class="buttons">
                     <partial name="_LoginPartial"/>
                 </div>
             </div>
         </div>
+
+        <career-filters-modal v-model:is-visible="modalVisible" v-model:filters="filters" v-on:apply-filters="applyFilters" />
     </div>
 </nav>
 
 <div class="container">
     @RenderBody()
-    <script src="~/js/navbar.js" asp-append-version="true"></script>
-    <script src="~/js/components/career-filters-modal.js" asp-append-version="true"></script>
-    <script src="~/js/components/career-filters.js" asp-append-version="true"></script>
+
     @if (SignInManager.IsSignedIn(User))
     {
         <script type="text/javascript">
@@ -102,7 +98,10 @@
             const currentUser = null;
         </script>
     }
-    @RenderSection("Scripts", required: false)
+
+    <script type="module" vite-src="~/navbar-main.ts"></script>
+
+    @await RenderSectionAsync("Scripts", required: false)
 </div>
 </body>
 </html>
diff --git a/RP1AnalyticsWebApp/Pages/_ViewImports.cshtml b/RP1AnalyticsWebApp/Pages/_ViewImports.cshtml
@@ -1,4 +1,7 @@
 @using Microsoft.AspNetCore.Identity
 @using RP1AnalyticsWebApp
+@using RP1AnalyticsWebApp.Utilities
+@using Vite.AspNetCore;
 @namespace RP1AnalyticsWebApp.Pages
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, Vite.AspNetCore
diff --git a/RP1AnalyticsWebApp/Properties/launchSettings.json b/RP1AnalyticsWebApp/Properties/launchSettings.json
@@ -9,12 +9,19 @@
   },
   "$schema": "http://json.schemastore.org/launchsettings.json",
   "profiles": {
-    "RP1AnalyticsWebApp": {
+    "RP1AnalyticsWebApp-dev": {
       "commandName": "Project",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
       "applicationUrl": "https://localhost:5001;http://localhost:5000"
+    },
+    "RP1AnalyticsWebApp-prod": {
+      "commandName": "Project",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Production"
+      },
+      "applicationUrl": "https://localhost:5001;http://localhost:5000"
     }
   }
 }