timoschwarzer/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Mensa</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js" integrity="sha512-XdUZ5nrNkVySQBnnM5vzDqHai823Spoq1W3pJoQwomQja+o4Nw0Ew1ppxo5bhF2vMug6sfibhKWcNJsG8Vj9tg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </head>
  <body>
    <div id="app">
      <template v-if="!!plansPerDay">
        <div v-for="date in Object.keys(plansPerDay)" :key="date">
          <h1>{{ formatDate(date) }}</h1>

          <table>
            <thead>
              <tr>
                <th>Typ</th>
                <th>Name</th>
                <th>€ Studierende</th>
                <th>€ Angestellte</th>
                <th>€ Gäste</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="meal in plansPerDay[date]" :key="meal.id">
                <td>{{ meal.lane.name }}</td>
                <td>{{ meal.name }}</td>
                <td>{{ meal.price.student }}</td>
                <td>{{ meal.price.employee }}</td>
                <td>{{ meal.price.guest }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
      <div v-else>Lädt...</div>
    </div>
    <script type="module">
      import {format, startOfDay, endOfDay, parseISO} from 'https://cdn.jsdelivr.net/npm/date-fns/+esm'
      import de from 'https://cdn.jsdelivr.net/npm/date-fns/locale/de/+esm'

      new Vue({
        el: '#app',
        data: {
          plansPerDay: null, // {day -> meal[]}
        },
        mounted() {
          this.updatePlan()
          setInterval(this.updatePlan, 1000 * 60 * 60) // Refresh each hour
        },
        methods: {
          formatDate(date) {
            return format(typeof date === 'string' ? parseISO(date) : date, 'eeee, dd.MM.yyyy', {
              locale: de,
            })
          },
          async updatePlan() {
            const MENSA_ID = 163
            const START_DATE = format(startOfDay(new Date()), 'yyyy-MM-dd')
            const END_DATE = format(startOfDay(new Date()), 'yyyy-MM-dd')

            const response = await (await fetch(`https://sls.api.stw-on.de/v1/location/${MENSA_ID}/menu/${START_DATE}/${END_DATE}?time=noon`)).json()
            const plansPerDay = {}
            for (const meal of response.meals) {
              if (!(meal.date in plansPerDay)) {
                plansPerDay[meal.date] = []
              }

              plansPerDay[meal.date].push(meal)
            }

            this.plansPerDay = plansPerDay
          }
        }
      })
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Mensa</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js" integrity="sha512-XdUZ5nrNkVySQBnnM5vzDqHai823Spoq1W3pJoQwomQja+o4Nw0Ew1ppxo5bhF2vMug6sfibhKWcNJsG8Vj9tg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	</head>
	<body>
	<div id="app">
	<template v-if="!!plansPerDay">
	<div v-for="date in Object.keys(plansPerDay)" :key="date">
	<h1>{{ formatDate(date) }}</h1>

	<table>
	<thead>
	<tr>
	<th>Typ</th>
	<th>Name</th>
	<th>€ Studierende</th>
	<th>€ Angestellte</th>
	<th>€ Gäste</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="meal in plansPerDay[date]" :key="meal.id">
	<td>{{ meal.lane.name }}</td>
	<td>{{ meal.name }}</td>
	<td>{{ meal.price.student }}</td>
	<td>{{ meal.price.employee }}</td>
	<td>{{ meal.price.guest }}</td>
	</tr>
	</tbody>
	</table>
	</div>
	</template>
	<div v-else>Lädt...</div>
	</div>
	<script type="module">
	import {format, startOfDay, endOfDay, parseISO} from 'https://cdn.jsdelivr.net/npm/date-fns/+esm'
	import de from 'https://cdn.jsdelivr.net/npm/date-fns/locale/de/+esm'

	new Vue({
	el: '#app',
	data: {
	plansPerDay: null, // {day -> meal[]}
	},
	mounted() {
	this.updatePlan()
	setInterval(this.updatePlan, 1000 * 60 * 60) // Refresh each hour
	},
	methods: {
	formatDate(date) {
	return format(typeof date === 'string' ? parseISO(date) : date, 'eeee, dd.MM.yyyy', {
	locale: de,
	})
	},
	async updatePlan() {
	const MENSA_ID = 163
	const START_DATE = format(startOfDay(new Date()), 'yyyy-MM-dd')
	const END_DATE = format(startOfDay(new Date()), 'yyyy-MM-dd')

	const response = await (await fetch(`https://sls.api.stw-on.de/v1/location/${MENSA_ID}/menu/${START_DATE}/${END_DATE}?time=noon`)).json()
	const plansPerDay = {}
	for (const meal of response.meals) {
	if (!(meal.date in plansPerDay)) {
	plansPerDay[meal.date] = []
	}

	plansPerDay[meal.date].push(meal)
	}

	this.plansPerDay = plansPerDay
	}
	}
	})
	</script>
	</body>
	</html>