Merge branch 'master' of https://git.neuf.no/edb/dns2019

gatsby-config.js

@@ -43,6 +43,7 @@ module.exports = {
         normalizer: neufNormalizer,
       },
     },
+    'gatsby-plugin-catch-links',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
     {

gatsby-node.js

@@ -276,15 +276,6 @@ exports.createPages = ({ actions, graphql }) => {
           },
         })
       })
-
-      // Create the list of associations
-      const associationListTemplate = path.resolve(
-        `./src/templates/association-list.js`
-      )
-      createPage({
-        path: `/foreningene/`,
-        component: associationListTemplate,
-      })
     })
     .then(() => {
       return graphql(`

package.json

@@ -8,6 +8,7 @@
     "gatsby": "^2.13.31",
     "gatsby-awesome-pagination": "^0.3.3",
     "gatsby-image": "^2.2.6",
+    "gatsby-plugin-catch-links": "^2.1.2",
     "gatsby-plugin-lodash": "^3.0.1",
     "gatsby-plugin-netlify": "^2.0.0",
     "gatsby-plugin-purgecss": "^3.1.0",

src/pages/booking.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import Layout from '../components/Layout'
+import { VenueTemplate } from '../templates/venue'
 
 export const bookingPageQuery = graphql`
   query BookingPage {
@@ -9,30 +10,77 @@ export const bookingPageQuery = graphql`
       content
     }
     allWordpressWpVenues(
-        sort: { fields: date, order: DESC }
-      ) {
-        totalCount
-        edges {
-          node {
-            ...VenueFields
-          }
+      filter: { show_on_booking_page: { eq: "true" } }
+      sort: { order: ASC, fields: menu_order }
+    ) {
+      edges {
+        node {
+          ...VenueFields
+          menu_order
         }
       }
+    }
   }
 `
 
+const VenueList = ({ venues }) => {
+  return (
+    <div className="venue-list">
+      {venues.map(({ node: venue }) => (
+        <VenueTemplate
+          key={venue.id}
+          title={venue.title}
+          content={venue.content}
+          featuredMedia={venue.featured_media}
+          floor={venue.floor}
+          capacityLegal={venue.capacity_legal}
+          capacityStanding={venue.capacity_standing}
+          capacitySitting={venue.capacity_sitting}
+          usedFor={venue.used_for}
+          bar={venue.bar}
+          audio={venue.audio}
+          lighting={venue.lighting}
+          audioVideo={venue.audio_video}
+        />
+      ))}
+    </div>
+  )
+}
+
 export const BookingPage = () => {
   const data = useStaticQuery(bookingPageQuery)
   const { title, content } = data.wordpressPage
+  const venues = data.allWordpressWpVenues.edges
 
   return (
     <Layout>
-      <section className="page">
+      <section className="booking-page">
         <h1 className="page-title">{title}</h1>
         <div
           className="page-content wp-content"
           dangerouslySetInnerHTML={{ __html: content }}
         />
+        <VenueList venues={venues} />
+        <h2>Se utvalgte lokaler i vår 3D-løsning</h2>
+        <p>
+          Med vår 3D-løsning har du muligheten til å navigere deg rundt på
+          huset! Du kan bevege deg mellom etasjer ved å trykke på tallene i den
+          lille kolonnen nederst til høyre. Dra deg rundt fra rom til rom ved å
+          klikke dit du vil, og bruk den røde og hvite krystallen i høyre hjørne
+          til å få opptil en 360 graders rotasjon i alle rom. Pluss- og minus-
+          knappene i høyre hjørne kan brukes for å zoome inn eller ut. På denne
+          måten får du en rask og god oversikt over lokalene, og får et solid
+          innblikk i hvordan rommene ser ut. Vi har valgt at løsningen starter i
+          øverste etasje i Storsalen - men ta gjerne en titt på lokalene i alle
+          etasjer!
+        </p>
+        <iframe
+          title="Chateau Neuf i Google Maps"
+          style={{ border: 0, height: '600px', width: '100%' }}
+          src="https://www.google.com/maps/embed?pb=!4v1521198562809!6m8!1m7!1sCAoSLEFGMVFpcE81LWR3UFhhcDVSTUduaWcyWXFsbElyRGpLZThLdlBLWFFkbllm!2m2!1d59.93243773194!2d10.71237824484!3f50.83!4f1.5300000000000011!5f0.5970117501821992"
+          frameBorder="0"
+          allowFullScreen="allowfullscreen"
+        />
       </section>
     </Layout>
   )

src/templates/venue.js

@@ -6,8 +6,9 @@ import Layout from '../components/Layout'
 import Map from '../components/Map'
 
 export class VenueTemplate extends React.Component {
-  render() {
+  renderInner() {
     const {
+      isSingle,
       title,
       content,
       featuredMedia,
@@ -24,13 +25,10 @@ export class VenueTemplate extends React.Component {
     const hasFeaturedMedia = featuredMedia && !!featuredMedia.localFile
 
     return (
-      <section
-        className={`venue-page ${
-          hasFeaturedMedia ? 'has-featured-media' : 'no-featured-media'
-        }`}
-      >
+      <>
         <div className="venue-hero">
-          <h1 className="page-title">{title}</h1>
+          {isSingle && <h1 className="venue-title">{title}</h1>}
+          {!isSingle && <h2 className="venue-title">{title}</h2>}
           {hasFeaturedMedia && (
             <div className="venue-featured-image">
               <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
@@ -54,18 +52,50 @@ export class VenueTemplate extends React.Component {
             {audioVideo && <li>A/V: {audioVideo}</li>}
           </ul>
         </div>
-        <div className="venue-map">
-          <Map />
-        </div>
-      </section>
+        {isSingle && (
+          <div className="venue-map">
+            <Map />
+          </div>
+        )}
+      </>
+    )
+  }
+
+  render() {
+    const { isSingle, className, featuredMedia } = this.props
+    const hasFeaturedMedia = featuredMedia && !!featuredMedia.localFile
+    const hasFeaturedMediaClass = hasFeaturedMedia
+      ? 'has-featured-media'
+      : 'no-featured-media'
+
+    if (isSingle) {
+      return (
+        <section className={`venue-page ${hasFeaturedMediaClass}`}>
+          {this.renderInner()}
+        </section>
+      )
+    }
+
+    return (
+      <div className={`venue ${hasFeaturedMediaClass}`}>
+        {this.renderInner()}
+      </div>
     )
   }
 }
 
 VenueTemplate.propTypes = {
+  isSingle: PropTypes.bool.isRequired,
+  className: PropTypes.string,
   title: PropTypes.string.isRequired,
   content: PropTypes.string,
-  featuredMedia: PropTypes.shape({}),
+  featuredMedia: PropTypes.shape({
+    localFile: PropTypes.shape({
+      childImageSharp: PropTypes.shape({
+        fluid: PropTypes.shape({}),
+      }),
+    }),
+  }),
   floor: PropTypes.string,
   capacityLegal: PropTypes.string,
   capacityStanding: PropTypes.string,
@@ -83,6 +113,8 @@ const VenuePage = ({ data }) => {
   return (
     <Layout>
       <VenueTemplate
+        isSingle={true}
+        className="venue-page"
         title={venue.title}
         content={venue.content}
         featuredMedia={venue.featured_media}
@@ -101,7 +133,9 @@ const VenuePage = ({ data }) => {
 }
 
 VenuePage.propTypes = {
-  data: PropTypes.shape({}).isRequired,
+  data: PropTypes.shape({
+    wordpressWpVenues: PropTypes.shape({}),
+  }).isRequired,
 }
 
 export default VenuePage

yarn.lock

@@ -6147,6 +6147,14 @@ gatsby-page-utils@^0.0.5:
     micromatch "^3.1.10"
     slash "^1.0.0"
 
+gatsby-plugin-catch-links@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-2.1.2.tgz#f7e04e2b390341ba4b1f8f0e12d4bcf78b1e542d"
+  integrity sha512-ur17fNloBJItWH1CtADFyPDqBHfe2NKV0OenuVpCEIHq4mKdWjPO1Q7cC+0/ZKN1GikpsTAabwXy4JwWIKUSew==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    escape-string-regexp "^1.0.5"
+
 gatsby-plugin-lodash@^3.0.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-lodash/-/gatsby-plugin-lodash-3.1.2.tgz#29f75b7e5b2a2be375e443f3306f711f6d039c03"