Skip to content

Commit

Permalink
Merge pull request #29 from ferviddigital/develop
Browse files Browse the repository at this point in the history
Mobile UI updates and Vital Chart Summary
  • Loading branch information
roymckenzie authored Oct 23, 2023
2 parents 6bc21d8 + ddd30a1 commit b8d5be3
Show file tree
Hide file tree
Showing 12 changed files with 284 additions and 112 deletions.
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,9 @@
"postcss": "^8.4.29",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
},
"prettier": {
"singleQuote": true,
"printWidth": 100
}
}
70 changes: 42 additions & 28 deletions src/components/Layout.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<script setup>
import { SquaresPlusIcon, Cog8ToothIcon, ListBulletIcon, HeartIcon, UserIcon } from '@heroicons/vue/20/solid';
import {
SquaresPlusIcon,
Cog8ToothIcon,
ListBulletIcon,
HeartIcon,
UserIcon,
} from '@heroicons/vue/20/solid';
import { record } from '../store/record';
import { peers, webrtcConnected } from '../providers/webrtc';
import pluralize from 'pluralize';
Expand All @@ -9,43 +15,47 @@ import { selectedPersonId } from '../store/person';
window.addEventListener('scroll', () => {
scrolled.value = window.scrollY > 0;
});
</script>

<template>
<div v-if="record">
<div class="dash-layout grid grid-rows-[auto_min-content] sm:grid-rows-none sm:grid-flow-col sm:grid-cols-[min-content_auto] sm:min-h-0">
<div
class="dash-layout grid grid-rows-[auto_min-content] sm:grid-rows-none sm:grid-flow-col sm:grid-cols-[min-content_auto] sm:min-h-0"
>
<header
class="main-header fixed sm:sticky grid grid-flow-col grid-cols-[min-content_min-content_auto] sm:grid-cols-none sm:grid-rows-[min-content_auto_min-content] gap-2 sm:gap-4 overflow-scroll sm:overflow-visible sm:min-h-[calc(100vh-2rem)] items-center sm:items-start sm:justify-normal order-last sm:order-none self-end sm:self-start p-4 py-2 sm:py-6 bottom-0 md:bottom-auto mb-4 sm:mb-auto mr-4 sm:mr-0 ml-4 mt-4 sm:top-4 right-0 left-0 rounded-3xl bg-gray-900 text-white z-20">
<h2 class="app-title grid grid-flow-col items-center sm:block self-start font-bold text-xl lg:mb-3 transition-all">
class="main-header fixed sm:sticky grid grid-flow-col grid-cols-[auto_min-content] sm:grid-cols-none sm:grid-rows-[min-content_auto_min-content] gap-2 sm:gap-4 overflow-scroll sm:overflow-visible sm:min-h-[calc(100vh-2rem)] items-center sm:items-start sm:justify-normal order-last sm:order-none self-end sm:self-start p-4 py-2 sm:py-6 bottom-0 md:bottom-auto sm:mb-auto sm:mr-0 sm:ml-4 sm:top-4 right-0 left-0 sm:rounded-3xl bg-gray-900 text-white z-20"
>
<h2
class="app-title hidden sm:grid sm:grid-flow-col items-center self-start font-bold text-xl lg:mb-3 transition-all"
>
<RouterLink
class="grid grid-flow-col items-center sm:justify-start gap-1 sm:gap-4 p-2 sm:p-0 sm:px-3"
class="grid grid-flow-col items-center justify-center lg:justify-start gap-1 sm:gap-4 p-2 sm:p-0 sm:px-3"
:to="{ name: 'Dashboard' }"
aria-label="Dashboard"
>
<SquaresPlusIcon class="h-6 w-6"/> <span class="hidden lg:inline">HealthRecord</span>
<SquaresPlusIcon class="h-6 w-6" /> <span class="hidden lg:inline">HealthRecord</span>
</RouterLink>
</h2>
<nav class="main-nav justify-self-start sm:justify-self-auto">
<ul v-if="selectedPersonId" class="grid gap-2 sm:gap-4 grid-flow-col sm:grid-flow-row">
<nav class="main-nav sm:justify-self-auto">
<ul v-if="selectedPersonId" class="grid gap-4 grid-flow-col sm:grid-flow-row">
<li>
<RouterLink
<RouterLink
:to="{ name: 'Person', params: { personId: selectedPersonId } }"
aria-label="Person"
>
<UserIcon class="h-6 w-6" /> <span>Overview</span>
</RouterLink>
</li>
<li>
<RouterLink
<RouterLink
:to="{ name: 'PersonVitals', params: { personId: selectedPersonId } }"
aria-label="Vitals"
>
<HeartIcon class="h-6 w-6" /> <span>Vitals</span>
</RouterLink>
</li>
<li>
<RouterLink
<RouterLink
:to="{ name: 'PersonLogbook', params: { personId: selectedPersonId } }"
aria-label="Logbook"
>
Expand All @@ -57,28 +67,32 @@ window.addEventListener('scroll', () => {
<nav class="main-nav place-self-end sm:place-self-auto">
<ul>
<li>
<RouterLink
class="group"
:to="{ name: 'Settings' }"
aria-label="Settings"
>
<span>
<span
v-if="record.user.preferences && record.user.preferences.webRTC.enabled && webrtcConnected"
class="h-3 w-3 inline-block bg-orange-300 rounded-full absolute border-2 border-gray-900 group-hover:border-gray-800"
:class="{ '!bg-green-500' : peers > 0 }"
:title="peers > 0 ? pluralize('peer', peers, true) + ' connected' : 'Waiting for peers...'"
></span>
<Cog8ToothIcon class="h-6 w-6" />
</span>
<span class="hidden md:inline">Settings</span>
<RouterLink class="group" :to="{ name: 'Settings' }" aria-label="Settings">
<span>
<span
v-if="
record.user.preferences &&
record.user.preferences.webRTC.enabled &&
webrtcConnected
"
class="h-3 w-3 inline-block bg-orange-300 rounded-full absolute border-2 border-gray-900 group-hover:border-gray-800"
:class="{ '!bg-green-500': peers > 0 }"
:title="
peers > 0
? pluralize('peer', peers, true) + ' connected'
: 'Waiting for peers...'
"
></span>
<Cog8ToothIcon class="h-6 w-6" />
</span>
<span>Settings</span>
</RouterLink>
</li>
</ul>
</nav>
</header>
<main>
<RouterView name="main" class="mb-28 sm:mb-0"/>
<RouterView name="main" class="mb-28 sm:mb-0" />
</main>
</div>
</div>
Expand Down
29 changes: 29 additions & 0 deletions src/components/Measurements/LowHighBadge.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<script setup>
import { ArrowSmallDownIcon, ArrowSmallUpIcon } from '@heroicons/vue/20/solid';
const props = defineProps({
vital: {
/** @type {import('vue').PropType<import('../../typedefs').Vital>} */
type: Object,
required: true,
},
measurement: {
/** @type {import('vue').PropType<import('../../typedefs').Measurement>} */
type: Object,
required: true,
},
});
</script>

<template>
<span
v-if="vital.high && measurement.value >= Number(vital.high)"
class="border border-amber-200 p-1 py-0 pl-0 pr-1.5 rounded-lg text-amber-500 bg-amber-100 text-xs font-normal cursor-default whitespace-nowrap"
><ArrowSmallUpIcon class="inline w-4 h-4 -mt-1" />High</span
>
<span
v-else-if="vital.low && measurement.value <= Number(vital.low)"
class="border border-amber-200 p-1 py-0 pl-0 pr-1.5 rounded-lg text-amber-500 bg-amber-100 text-xs font-normal cursor-default whitespace-nowrap"
><ArrowSmallDownIcon class="inline w-4 h-4 -mt-0.5" />Low</span
>
</template>
45 changes: 45 additions & 0 deletions src/components/Notes/View.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<script setup>
import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
import { computed, ref } from "vue";
import { useRoute } from "vue-router";
import { notes } from "../../store/notes";
const route = useRoute();
const note = computed(() => {
const note = notes.value.find((note) => note.id === noteId.value);
if (!note)
throw Error(`Could not find Note with ID: ${route.params.noteId}.`);
return note;
});
const noteId = ref(String(route.params.noteId));
</script>

<template>
<Dialog :open="true" @close="$router.back()" class="relative z-50">
<div class="fixed inset-0 bg-black/30 backdrop-blur-sm" />
<div
class="fixed flex w-screen h-screen top-0 items-start justify-center overflow-y-auto"
>
<DialogPanel
class="bg-white w-full sm:max-w-xs rounded-2xl shadow-lg m-2 sm:mt-10"
>
<DialogTitle as="h3" class="text-lg font-semibold border-b p-6 py-3"
>Note</DialogTitle
>
<p class="p-6 pb-0 py-3">{{ note.text }}</p>
<div class="grid grid-flow-col justify-end items-center gap-5 mt-4 p-6">
<a
@click="$router.push({ name: 'VitalMeasurementNoteUpdate', params: { noteId: note.id } })"
class="text-sm text-gray-500 font-light cursor-pointer"
>Edit</a
>
<button class="btn" @click="$router.back()">Done</button>
</div>
</DialogPanel>
</div>
</Dialog>
</template>
8 changes: 2 additions & 6 deletions src/components/Person/Logbook/MeasurementLogItem.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script setup>
import { ArrowSmallDownIcon, ArrowSmallUpIcon } from '@heroicons/vue/20/solid';
import { useRoute } from 'vue-router';
import LowHighBadge from '../../Measurements/LowHighBadge.vue';
const props = defineProps({
measurement: {
Expand All @@ -26,10 +25,7 @@ const props = defineProps({
<h3 class="font-semibold">
{{ Number(measurement.value).toLocaleString() }}
<span class="text-xs text-gray-500 font-light mr-3">{{ vital.unit }}</span>
<span v-if="vital.high && measurement.value >= Number(vital.high)"
class="border border-amber-200 p-1 py-0 pl-0 pr-1.5 rounded-lg text-amber-500 bg-amber-100 text-xs font-normal cursor-default whitespace-nowrap"><ArrowSmallUpIcon class="inline w-4 h-4 -mt-1" />High</span>
<span v-if="vital.low && measurement.value <= Number(vital.low)"
class="border border-amber-200 p-1 py-0 pl-0 pr-1.5 rounded-lg text-amber-500 bg-amber-100 text-xs font-normal cursor-default whitespace-nowrap"><ArrowSmallDownIcon class="inline w-4 h-4 -mt-0.5" />Low</span>
<LowHighBadge :vital="vital" :measurement="measurement" />
</h3>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Person/Logbook/NoteLogItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const props = defineProps({
<template>
<p
class="bg-gray-200 text-gray-800 p-3 px-4 rounded-md mt-3 leading-tight hover:shadow hover:bg-gray-100 cursor-pointer"
@click.stop="$router.push({ name: 'PersonNoteUpdate', params: { noteId: note.id}})">
@click.stop="$router.push({ name: 'PersonLogbookNoteView', params: { noteId: note.id}})">
{{ note.text }}
</p>
</template>
2 changes: 1 addition & 1 deletion src/components/Person/Person.vue
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const vitalMeasurements = (vitalId) => {
</div>
</div>
<h3 class="grid grid-flow-col text-xl font-bold mb-4 cursor-pointer" @click="$router.push({ name: 'PersonLogbook' })">
Logs
Logbook
<span class="font-normal text-base text-indigo-500 justify-self-end whitespace-nowrap">
View all {{ sortedPersonLogEntries.length }} <ChevronRightIcon class="w-6 h-6 inline align-top" />
</span>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Person/Vital.vue
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const backRoute = computed(() => {
</div>
<div class="pt-9 grid gap-3">
<h3 class="text-xl font-bold pb-3">
Logs
Logbook
<span class="text-xs font-normal text-gray-500 align-middle">({{ vitalMeasurements.length }})</span>
</h3>
<div class="grid gap-3">
Expand Down
Loading

0 comments on commit b8d5be3

Please sign in to comment.