Skip to content

Add sidebar + add stats to the view page #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GiangNPham wants to merge 2 commits into
base: backend
Choose a base branch
from
Open

Add sidebar + add stats to the view page #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
08adbc2
Stats on the view chart page: done
GiangNPham Nov 28, 2023
d502956
add sidebar
GiangNPham Nov 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 26 additions & 2 deletions scorebored/src/routes/yourProfile/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import { db } from "$lib/firebase/firebase";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { collection, deleteDoc, doc, onSnapshot, QuerySnapshot } from "firebase/firestore";
import "@fortawesome/fontawesome-free/css/all.min.css";


$: charts = [];
Expand Down Expand Up @@ -41,11 +42,34 @@

async function deleteChart(chartID: string){
await deleteDoc(doc(db, "scoreboard", chartID));
window.location.href = "/yourProfile";
}
</script>


<NavBar />
<NavBar/>
<aside id="default-sidebar" class="fixed top-20 left-0 z-40 transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
<div class="h-full px-4 py-6 overflow-y-auto">
<ul class="space-y-4 font-medium text-lg">
{#each charts as chart, no}
<li>
<a href="/yourProfile/view/{chart.id}" class="p-2 rounded-xl sidebar-row">
<span >{++no}.&nbsp;&nbsp;{chart.BoardName}</span>
</a>
<span class="grid-cols-2 sidebar-icons">
<a href="/yourProfile/edit/{chart.id}" class="sidebar-each-icon"><i class="fa-solid fa-pen"></i></a>
<button class="sidebar-each-icon" on:click={ deleteChart(chart.id) }><i class="fa-solid fa-trash"></i></button>
</span>



</li>
{/each}


</ul>
</div>
</aside>
<div class="yourProfile-background">
<div class="yourProfile-all">
<h1 class="yourProfile-header-text">Welcome!</h1>
Expand All @@ -69,7 +93,7 @@
<td>
<a href="/yourProfile/edit/{chart.id}"><button class="yourProfile-btn">Edit</button></a>
<a href="/yourProfile/view/{chart.id}"><button class="yourProfile-btn">View</button></a>
<button class="yourProfile-btn" on:click={ deleteChart(chart.id) }>Delete</button>
<button class="yourProfile-btn" >Delete</button>
</td>
</tr>

Expand Down
73 changes: 56 additions & 17 deletions scorebored/src/routes/yourProfile/view/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,22 @@
import NavBar from "../../../Navbar/+page.svelte";
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import Page from '../../../+page.svelte';
import Page from '../../../+page.svelte';

export let data;

$: chartdb = data.chartdb;
$: successcount = 0;
$: isQuantity = data.chartdb.isQuantity;
$: remainingTime = chartdb.timeTarget;
$: remainingNum = chartdb.numTarget;

function calculateRate(){
for (let i = 0; i < data.chartdb.datapoints.length; i++){
successcount += data.chartdb.datapoints[i];
for (let i = 0; i < chartdb.datapoints.length; i++){
successcount += chartdb.datapoints[i];
}

remainingTime = chartdb.timeTarget - chartdb.datapoints.length;
remainingNum = chartdb.numTarget - successcount;
}

function createChart(){
Expand Down Expand Up @@ -92,20 +97,54 @@
<canvas id="real-chart"></canvas>
</div>
<div class="chartPage-stats">
<div class="chartPage-current-rate">
<p class="stats-text">Current rate</p>
<p class="stats-number">{Math.round(successcount/data.chartdb.datapoints.length * 10) / 10}

{#if isQuantity}
<div class="chartPage-first-data">
<p class="stats-number">{Math.round(successcount/chartdb.datapoints.length * 10) / 10}
</p>
<p class="stats-text">Your current rate</p>

</div>
<div class="chartPage-second-data">
<p class="stats-number">{Math.round(remainingNum/remainingTime * 10) / 10}

<p class="stats-text">Required rate</p>
</div>
<div class="chartPage-third-data">
<p class="stats-number">{Math.ceil(successcount/chartdb.numTarget*100)}% </p>
<p class="stats-text">Your current progress</p>
</div>

<div class="chartPage-fourth-data">
<!-- Remaining quantity / current rate -->
<p class="stats-number">{Math.round((remainingNum)/(Math.round(successcount/chartdb.datapoints.length * 10) / 10))} {chartdb.X_axis}s</p>
<p class="stats-text">Needed time to finish</p>

</div>
{:else}
<div class="chartPage-first-data">
<p class="stats-number">{Math.round(successcount/chartdb.datapoints.length * 10) / 10} </p>
<p class="stats-text">Your success rate</p>


</div>
<div class="chartPage-second-data">
<p class="stats-number">{Math.round(remainingNum/remainingTime *100) / 10 * 10}%
<p class="stats-text">Required rate</p>

</div>
<div class="chartPage-third-data">
<p class="stats-number">{Math.ceil(chartdb.numTarget/chartdb.timeTarget*100)}% </p>
<p class="stats-text">Consistency goal</p>

</div>

<div class="chartPage-fourth-data">
<p class="stats-number">{Math.round((successcount + remainingTime)/chartdb.numTarget * 100) / 10 * 10}%</p>
<p class="stats-text">Maximum possible percentage</p>

</p>
</div>
<div class="chartPage-required-rate">
<p class="stats-text">Required rate</p>
<p class="stats-number">{Math.round(data.chartdb.numTarget/data.chartdb.timeTarget * 10) / 10}
</div>
<div class="chartPage-percentage">
<p class="stats-text">Percentages</p>
<p class="stats-number">{Math.ceil(successcount/data.chartdb.numTarget*100)}% </p>
</div>
</div>
{/if}
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions scorebored/src/routes/yourProfile/view/[slug]/chartPage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,19 @@
}

#real-chart {
@apply my-6 w-full;
@apply my-6 ml-4 w-full;
}

#real-chart {
width: 200%;
}

.chartPage-stats {
@apply grid grid-rows-3 text-center ml-16 mt-10;
@apply grid grid-rows-3 text-left ml-10 mb-2;
}

.stats-text {
@apply text-xl font-semibold;
@apply text-sm font-semibold opacity-70;
}

.stats-number {
Expand Down
33 changes: 33 additions & 0 deletions scorebored/src/routes/yourProfile/yourProfile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,3 +68,36 @@ th {
.yourProfile-btn {
background-color: #44896e;
}

/* Sidebar CSS begins */
#default-sidebar {
background-color: #29473d;
border-radius: 0.375rem;
height: 42rem;
width: 19rem;
}

.sidebar-row {
color: #f8f0ca;
}

.sidebar-row:hover {
background-color: #44896e;
}

.sidebar-icons {
float: right;
}

.fa-pen {
@apply pr-2;
}

.sidebar-each-icon {
color: #f8f0ca;
}

.sidebar-each-icon:hover {
font-size: 1.4rem;
transition: 0.3s ease-in-out;
}