Skip to content

Commit

Permalink
Further work on the react components.
Browse files Browse the repository at this point in the history
  • Loading branch information
robol committed Nov 21, 2023
1 parent 163c67f commit 859b2fa
Show file tree
Hide file tree
Showing 7 changed files with 210 additions and 53 deletions.
5 changes: 5 additions & 0 deletions server/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const seminarQuery = require('./controllers/public/seminar')
const coursesQuery = require('./controllers/public/courses')
const lessonsQuery = require('./controllers/public/lessons')
const processes = require('./processes.js')
const conferencesQuery = require('./controllers/public/conferences')

const router = express.Router()

Expand Down Expand Up @@ -93,6 +94,10 @@ router.get('/public/conference/:id', async (req, res) => {
res.send(await conferenceQuery(req))
})

router.get('/public/conferences', async (req, res) => {
res.send(await conferencesQuery(req))
})

router.use('/process', processes)

router.use('*', async (req, res) => {
Expand Down
55 changes: 55 additions & 0 deletions server/controllers/public/conferences.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
const ObjectId = require('mongoose').Types.ObjectId
const EventConference = require('../../models/EventConference')

const maxDate = new Date(8640000000000000);

async function conferencesQuery(req) {
const from = req.query.from ? new Date(req.query.from) : new Date()
const to = req.query.to ? new Date(req.query.to) : maxDate

var match = {
startDate: {
$gte: from,
$lt: to,
},
}

if (req.query.grant) {
match["grant"] = ObjectId(req.query.grant)
}

const pipeline = [
{ $match: match },
{ $lookup: {
from: 'conferencerooms',
foreignField: '_id',
localField: 'conferenceRoom',
as: 'conferenceRoom'
}},
{ $unwind: '$conferenceRoom' },
{ $lookup: {
from: 'grants',
foreignField: '_id',
localField: 'grant',
as: 'grant'
}},
{ $project: {
_id: 1,
title: 1,
startDate: 1,
endDate: 1,
SSD: 1,
url: 1,
conferenceRoom: 1,
notes: 1
}}
]

const conferences = await EventConference.aggregate(pipeline)

return {
data: conferences
}
}

module.exports = conferencesQuery
38 changes: 27 additions & 11 deletions widgets/dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,11 @@
data-target="#seminar-tab" type="button" role="tab" aria-controls="seminar"
aria-selected="false">Seminar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#conferencelist" id="conferencelist-label" data-toggle="tab"
data-target="#conferencelist-tab" type="button" role="tab" aria-controls="conferencelist"
aria-selected="false">ConferenceList</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#conference" id="conference-label" data-toggle="tab"
data-target="#conference-tab" type="button" role="tab" aria-controls="conference"
Expand All @@ -73,6 +78,7 @@
<div class="tab-pane fade p-3" id="eventlist-tab"><div id="eventlist"></div></div>
<div class="tab-pane fade p-3" id="seminarlist-tab"><div id="seminarlist"></div></div>
<div class="tab-pane fade p-3" id="seminar-tab"><div id="seminar"></div></div>
<div class="tab-pane fade p-3" id="conferencelist-tab"><div id="conferencelist"></div></div>
<div class="tab-pane fade p-3" id="conference-tab"><div id="conference"></div></div>
</div>
</article>
Expand All @@ -81,17 +87,27 @@
</div>

<script>
dmwidgets.loadComponent(document.getElementById("eventlist"), "EventList", {})
dmwidgets.loadComponent(document.getElementById("seminarlist"), "SeminarList", {
// from: '2023-11-30',
// category: '653b5d8d10c0279ad486c807'
})
dmwidgets.loadComponent(document.getElementById("seminar"), "Seminar", {
id: '6557a87f74e142fb7c2dd7c3'
})
dmwidgets.loadComponent(document.getElementById("conference"), "Conference", {
id: '6557a87f74e142fb7c2dd7bd'
})
async function loader() {
const seminar_id = (await (await fetch('http://localhost:8000/api/v0/public/seminars')).json()).data[0]._id
const conference_id = (await (await fetch('http://localhost:8000/api/v0/public/conferences')).json()).data[0]._id

dmwidgets.loadComponent(document.getElementById("seminar"), "Seminar", {
id: seminar_id
})
dmwidgets.loadComponent(document.getElementById("conference"), "Conference", {
id: conference_id
})
dmwidgets.loadComponent(document.getElementById("eventlist"), "EventList", {})
dmwidgets.loadComponent(document.getElementById("seminarlist"), "SeminarList", {
// from: '2023-11-30',
// category: '653b5d8d10c0279ad486c807'
})
dmwidgets.loadComponent(document.getElementById("conferencelist"), "ConferenceList", {
// from: '2023-11-30',
// category: '653b5d8d10c0279ad486c807'
})
}
loader();
</script>

<script>
Expand Down
8 changes: 3 additions & 5 deletions widgets/src/components/Conference.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Markdown from 'react-markdown'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'

import { formatDate, formatTime, formatPersonName } from '../utils'
import { formatDate, formatTime, truncateText } from '../utils'
import { useQuery } from 'react-query'

export function Conference({ id }) {
Expand All @@ -29,21 +29,19 @@ export function Conference({ id }) {
return <div>
<ConferenceTitle conference={data}></ConferenceTitle>
<Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
{data.notes}
{truncateText(data.notes, 300)}
</Markdown>
</div>
}

function ConferenceTitle({ conference, href }) {
export function ConferenceTitle({ conference, href }) {
var title_block = <h2>{conference.title}</h2>
if (href !== undefined) {
title_block = <a href={href}>
{title_block}
</a>
}

console.log(conference)

return <>
{title_block}
<p>
Expand Down
45 changes: 45 additions & 0 deletions widgets/src/components/ConferenceList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react'
import axios from 'axios'
import { truncateText, getManageURL, getDMURL } from '../utils'
import { ConferenceTitle } from './Conference'
import { Loading } from './Loading'

import Markdown from 'react-markdown'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'
import { useQuery } from 'react-query'

export function ConferenceList({ from, to, grant }) {
const filter = { from, to, grant }

const { isLoading, error, data } = useQuery([ 'conferences' ], async () => {
const res = await axios.get(getManageURL("public/conferences"), { params: filter })
if (res.data) {
const ee = res.data.data
ee.sort((a,b) => new Date(a.startDatetime) - new Date(b.startDatetime))
return ee
}
})

if (isLoading || error) {
return <Loading widget="Lista delle conferenze" error={error}></Loading>
}

var events_block = []
for (var i = 0; i < data.length; i++) {
const e = data[i]
const link = getDMURL("conferenza?id=" + e._id)

events_block.push(
<div key={e._id}>
<ConferenceTitle conference={e} href={link}></ConferenceTitle>
<Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{truncateText(e.notes, 200)}</Markdown>
<hr className="my-4"></hr>
</div>
)
}

return <>
{events_block}
</>
}
108 changes: 71 additions & 37 deletions widgets/src/components/EventList.js
Original file line number Diff line number Diff line change
@@ -1,49 +1,83 @@
import React from 'react'
import { useEffect, useState } from 'react'
import axios from 'axios'
import { formatPersonName, formatDate, formatTime, truncateText, getManageURL } from '../utils'
import { MathJax, MathJaxContext } from 'better-react-mathjax'

export function EventList({ filter }) {
const [events, setEvents] = useState(null)

useEffect(() => {
const loader = async () => {
if (events === null) {
const res = await axios.get(getManageURL("public/seminars", filter))
if (res.data) {
const ee = res.data.data
ee.sort((a,b) => new Date(a.startDatetime) - new Date(b.startDatetime))
setEvents(ee)
}
}
import { truncateText, getManageURL, getDMURL } from '../utils'
import { ConferenceTitle } from './Conference'
import { SeminarTitle } from './Seminar'
import { Loading } from './Loading'

import Markdown from 'react-markdown'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'
import { useQuery } from 'react-query'

export function EventList({ from, to, grant }) {
const filter = { from, to, grant }

const { isLoading, error, data } = useQuery([ 'events' ], async () => {
var events = []

const conf = await axios.get(getManageURL("public/conferences"), { params: filter })
if (conf.data) {
const ec = conf.data.data
const ec_label = ec.map(x => {
return {...x, type: 'conference'}
})
events.push(...ec_label)
}

const sem = await axios.get(getManageURL("public/seminars"), { params: filter })
if (sem.data) {
const es = sem.data.data
const es_label = es.map(x => {
return {...x, type: 'seminar'}
})
events.push(...es_label)
}
loader()

events.sort((a, b) => {
const dateA = a.startDatetime ? a.startDatetime : a.startDate
const dateB = b.startDatetime ? b.startDatetime : b.startDate
return new Date(dateA) - new Date(dateB)
})

return events
})

if (events === null) {
return <>
Loading events ...
</>
if (isLoading || error) {
return <Loading widget="Lista degli eventi" error={error}></Loading>
}

var events_block = []
for (var i = 0; i < events.length; i++) {
const e = events[i]
events_block.push(
<div key={e._id}>
<h4><MathJax>{e.title}</MathJax>, {formatPersonName(e.speaker)}</h4>
<p>
{formatDate(e.startDatetime)} &mdash; {e.conferenceRoom?.name}
</p>
<p>
<MathJax>{truncateText(e.abstract, 200)}</MathJax>
</p>
</div>
)
for (var i = 0; i < data.length; i++) {
const e = data[i]

if (e.type == 'seminar') {
const e = data[i]
const link = getDMURL("seminario?id=" + e._id)

events_block.push(
<div key={e._id}>
<SeminarTitle seminar={e} href={link}></SeminarTitle>
<Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{truncateText(e.abstract, 200)}</Markdown>
<hr className="my-4"></hr>
</div>
)
}
else {
const link = getDMURL("conferenza?id=" + e._id)
events_block.push(
<div key={e._id}>
<ConferenceTitle conference={e} href={link}></ConferenceTitle>
<Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>{truncateText(e.notes, 200)}</Markdown>
<hr className="my-4"></hr>
</div>
)
}


}

return <MathJaxContext>
return <>
{events_block}
</MathJaxContext>
</>
}
4 changes: 4 additions & 0 deletions widgets/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { EventList } from './components/EventList'
import { SeminarList } from './components/SeminarList'
import { Seminar } from './components/Seminar'
import { Conference } from './components/Conference'
import { ConferenceList } from './components/ConferenceList';
import { QueryClient, QueryClientProvider } from 'react-query'

import 'katex/dist/katex.min.css' // `rehype-katex` does not import the CSS for you
Expand All @@ -28,6 +29,9 @@ const dmwidgets = {
case 'Conference':
element = <Conference {...props}></Conference>
break;
case 'ConferenceList':
element = <ConferenceList {...props}></ConferenceList>
break;
default:
console.log("Unsupported element: " + name)
}
Expand Down

0 comments on commit 859b2fa

Please sign in to comment.