Allow upload of image for events via Admin

src/models/Event.ts

@@ -15,6 +15,7 @@ export interface Event {
   content_en: string;
   start_time: string;
   end_time: string;
+  image: string;
   tags: Tag[];
   tag_id?: number[];
   visible: boolean;

src/pages/admin/EventCreatePage.tsx

@@ -105,6 +105,7 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
 
     try {
       const payload = data.formData;
+      if (payload.image.startsWith("http")) payload.image = undefined;
       payload.signup_id = payload.signupForm;
       payload.tag_id = payload.tags;
       if (payload.id === undefined) {
@@ -162,7 +163,7 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
     const schema = {
       title: formData.id ? formData.title_fi : "New Event",
       type: "object",
-      required: ["title_fi", "title_en", "location", "description_fi", "description_en", "content_fi", "content_en"],
+      required: ["title_fi", "title_en", "tags", "location", "start_time", "end_time", "description_fi", "description_en", "content_fi", "content_en"],
       properties: {
         tags: {
           type: "array",
@@ -196,15 +197,19 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
           default: tomorrowDatetime,
         },
         signupForm: {
-          type: "array",
+          type: ["array"],
           title: "Signup forms",
           items: {
-            type: "number",
-            enum: signupForm.map(form => form.id),
-            enumNames: signupForm.map(form => form.title),
+            // TODO: A bug here, DB must have at least one SignupForm, otherwise cannot submit
+            enum: [...signupForm.map(form => form.id)],
+            enumNames: [...signupForm.map(form => form.title)],
           },
           uniqueItems: true,
-          default: [],
+        },
+        image: {
+          "type": ["string", "null"],
+          "format": formData.image ? "uri-reference" : "data-url",
+          "title": "Override tag icon with image"
         },
         finnish_section_divider: {
           title: "Finnish",
@@ -263,6 +268,11 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
       end_time: {
         "ui:widget": "datetime",
       },
+      image: {
+        "ui:options": {
+          accept: [".jpg", ".jpeg", ".png"]
+        }
+      },
       finnish_section_divider: {
         "ui:widget": "section_divider",
         "ui:options": {

src/views/EventPage/EventPageView.tsx

@@ -22,7 +22,7 @@ class EventPageView extends React.Component<EventPageViewProps> {
         <PageSection backgroundColor="white1">
           <AsideSection textColor="black1" />
           <MainSection textColor="black1">
-            <img className="event-banner" src={event.tags[0].icon} alt={event.title_fi} ></img>
+            <img className="event-banner" src={event.image || event.tags[0].icon} alt={event.title_fi} ></img>
             <h1 className="event-title">{event.title_fi}</h1>
             <p>
               {event.description_fi}

src/views/FrontPage/FrontPageView.tsx

@@ -72,7 +72,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
           start_time={event.start_time}
           text={event.description_fi}
           link={`/events/${event.id}`}
-          image={event.tags[0].icon}
+          image={event.image || event.tags[0].icon}
           button={
             <Button type="filled" onClick={() => { }}>
               <h6>Lue lisää&nbsp;›</h6>