jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

add beginning of visualization for statistics, unmodified from blog code

Browse Source
This commit is contained in:
Trent Larson
2023-05-16 06:22:19 -06:00
parent fb7d51ac4c
commit a9844e6e78
17 changed files with 461 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/views/StatisticsView.vue Normal file
View File

@@ -0,0 +1,83 @@
<template>
<!-- QUICK NAV -->
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
<ul class="flex text-2xl p-2 gap-2">
<!-- Home Feed -->
<li class="basis-1/5 rounded-md text-slate-500">
<router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
<fa icon="house-chimney" class="fa-fw"></fa>
</router-link>
</li>
<!-- Search -->
<li class="basis-1/5 rounded-md text-slate-500">
<router-link
:to="{ name: 'discover' }"
class="block text-center py-3 px-1"
>
<fa icon="magnifying-glass" class="fa-fw"></fa>
</router-link>
</li>
<!-- Projects -->
<li class="basis-1/5 rounded-md text-slate-500">
<router-link
:to="{ name: 'projects' }"
class="block text-center py-3 px-1"
>
<fa icon="folder-open" class="fa-fw"></fa>
</router-link>
</li>
<!-- Contacts -->
<li class="basis-1/5 rounded-md text-slate-500">
<router-link
:to="{ name: 'contacts' }"
class="block text-center py-3 px-1"
>
<fa icon="users" class="fa-fw"></fa>
</router-link>
</li>
<!-- Profile -->
<li class="basis-1/5 rounded-md bg-slate-400 text-white">
<router-link
:to="{ name: 'account' }"
class="block text-center py-3 px-1"
>
<fa icon="circle-user" class="fa-fw"></fa>
</router-link>
</li>
</ul>
</nav>
<!-- CONTENT -->
<section id="Content" class="p-6 pb-24">
<!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
Your Statistics
</h1>
<div id="scene-container"></div>
<canvas ref="worldCanvas"></canvas>
</section>
</template>
<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { World } from "@/components/World/World.js";
@Component
export default class StatisticsView extends Vue {
mounted() {
const container = document.querySelector("#scene-container");
const world = new World(container);
world.start();
}
}
</script>
<style>
#scene-container {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>