The chronology items now working!
This commit is contained in:
DrMint
parent
4c5db4fa88
commit
6f37d85c85
|
|
@ -0,0 +1,51 @@
|
|||
import styles from "styles/Chronology/ChronologyItemDisplay.module.css";
|
||||
import {
|
||||
ChronologyItem,
|
||||
ChronologyItemsEvent,
|
||||
} from "queries/chronology/overview";
|
||||
|
||||
|
||||
export default function ChronologyItemDisplay(pageProps: ChronologyItem) {
|
||||
|
||||
function generateAnchor(year: number, month: number, day:number, event?: number): string {
|
||||
let result: string = "";
|
||||
result += year;
|
||||
if (month) result += '-' + month;
|
||||
if (day) result += '-' + day;
|
||||
return result;
|
||||
}
|
||||
|
||||
function generateDate(displayed_date: string, year: number, month: number, day:number) {
|
||||
let result: string = "";
|
||||
if (displayed_date) {
|
||||
result += displayed_date;
|
||||
} else {
|
||||
result += year;
|
||||
}
|
||||
if (month) result += '/' + month;
|
||||
if (day) result += '/' + day;
|
||||
return result;
|
||||
}
|
||||
|
||||
return (
|
||||
<div id={generateAnchor(item.attributes.year, item.attributes.month, item.attributes.day)}>
|
||||
<h2>{generateDate(item.attributes.displayed_date, item.attributes.year, item.attributes.month, item.attributes.day)}</h2>
|
||||
{item.attributes.events.map((event: ChronologyItemsEvent) => (
|
||||
<div key={"chronoEvent" + event.id}>
|
||||
<h3>
|
||||
{event.translations.length ? event.translations[0].title : ""}
|
||||
</h3>
|
||||
<p>
|
||||
{event.translations.length
|
||||
? event.translations[0].description
|
||||
: ""}
|
||||
<em> {event.translations.length ? event.translations[0].note : ""}</em>
|
||||
</p>
|
||||
<p>
|
||||
<em>{event.source.data ? event.source.data.attributes.name : ""}</em>
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import styles from "styles/Chronology/ChronologyItemComponent.module.css";
|
||||
import {
|
||||
ChronologyItem,
|
||||
ChronologyItemsEvent,
|
||||
ChronologyItemsEventTranslation,
|
||||
} from "queries/chronology/overview";
|
||||
|
||||
export default function ChronologyItemComponent(pageProps: ChronologyItem) {
|
||||
function generateAnchor(
|
||||
year: number,
|
||||
month: number,
|
||||
day: number,
|
||||
event?: number
|
||||
): string {
|
||||
let result: string = "";
|
||||
result += year;
|
||||
if (month) result += "-" + month;
|
||||
if (day) result += "-" + day;
|
||||
return result;
|
||||
}
|
||||
|
||||
function generateYear(displayed_date: string, year: number): string {
|
||||
if (displayed_date) {
|
||||
return displayed_date;
|
||||
} else {
|
||||
return year.toString();
|
||||
}
|
||||
}
|
||||
|
||||
function generateDate(month: number, day: number): string {
|
||||
let result: string = "";
|
||||
if (month) result += month.toString().padStart(2, "0");
|
||||
if (day) result += "/" + day.toString().padStart(2, "0");
|
||||
return result;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.chronologyItem}
|
||||
id={generateAnchor(
|
||||
pageProps.attributes.year,
|
||||
pageProps.attributes.month,
|
||||
pageProps.attributes.day
|
||||
)}
|
||||
>
|
||||
<p className={styles.year}>
|
||||
{generateYear(
|
||||
pageProps.attributes.displayed_date,
|
||||
pageProps.attributes.year
|
||||
)}
|
||||
</p>
|
||||
|
||||
<p className={styles.date}>
|
||||
{generateDate(pageProps.attributes.month, pageProps.attributes.day)}
|
||||
</p>
|
||||
|
||||
<div className={styles.events}>
|
||||
{pageProps.attributes.events.map((event: ChronologyItemsEvent) => (
|
||||
<div className={styles.event} key={event.id}>
|
||||
{event.translations.map(
|
||||
(translation: ChronologyItemsEventTranslation) => (
|
||||
<>
|
||||
<h3>{translation.title}</h3>
|
||||
<p className={event.translations.length > 1 ? styles.bulletItem : ""}>
|
||||
{translation.description}
|
||||
<em> {translation.note}</em>
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
|
||||
<p className={styles.source}>
|
||||
{event.source.data
|
||||
? "(" + event.source.data.attributes.name + ")"
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import styles from "styles/Chronology/ChronologyYearComponent.module.css";
|
||||
import {
|
||||
ChronologyItem
|
||||
} from "queries/chronology/overview";
|
||||
import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
|
||||
|
||||
type ChronologyYearComponentProps = {
|
||||
items: ChronologyItem[];
|
||||
}
|
||||
|
||||
export default function ChronologyYearComponent(props: ChronologyYearComponentProps) {
|
||||
return (
|
||||
<div>
|
||||
{props.items.map((item: ChronologyItem, index: number) => (
|
||||
<ChronologyItemComponent
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
attributes={item.attributes}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,11 +3,14 @@ import ContentPanel from "components/Panels/ContentPanel";
|
|||
import SubPanel from "components/Panels/SubPanel";
|
||||
import ReturnButton from "components/Panels/ReturnButton";
|
||||
import NavOption from "components/Panels/NavOption";
|
||||
import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
|
||||
import ChronologyYearComponent from "components/Chronology/ChronologyYearComponent";
|
||||
import {
|
||||
getChronologyItems,
|
||||
getChronologyEras,
|
||||
ChronologyItem,
|
||||
ChronologyEra,
|
||||
ChronologyItemsEvent,
|
||||
} from "queries/chronology/overview";
|
||||
|
||||
type Props = {
|
||||
|
|
@ -16,26 +19,86 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function ChronologyOverview(props: Props): JSX.Element {
|
||||
|
||||
let previousYear = -1;
|
||||
|
||||
let chronologyItemYearGroups: ChronologyItem[][] = [];
|
||||
|
||||
|
||||
// Group by year the Chronology items
|
||||
props.chronologyItems.map((item: ChronologyItem) => {
|
||||
if (!chronologyItemYearGroups.hasOwnProperty(item.attributes.year)) {
|
||||
chronologyItemYearGroups[item.attributes.year] = [item];
|
||||
} else {
|
||||
chronologyItemYearGroups[item.attributes.year].push(item);
|
||||
}
|
||||
});
|
||||
|
||||
console.log(chronologyItemYearGroups);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<SubPanel>
|
||||
{props.chronologyEras.map((era: ChronologyEra) => {
|
||||
if (era.id == undefined) console.warn(era);
|
||||
})}
|
||||
|
||||
<ReturnButton url="/chronology" title="Chronology" />
|
||||
<hr />
|
||||
|
||||
{console.log(props.chronologyEras)}
|
||||
|
||||
{props.chronologyEras.map((era: ChronologyEra) => (
|
||||
<NavOption
|
||||
key={era.id}
|
||||
url={"#" + era.attributes.slug}
|
||||
title={era.attributes.title[0].title ? era.attributes.title[0].title : ''}
|
||||
subtitle={era.attributes.starting_year + " → " + era.attributes.ending_year}
|
||||
title={
|
||||
era.attributes.title.length ? era.attributes.title[0].title : ""
|
||||
}
|
||||
subtitle={
|
||||
era.attributes.starting_year + " → " + era.attributes.ending_year
|
||||
}
|
||||
border={true}
|
||||
/>
|
||||
))}
|
||||
</SubPanel>
|
||||
|
||||
<ContentPanel>
|
||||
{props.chronologyItems.map((item: ChronologyItem) => {
|
||||
if (!item.attributes.year)
|
||||
console.warn("Missing year on ChronologyItem (" + item.id + ")");
|
||||
item.attributes.events.map((event: ChronologyItemsEvent) => {
|
||||
if (!event.source.data) {
|
||||
console.warn(
|
||||
"Missing Source on ChronologyItem (" +
|
||||
item.id +
|
||||
"), Event (" +
|
||||
event.id +
|
||||
")"
|
||||
);
|
||||
}
|
||||
if (event.translations.length !== 1) {
|
||||
console.warn(
|
||||
"Wrong number of Translation(s) on ChronologyItem (" +
|
||||
item.id +
|
||||
"), Event (" +
|
||||
event.id +
|
||||
")"
|
||||
);
|
||||
}
|
||||
});
|
||||
})}
|
||||
|
||||
{chronologyItemYearGroups.map((items: ChronologyItem[], index: number) => {
|
||||
return (
|
||||
<ChronologyYearComponent
|
||||
key={index}
|
||||
items={items}
|
||||
/>
|
||||
)
|
||||
|
||||
})}
|
||||
</ContentPanel>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -43,7 +106,7 @@ export default function ChronologyOverview(props: Props): JSX.Element {
|
|||
export const getStaticProps: GetStaticProps = async (context) => {
|
||||
return {
|
||||
props: {
|
||||
/*chronologyItems: await getChronologyItems(context.locale),*/
|
||||
chronologyItems: await getChronologyItems(context.locale),
|
||||
chronologyEras: await getChronologyEras(context.locale),
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,36 +2,76 @@ import { queryGraphQL } from "queries/helpers";
|
|||
|
||||
export type ChronologyItem = {
|
||||
id: string;
|
||||
attributes: ChronologyItemAttributes;
|
||||
};
|
||||
|
||||
export type ChronologyItemAttributes = {
|
||||
year: number;
|
||||
month: number;
|
||||
day: number;
|
||||
translations: ChronologyItemsTranslation[];
|
||||
displayed_date: string;
|
||||
events: ChronologyItemsEvent[];
|
||||
}
|
||||
|
||||
export type ChronologyItemsEvent = {
|
||||
id: string;
|
||||
source: Source
|
||||
translations: ChronologyItemsEventTranslation[];
|
||||
};
|
||||
|
||||
export type ChronologyItemsTranslation = {
|
||||
export type ChronologyItemsEventTranslation = {
|
||||
title: string;
|
||||
};
|
||||
description: string;
|
||||
note: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export type Source = {
|
||||
data: {
|
||||
attributes: {
|
||||
name: string;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function getChronologyItems(
|
||||
languages_code: String | undefined
|
||||
language_code: String | undefined
|
||||
): Promise<ChronologyItem[]> {
|
||||
return (
|
||||
await queryGraphQL(
|
||||
`
|
||||
{
|
||||
chronology_items {
|
||||
id
|
||||
year
|
||||
month
|
||||
day
|
||||
translations(filter: { languages_code: { code: { _eq: "` + languages_code + `" } } }) {
|
||||
title
|
||||
{
|
||||
chronologyItems (pagination: {limit: -1}, sort: ["year:asc", "month:asc", "day:asc"]) {
|
||||
data {
|
||||
id
|
||||
attributes {
|
||||
year
|
||||
month
|
||||
day
|
||||
displayed_date
|
||||
events {
|
||||
id
|
||||
source {
|
||||
data {
|
||||
attributes {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
translations(filters: { language: { code: { eq: "` + language_code + `" } } }) {
|
||||
title
|
||||
description
|
||||
note
|
||||
status
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
}
|
||||
`
|
||||
)
|
||||
).chronology_items;
|
||||
).chronologyItems.data;
|
||||
}
|
||||
|
||||
export type ChronologyEra = {
|
||||
|
|
@ -40,9 +80,9 @@ export type ChronologyEra = {
|
|||
};
|
||||
|
||||
export type ChronologyEraAttributes = {
|
||||
slug: string;
|
||||
starting_year: number;
|
||||
ending_year: number;
|
||||
slug: string;
|
||||
title: ChronologyEraTranslation[];
|
||||
}
|
||||
|
||||
|
|
@ -59,7 +99,9 @@ export async function getChronologyEras(
|
|||
{
|
||||
chronologyEras {
|
||||
data {
|
||||
id
|
||||
attributes {
|
||||
slug
|
||||
starting_year
|
||||
ending_year
|
||||
title (filters: {language: {code: {eq: "` + language_code + `"}}}){
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
.chronologyItem {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"year events"
|
||||
"date events"
|
||||
;
|
||||
grid-column-gap: 1em;
|
||||
place-content: start;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 4em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.chronologyItem:target {
|
||||
background-color: var(--color-main-base);
|
||||
border-radius: 1em;
|
||||
padding: 1em 2em 1em 1.5em;
|
||||
}
|
||||
|
||||
.chronologyItem > .year {
|
||||
grid-area: year;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.chronologyItem > .date {
|
||||
grid-area: date;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chronologyItem > .events {
|
||||
grid-area: events;
|
||||
}
|
||||
|
||||
.event {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.event > h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.event > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.event > .bulletItem::before {
|
||||
content: "⁃";
|
||||
color: var(--color-main-dark);
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-left: -1em
|
||||
}
|
||||
|
||||
.event > .bulletItem {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
.source {
|
||||
color: var(--color-main-dark);
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
grid-row-gap: 0.5em;
|
||||
place-content: start center;
|
||||
scrollbar-width: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.panel::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -75,3 +75,12 @@ button:hover {
|
|||
background: var(--color-main-dark);
|
||||
color: var(--color-main-light);
|
||||
}
|
||||
|
||||
*::selection {
|
||||
background-color: var(--color-main-dark);
|
||||
color: var(--color-main-light)
|
||||
}
|
||||
|
||||
*:target {
|
||||
scroll-margin-top: 1em;
|
||||
}
|
||||
Loading…
Reference in New Issue