Merge pull request #25 from dotClique/i19/rework-frontend-file-structure

Rework frontend file structure
dotClique · Jan 25, 2022 · 0603732 · 0603732
2 parents 6187d4b + c12d681
commit 0603732
Show file tree

Hide file tree

Showing 24 changed files with 482 additions and 511 deletions.
diff --git a/SpeiderappPWA/Pages/Badges.razor b/SpeiderappPWA/Pages/Badges.razor
diff --git a/SpeiderappPWA/Pages/Badges.razor.cs b/SpeiderappPWA/Pages/Badges.razor.cs
diff --git a/SpeiderappPWA/Pages/Badges/Badges.razor b/SpeiderappPWA/Pages/Badges/Badges.razor
@@ -0,0 +1,53 @@
+@page "/badges" 
+@using SpeiderappPWA.Pages.Badges.Components
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<h1>Badges</h1>
+
+<p>This component demonstrates fetching data from the API.</p>
+
+<span class="search-bar">
+    <button  @onclick="ToggleFilter" class="filter"><i class="fa fa-filter"></i></button>
+    <form class="search-form">
+        <input class="search-input" type="text" placeholder="Search">
+        <button class="search-button" type="submit"><i class="fa fa-search"></i></button>
+    </form>
+    <div class="filter-options @collapsed">
+        <div class="filter-option">
+            @collapsed
+            Option 1
+            <br>
+            <input type="text">
+        </div>
+        <div class="filter-option">
+            Option 2
+            <br>
+            <input type="checkbox">
+        </div>
+        <div class="filter-option">
+            Option 3
+            <br>
+            <input type="checkbox">
+        </div>
+    </div>
+</span>
+
+
+
+<div class="separator"><hr class="inline-line"></div>
+<i class="fa fa-th @gridSelected" @onclick="GridView"></i><i class="fa fa-list @listSelected" @onclick="ListView"></i>
+<br>
+<br>
+@if (badges == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+    <div class="badge-table @list">
+
+        @foreach (var badge in badges)
+        {
+            <Badge name="@badge.Name" id="@badge.Id" description="@badge.Description" list="@list" logo="@BadgeLogo(badge.Image)" complete="@badge.IsComplete"/>
+        }
+    </div>
+}
diff --git a/SpeiderappPWA/Pages/Badges/Badges.razor.cs b/SpeiderappPWA/Pages/Badges/Badges.razor.cs
@@ -0,0 +1,61 @@
+using Microsoft.AspNetCore.Components;
+using System.Net.Http;
+using System.Net.Http.Json;
+using System.Threading.Tasks;
+
+namespace SpeiderappPWA.Pages.Badges
+{
+    public partial class Badges : ComponentBase
+    {
+        [Inject]
+        private HttpClient Http {get; set; }
+        private Models.Badge[] badges;
+
+        protected override async Task OnInitializedAsync()
+        {
+            badges = await Http.GetFromJsonAsync<Models.Badge[]>("sample-data/badges.json");
+        }
+
+        private string BadgeLogo(string img)
+        {
+            if (img != null)
+            {
+                return img;
+            }
+            else
+            {
+                return "https://via.placeholder.com/150";
+            }
+        }
+
+        private string collapsed = "collapsed";
+        private string gridSelected = "selected";
+        private string listSelected = "";
+        private string list = "";
+        private void ToggleFilter()
+        {
+            if (collapsed == "")
+            {
+                collapsed = "collapsed";
+            }
+            else
+            {
+                collapsed = "";
+            }
+        }
+
+        private void ListView()
+        {
+            list = "list";
+            gridSelected = "";
+            listSelected = "selected";
+        }
+
+        private void GridView()
+        {
+            list = "";
+            gridSelected = "selected";
+            listSelected = "";
+        }
+    }
+}