Skip to content

Commit

Permalink
front page
Browse files Browse the repository at this point in the history
  • Loading branch information
@CommanderStorm
CommanderStorm committed Dec 30, 2023
1 parent fadec39 commit 22a0c46
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 187 deletions.
242 changes: 59 additions & 183 deletions webclient/src/pages/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,212 +1,86 @@
<script setup lang="ts">
import "@/assets/spectre-all.scss";
import { setTitle } from "@/composables/common";
import { useFetch } from "@/composables/fetch";
import type { components } from "@/api_types";
import { useI18n } from "vue-i18n";
import { ArrowRightIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
import { MapPinIcon } from "@heroicons/vue/24/outline";
import { ArrowRightIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/solid";
import { ref } from "vue";
type RootResponse = components["schemas"]["RootResponse"];
const { t } = useI18n({ useScope: "local" });
const { data } = useFetch<RootResponse>(`/api/get/root`, (d) => setTitle(d.name));
function more(id: string) {
document.getElementById(`panel-${id}`)?.classList.add("open");
}
function less(id: string) {
document.getElementById(`panel-${id}`)?.classList.remove("open");
}
const openPanels = ref<(boolean | undefined)[]>([]);
</script>

<template>
<div v-if="data" id="view-main">
<div class="columns" style="margin-top: 25px">
<div class="column">
<h5>{{ t("sites") }}</h5>
</div>
<!-- <div class="column col-auto"><a href="#"><i class="icon icon-location" /> {{ t("overview_map") }}</a></div> -->
</div>
<div class="columns">
<div v-for="site in data.sites_overview" :key="site.id" class="col-6 col-xs-12 column">
<div class="panel" v-bind="{ id: `panel-${site.id}` }">
<div class="panel-header">
<RouterLink v-if="site.id" :to="'/view/' + site.id">
<div class="columns">
<div class="column">
<div class="h6 panel-title">{{ site.name }}</div>
</div>
<div class="column col-auto">
<button
type="button"
class="btn btn-link"
:style="{ visibility: site.id ? undefined : 'hidden' }"
:aria-label="`show the details for the campus '${site.name}'`"
>
<ArrowRightIcon class="h-4 w-4" />
</button>
</div>
</div>
</RouterLink>
<div v-else class="columns">
<div class="column">
<div class="h6 panel-title">{{ site.name }}</div>
</div>
<div class="flex flex-row justify-between pt-14">
<div class="!text-xl font-semibold text-slate-600">{{ t("sites") }}</div>
<!-- <a href="#" class="flex flex-row"><MapPinIcon class="h-4 w-4" /> {{ t("overview_map") }}</a> -->
</div>
<div v-if="data" class="mt-5">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div
v-for="(site, siteIndex) in data.sites_overview"
:key="site.id"
class="flex flex-col gap-4 rounded-xl border-2 p-8"
>
<div>
<RouterLink
v-if="site.id"
:to="'/view/' + site.id"
:aria-label="`show the details for the campus '${site.name}'`"
class="flex grow-0 flex-row justify-between !no-underline"
>
<span class="text-xl font-semibold text-slate-700 hover:text-tumBlue-500">{{ site.name }}</span>
<ArrowRightIcon v-if="site.id" class="my-auto hidden md:block h-6 w-6" />
</RouterLink>
<div v-else class="text-xl font-semibold">{{ site.name }}</div>
</div>
<div class="flex flex-col gap-3">
{{ openPanels[siteIndex] }}?{{ site.children.length }}:{{ site.n_visible }}
<RouterLink
v-for="c in site.children.slice(0, openPanels[siteIndex] ? site.children.length : site.n_visible)"
:key="c.id"
:to="'/view/' + c.id"
:aria-label="`show the details for the building '${c.name}'`"
class="flex flex-row justify-between text-tumBlue-600 !no-underline hover:text-tumBlue-500"
>
<div class="flex flex-row gap-3">
<MapPinIcon class="my-auto h-4 w-4" />
<span class="text-lg">{{ c.name }}</span>
</div>
</div>
<div class="panel-body">
<RouterLink
v-for="(c, i) in site.children"
:key="c.id"
:to="'/view/' + c.id"
:class="{ 'link-more': i >= site.n_visible }"
:aria-label="`show the details for the building '${c.name}'`"
<ChevronRightIcon class="h-5 w-5 hidden sm:block" />
</RouterLink>
<div v-if="site.children.length > site.n_visible" class="mt-2">
<button
v-if="openPanels[siteIndex]"
type="button"
:aria-label="t('less_aria')"
class="flex flex-row gap-2"
@click="() => (openPanels[siteIndex] = false)"
>
<div class="tile tile-centered">
<div class="tile-icon">
<div class="example-tile-icon">
<i class="centered icon icon-location" />
</div>
</div>
<div class="tile-content">
<div class="tile-title">{{ c.name }}</div>
</div>
<div class="tile-action">
<button
type="button"
class="btn btn-link"
:aria-label="`show the details for the building '${c.name}'`"
>
<ChevronRightIcon class="h-4 w-4" />
</button>
</div>
</div>
</RouterLink>
<ChevronUpIcon class="h-4 w-4" />
{{ t("less") }}
</button>
<button
v-if="site.children.length > site.n_visible"
v-else
type="button"
class="btn btn-link btn-more"
class="flex flex-row gap-2"
:aria-label="t('more_aria')"
@click="more(site.id)"
@click="() => (openPanels[siteIndex] = true)"
>
<div class="flex flex-row gap-2">
<ChevronDownIcon class="h-4 w-4" />
{{ t("more") }}
</div>
</button>
<button type="button" class="btn btn-less btn-link" :aria-label="t('less_aria')" @click="less(site.id)">
<div class="flex flex-row gap-2">
<ChevronUpIcon class="h-4 w-4" />
{{ t("less") }}
</div>
<ChevronDownIcon class="h-4 w-4 my-auto" />
{{ t("more") }}
</button>
</div>
</div>
</div>
</div>
</div>
<div v-else>{{ t("Loading data...") }}</div>
</template>

<style lang="scss">
@import "@/assets/variables";
#view-main {
.panel {
border: 1px solid $card-border;
border-radius: 10px;
overflow: hidden;
box-shadow: $card-shadow-dark;
margin: 10px 0;
padding-bottom: 12px;
.panel-header {
width: 100%;
margin-bottom: 8px;
& > a {
text-decoration: none;
.h6 {
text-align: left;
color: $body-font-color;
transition: color 0.1s;
&:hover,
&:active {
color: $primary-color;
}
}
button {
margin-top: -7px;
margin-bottom: -7px;
}
}
a.btn {
margin: -8px 0;
}
.h6 {
font-weight: bold;
}
}
.panel-body {
& > a {
text-decoration: none;
}
.link-more {
opacity: 0.5;
transition: opacity 0.1s;
.tile {
display: none;
}
}
.tile-icon {
color: $body-font-color;
margin-top: -4px;
}
.tile-title {
padding-left: 8px;
}
}
.btn-more,
.btn-less {
margin-top: 5px;
padding-bottom: 0;
padding-left: 0;
}
.btn-less {
display: none;
}
}
.panel.open {
.panel-body .link-more {
opacity: 1;
.tile {
display: flex;
}
}
.btn-more {
display: none;
}
.btn-less {
display: inline-block;
}
}
}
</style>

<i18n lang="yaml">
de:
less: weniger
Expand All @@ -215,11 +89,13 @@ de:
more_aria: mehr Gebäude anzeigen
overview_map: Übersichtskarte
sites: Standorte
"Loading data...": Lädt daten...
en:
less: less
less_aria: show more buildings
more: more
more_aria: show more buildings
overview_map: Overview Map
sites: Sites
"Loading data...": Loading data...
</i18n>
7 changes: 4 additions & 3 deletions webclient/src/pages/search.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import "@/assets/spectre-all.scss";
//import "@/assets/spectre-all.scss";
import { useFetch } from "@/composables/fetch";
import { computed } from "vue";
import { setDescription, setTitle } from "@/composables/common";
Expand All @@ -10,6 +10,7 @@ import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import type { components } from "@/api_types";
import { MapPinIcon, MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
type SearchResponse = components["schemas"]["SearchResponse"];
const { t } = useI18n({ useScope: "local" });
Expand Down Expand Up @@ -92,8 +93,8 @@ function genDescription(): string {
<RouterLink :to="'/view/' + e.id" class="tile tile-centered">
<div class="tile-icon">
<template v-if="e.type === 'room' || e.type === 'virtual_room'">
<i v-if="e.parsed_id" class="icon icon-search" />
<i v-else class="icon icon-location" />
<MagnifyingGlassIcon v-if="e.parsed_id" class="h-4 w-4" />
<MapPinIcon v-else class="h-4 w-4" />
</template>
<img v-else class="avatar avatar-sm" src="@/assets/thumb-building.webp" :alt="t('thumbnail_alt')" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion webclient/src/pages/view/[id].vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import "@/assets/spectre-all.scss";
//import "@/assets/spectre-all.scss";
import ShareButton from "@/components/ShareButton.vue";
import DetailsInteractiveMap from "@/components/DetailsInteractiveMap.vue";
import DetailsRoomOverviewSection from "@/components/DetailsRoomOverviewSection.vue";
Expand Down

0 comments on commit 22a0c46

Please sign in to comment.