Skip to content

Commit

Permalink
[ex/plenary] store data using ldo
Browse files Browse the repository at this point in the history
  • Loading branch information
@elf-pavlik
elf-pavlik committed Apr 1, 2024
1 parent ac413d1 commit 5acf8eb
Show file tree
Hide file tree
Showing 11 changed files with 527 additions and 261 deletions.
29 changes: 29 additions & 0 deletions examples/plenary/fake-data.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
export default {
agents: [
'http://localhost:3000/acme/profile/card#me',
'http://localhost:3000/yoyo/profile/card#me'
],
pods: {
'http://localhost:3000/acme/profile/card#me': [
{
id: 'http://localhost:3000/acme-hr/',
name: 'HR'
},
{
id: 'http://localhost:3000/acme-rnd/',
name: 'RnD'
}
],
'http://localhost:3000/yoyo/profile/card#me': [
{
id: 'http://localhost:3000/yoyo-eu/',
name: 'EU'
},
]
},
registrations: {
'http://localhost:3000/acme-hr/': 'http://localhost:3000/acme-hr/dataRegistry/events/',
'http://localhost:3000/acme-rnd/': 'http://localhost:3000/acme-rnd/dataRegistry/events/',
'http://localhost:3000/yoyo-eu/': 'http://localhost:3000/yoyo-eu/dataRegistry/events/'
}
}
6 changes: 5 additions & 1 deletion examples/plenary/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Plenary</title>
<style>
body { font-family: Preahvihear;}
body {
font-family: Preahvihear;
max-width: 480px;
margin: 0 auto;
}
</style>
</head>

Expand Down
7 changes: 2 additions & 5 deletions examples/plenary/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"build": "pnpm build:ldo && vue-tsc --noEmit && vite build",
"preview": "vite preview",
"lint": "eslint . --fix --ignore-path .gitignore",
"build:ldo": "ldo build --input ./shapes --output ./ldo"
Expand All @@ -16,20 +16,17 @@
"@mdi/font": "6.2.95",
"core-js": "^3.34.0",
"vue": "^3.4.21",
"vuetify": "^3.5.8"
"vuetify": "^3.5.13"
},
"devDependencies": {
"@babel/types": "^7.24.0",
"@types/node": "^20.11.25",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/eslint-config-typescript": "^13.0.0",
"eslint": "^8.57.0",
"eslint-config-standard": "^17.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-n": "^16.6.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-vue": "^9.22.0",
"pinia": "^2.1.7",
"sass": "^1.71.1",
"typescript": "^5.4.2",
Expand Down
141 changes: 25 additions & 116 deletions examples/plenary/src/components/EventDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,31 @@
v-if="event && event.name"
:title="event.name">
<v-card-subtitle>
{{ store.getAgent(event)?.name }} -
{{ store.organizations.find(o => o['@id'] === store.getAgent(event!))?.label }} -
{{ store.getPod(event)?.name }}
</v-card-subtitle>
<v-card-text>
{{ store.formatDateTime(event.startDate) }}
<v-alert
v-if="!presenceSet()"
v-if="store.haveDetailsLoaded(event) && !store.isPresenceSet(event)"
color="blue"
>
<v-list-item
v-if="store.user"
class="me"
:key="store.user.id"
:title="store.user.name"
:prependAvatar="store.fakeAvatar(store.user.id)"
:key="store.user['@id']!"
:title="store.user.label"
:prependAvatar="store.fakeAvatar(store.user['@id']!)"
>
<template
#append
>
<v-btn
@click="absent()"
@click="store.absent(event)"
icon="mdi-minus-circle-outline"
></v-btn>
<v-btn
@click="present()"
@click="store.present(event)"
icon="mdi-plus-circle-outline"
></v-btn>
</template>
Expand All @@ -35,7 +36,7 @@
<h3>Chair</h3>
<v-list-item
v-if="event.chair && event.chair.agent"
:class="{ me: isMe(event.chair['@id']!)}"
:class="{ me: store.isMe(event.chair.agent)}"
:key="event.chair['@id']"
:title="event.chair.agent.label"
:prependAvatar="store.fakeAvatar(event.chair.agent['@id']!)"
Expand All @@ -48,17 +49,17 @@
<h3>Scribe</h3>
<v-list-item
v-if="event.scribe && event.scribe.agent"
:class="{ me: isMe(event.scribe['@id']!)}"
:class="{ me: store.isMe(event.scribe.agent)}"
:key="event.scribe['@id']!"
:title="event.scribe?.agent.label"
:prependAvatar="store.fakeAvatar(event.scribe?.agent['@id']!)"
>
<template
v-if="isChair()"
v-if="store.amIChair(event)"
#append
>
<v-btn
@click="removeScribe()"
@click="store.removeScribe(event)"
icon="mdi-close-circle-outline"
></v-btn>
</template>
Expand All @@ -73,38 +74,29 @@
>
<v-list-item
v-for="attendee of event.attendee"
:class="{ me: isMe(attendee['@id']!)}"
:class="{ me: store.isMe(attendee.agent)}"
:key="attendee['@id']"
:title="attendee.agent.label"
:prependAvatar="store.fakeAvatar(attendee?.agent['@id']!)"
>
<template
v-if="isChair() && !event.scribe"
v-if="store.amIChair(event) && !event.scribe"
#append
>
<v-btn
@click="setScribe(attendee)"
@click="store.setScribe(event, attendee)"
icon="mdi-circle-edit-outline"
></v-btn>
</template>
<template
v-else-if="isChair()"
v-else-if="store.amIChair(event) || store.isMe(attendee.agent)"
#append
>
<v-btn
@click="setAbsent(attendee)"
@click="store.setAbsent(event, attendee)"
icon="mdi-minus-circle-outline"
></v-btn>
</template>
<template
v-else-if="isMe(attendee)"
#append
>
<v-btn
@click="unsetPresence()"
icon="mdi-close-circle-outline"
></v-btn>
</template>
</v-list-item>
</v-list>
<v-skeleton-loader
Expand All @@ -117,29 +109,20 @@
>
<v-list-item
v-for="absentee of event.absentee"
:class="{ me: isMe(absentee['@id']!)}"
:class="{ me: store.isMe(absentee.agent)}"
:key="absentee['@id']"
:title="absentee?.agent?.label"
:prependAvatar="store.fakeAvatar(absentee?.agent['@id']!)"
>
<template
v-if="isChair()"
v-if="store.amIChair(event) || store.isMe(absentee.agent)"
#append
>
<v-btn
@click="setPresent(absentee)"
@click="store.setPresent(event, absentee)"
icon="mdi-plus-circle-outline"
></v-btn>
</template>
<template
v-else-if="isMe(absentee)"
#append
>
<v-btn
@click="unsetPresence()"
icon="mdi-close-circle-outline"
></v-btn>
</template>
</v-list-item>
</v-list>
<v-skeleton-loader
Expand All @@ -151,97 +134,23 @@
</template>

<script setup lang="ts">
import { computed, watchEffect } from 'vue';
import { useRoute } from 'vue-router'
import { useAppStore } from '../stores/app'
import { computed, watchEffect } from 'vue';
const route = useRoute()
const store = useAppStore()
store.loadEvents()
const event = computed(() => store.events.find(e => e['@id'] === route.query.event))
watchEffect(() => {
if (!event.value) return
store.loadDetails(event.value)
})
function removeScribe() {
if (event.value && event.value.scribe) {
if (!event.value.attendee) {
event.value.attendee = []
}
event.value.attendee.unshift(event.value.scribe)
delete event.value.scribe
}
}
function presenceSet() {
if (!event.value) return
return store.user.id === event.value.chair['@id']
|| store.user.id === event.value.scribe?.['@id']
|| event.value.attendee?.find(a => store.user.id === a['@id'])
|| event.value.absentee?.find(a => store.user.id === a['@id'])
}
function unsetPresence() {
if (!event.value) return
if (event.value.attendee?.find(a => store.user.id === a['@id'])) {
event.value.attendee = event.value.attendee?.filter(a => store.user.id !== a['@id'])
}
if (event.value.absentee?.find(a => store.user.id === a['@id'])) {
event.value.absentee = event.value.absentee?.filter(a => store.user.id !== a['@id'])
}
}
function present() {
if (!event.value) return
if (!event.value.attendee) {
event.value.attendee = []
}
// event.value.attendee.unshift(store.user)
}
function absent() {
if (!event.value) return
if (!event.value.absentee) {
event.value.absentee = []
}
// event.value.absentee.unshift(store.user)
}
function isMe(id: string) {
return store.user.id === id
}
function isChair() {
return store.user.id === event.value?.chair['@id']
}
function setScribe(agent) {
if (!event.value) return
event.value.scribe = agent
if (!event.value.attendee) {
event.value.attendee = []
}
event.value.attendee = event.value.attendee.filter(a => a['@id'] !== agent.id)
}
function setPresent(agent) {
if (!event.value) return
if (!event.value.attendee) {
event.value.attendee = []
}
event.value.attendee.unshift(agent)
event.value.absentee = event.value.absentee?.filter(a => a['@id'] !== agent.id)
}
store.loadOrganizations()
store.loadEvents()
function setAbsent(agent) {
if (!event.value) return
if (!event.value.absentee) {
event.value.absentee = []
}
event.value.absentee.unshift(agent)
event.value.attendee = event.value.attendee?.filter(a => a['@id'] !== agent.id)
}
</script>

<style>
Expand Down
Loading

0 comments on commit 5acf8eb

Please sign in to comment.