introduced gallery style for subelements.

backend/datamodel.prisma

@@ -46,7 +46,7 @@ type Project {
   name: String! @unique
   abbreviation: String! @unique
   description: String
-  images: [File]!
+  files: [File]!
   versions: [ProjectVersion]!
 }
 

backend/index.js

@@ -31,7 +31,7 @@ const server = new GraphQLServer({
 
 server.express.use(cookieParser())
 server.express.use(bodyParser.json())
-server.express.use(cors({ origin: process.env.FRONTEND_URL }))
+server.express.use(cors({ origin: process.env.FRONTEND_URL, credentials: true }))
 server.express.use('/static', express.static('static'))
 server.express.post('/upload', uploadMiddleware.single('file'), handleFile)
 server.express.use(authenticate)

frontend/components/Characterization.js

@@ -1,9 +1,8 @@
-import React from 'react'
 import ProjectVersion from './ProjectVersion'
 import MeasurementRun from './MeasurementRun'
 
 class Characterization extends React.Component {
-  render() {
+  render () {
     const { name, projectVersion, measurementRuns } = this.props.data
     return (
       <div>
@@ -17,4 +16,4 @@ class Characterization extends React.Component {
   }
 }
 
-export default Characterization
+export default Characterization

frontend/components/Comment.js

@@ -2,4 +2,4 @@ const Comment = props => (
   <div>This is a comment</div>
 )
 
-export default Comment
+export default Comment

frontend/components/Connection.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 import gql from 'graphql-tag'
 import { ApolloConsumer } from 'react-apollo'

frontend/components/Event.js

@@ -2,4 +2,4 @@ const Event = props => (
   <div>An event</div>
 )
 
-export default Event
+export default Event

frontend/components/File.js

@@ -1,29 +1,59 @@
-import React from 'react'
-import gql from 'graphql-tag'
-import { Query } from 'react-apollo'
+import styled from 'styled-components'
+import { endpoint } from '../config'
 
-const QUERY_FILES = gql`
-  query QUERY_FILES {
-    id
-    filename
-    mimetype
-    truncated
-    size
-    md5
+const ImageStyle = styled.div`
+  display: grid;
+  grid-template-columns: 250px 100px 1fr;
+  grid-auto-flow: dense;
+  align-items: start;
+  justify-items: start;
+  align-content: start;
+  justify-content: start;
+
+  a,
+  img {
+    grid-row: span 6;
+    max-width: 230px;
+    max-height: 140px;
+    justify-self: center;
+  }
+
+  h2 {
+    grid-column: span 2;
+    margin: 0 0 0.5em 0;
+    line-height: 1;
   }
-`
 
-class File extends React.Component {
-  render () {
-    const { id } = this.props
-    return (
-      <Query query={QUERY_FILES} variables={{ id }}>
-        {({ data, error, loading }) => (
-          <p>Here I expect some files.</p>
-        )}
-      </Query>
-    )
+  .description {
+    grid-column: span 2;
   }
+
+  p {
+    margin: 0;
+    line-height: 1.5;
+  }
+`
+
+const File = props => {
+  const { path, name, description, filename, mimetype, size } = props.data
+  const downloadPath = `${endpoint}/${path}`
+  return (
+    <ImageStyle>
+      {mimetype.startsWith('image/') ? (
+        <img src={downloadPath} alt={description} />
+      ) : (
+        <a href={downloadPath}>
+          <img src={`${endpoint}/static/document-download-solid.png`} alt={description} width={75} />
+        </a>
+      )}
+      <h2>{name}</h2>
+      <p className='description'>{description}</p>
+      <p>Path</p><p><a href={downloadPath}>{downloadPath}</a></p>
+      <p>Filename</p><p>{filename}</p>
+      <p>MIME Type</p><p>{mimetype}</p>
+      <p>Size</p><p>{size}</p>
+    </ImageStyle>
+  )
 }
 
 export default File

frontend/components/FileUpload.js

@@ -1,20 +1,4 @@
-import React from 'react'
-import gql from 'graphql-tag'
 import { endpoint } from '../config'
-/*import { Query } from 'react-apollo'
-
-const QUERY_UPLOAD = gql`
-  query QUERY_UPLOAD($id: ID!) {
-    upload(id: $id) {
-      id
-      filename
-      path
-      description
-      name
-      size
-    }
-  } 
-`*/
 
 class FileUpload extends React.Component {
   state = {

frontend/components/Gallery.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+
+const GalleryStyle = styled.div`
+  border: 1px solid grey;
+
+  #header {
+    background: lightgray;
+    cursor: pointer
+  }
+`
+
+class Gallery extends React.Component {
+  state = {
+    galleryOpen: false
+  }
+
+  openGallery = event => {
+    this.setState({ galleryOpen: !this.state.galleryOpen })
+  }
+
+  render() {
+    const { items, title } = this.props
+    return (
+      <GalleryStyle>
+        <div onClick={this.openGallery} id="header">
+          {items.length} {title} available (click to {this.state.galleryOpen ? 'hide' : 'see'})
+        </div>
+        <div style={{ display: this.state.galleryOpen ? 'block' : 'none' }} id="gallery">
+          {items}
+        </div>
+      </GalleryStyle>
+    )
+  }
+}
+
+export default Gallery

frontend/components/Interface.js

@@ -1,7 +1,5 @@
-import React from 'react'
-
 const Interface = props => (
   <div>Interface</div>
 )
 
-export default Interface
+export default Interface

frontend/components/Log.js

@@ -1,15 +1,13 @@
-import React from 'react'
-
 const LogItem = props => (
   <div>{props.title}</div>
 )
 
 const Log = props => (
   <ul>
-    <li><LogItem title="Log item 1" /></li>
-    <li><LogItem title="Log item 2" /></li>
-    <li><LogItem title="Log item 3" /></li>
+    <li><LogItem title='Log item 1' /></li>
+    <li><LogItem title='Log item 2' /></li>
+    <li><LogItem title='Log item 3' /></li>
   </ul>
 )
 
-export default Log
+export default Log

frontend/components/Measurement.js

@@ -1,4 +1,4 @@
 const Measurement = props => (
   <div>This is a measurment.</div>
 )
-export default Measurement
+export default Measurement

frontend/components/MeasurementRun.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Event from './Event'
 import Comment from './Comment'
 import Measurement from './Measurement'
@@ -26,4 +25,4 @@ const MeasurementRun = props => {
   )
 }
 
-export default MeasurementRun
+export default MeasurementRun

frontend/components/Meta.js

@@ -4,7 +4,7 @@ const Meta = () => (
   <Head>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta charSet="utf-8" />
-    <link rel="shortcut icon" href="/static/favicon.png"/>
+    <link rel="shortcut icon" href="/static/favicon.png" />
     <link rel="stylesheet" type="text/css" href="/static/nprogress.css" />
     <title>AutoMate</title>
   </Head>

frontend/components/MyLayout.js

@@ -1,16 +0,0 @@
-import Header from './Header'
-
-const LayoutStyle = {
-    margin: 20,
-    padding: 20,
-    border: '1px solid #DDD'
-}
-
-const Layout = props => (
-    <div style={LayoutStyle}>
-        <Header />
-        {props.children}
-    </div>
-)
-
-export default Layout

frontend/components/Page.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'
 import Header from './Header'
 import Meta from './Meta'

frontend/components/Project.js

@@ -1,5 +1,17 @@
-const Project = props => (
-  <div>This is a project</div>
-)
+import Gallery from './Gallery'
+import File from './File'
 
-export default Project
+const Project = props => {
+  const { name, abbreviation, description, files, versions } = props.data
+  return (
+    <div>
+      <h2>{name}</h2>
+      <p>{abbreviation}</p>
+      <p>{description}</p>
+      <Gallery title='files' items={files.map(file => <File key={file.filename} data={file} />)} />
+      <Gallery title='versions' items={versions.map(version => <p>{version.name}</p>)} />
+    </div>
+  )
+}
+
+export default Project

frontend/components/ProjectForm.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 import gql from 'graphql-tag'
 import { Query } from 'react-apollo'

frontend/components/ProjectList.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 import gql from 'graphql-tag'
 import { Query } from 'react-apollo'

frontend/components/ProjectVersion.js

@@ -1,17 +1,19 @@
 import Project from './Project'
+import Gallery from './Gallery'
 
 const ProjectVersion = props => {
-  const { id, name, changes, date, project } = props.data
+  const { name, changes, date, project } = props.data
+  const esDate = new Date(date)
   return (
     <div>
-      <Project project={project} />
+      <Project data={project} />
       <h2>Project version: {name}</h2>
-      <p>{date}</p>
+      <p>{esDate.toDateString()}</p>
       <ul>
-        {changes.map(change => <li>{change}</li>)}
+        <Gallery title='changes' items={changes.map((change, index) => <li key={index}>{change}</li>)} />
       </ul>
     </div>
   )
 }
 
-export default ProjectVersion
+export default ProjectVersion

frontend/components/Setup.js

@@ -2,4 +2,4 @@ const Setup = props => (
   <div>This is a setup.</div>
 )
 
-export default Setup
+export default Setup

frontend/components/User.js

@@ -22,4 +22,4 @@ const User = props => {
 }
 
 export default User
-export { CURRENT_USER }
+export { CURRENT_USER }

frontend/components/UserCreate.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import gql from 'graphql-tag'
 import { Mutation } from 'react-apollo'
 import { CURRENT_USER } from './User'

frontend/components/UserLogin.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Mutation } from 'react-apollo'
 import gql from 'graphql-tag'
 import { CURRENT_USER } from './User'

frontend/components/UserLogout.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Mutation } from 'react-apollo'
 import gql from 'graphql-tag'
 import { CURRENT_USER } from './User'
@@ -18,4 +17,4 @@ const UserLogout = props => (
   </Mutation>
 )
 
-export default UserLogout
+export default UserLogout

frontend/pages/characterization.js

@@ -1,33 +1,73 @@
 import Characterization from '../components/Characterization'
 
 const MOCK_DATA = {
-  name: "DCDC Efficiency",
+  name: 'DCDC Efficiency',
   projectVersion: {
-    id: "ashvkjhskrjhskfsvsfs",
-    name: "Production Tapeout",
+    id: 'ashvkjhskrjhskfsvsfs',
+    name: 'Production Tapeout',
     changes: ['DCDC removed', 'Logo changed'],
     date: Date.now(),
     project: {
-
+      name: 'Jungfrau',
+      abbreviation: 'JU_CSD',
+      description: '9th generation GNSS receiver.',
+      files: [{
+        id: 'shkherskfjhslfg',
+        name: 'Jungfrau Plan',
+        description: 'Plan of Jungfrau',
+        filename: 'jungfrau1.png',
+        path: 'static/uploads/jungfrau1.png',
+        mimetype: 'image/png',
+        size: 518380
+      }, {
+        id: 'pxugssfnsdognudog',
+        name: 'Jungfrau Picture',
+        description: 'Picture of Jungfrau',
+        filename: 'jungfrau2.jpg',
+        path: 'static/uploads/jungfrau2.jpg',
+        mimetype: 'image/jpeg',
+        size: 79628
+      }, {
+        id: 'awqershdfkghlhfdlfkg',
+        name: 'Jungfrau Text',
+        description: 'Something written about Jungfrau',
+        filename: '2016_juh_segmente_23_erlebnisberge_geschaftsmodell.pdf',
+        path: 'static/uploads/2016_juh_segmente_23_erlebnisberge_geschaftsmodell.pdf',
+        mimetype: 'application/pdf',
+        size: 40330
+      }],
+      versions: [{ name: 'Production Tapeout' }, { name: 'MPW' }]
     }
   },
   measurementRuns: [{
-    id: "asdsdghwkerhkvbsdf",
-    name: "Temperature sweep with L=5nH",
+    id: 'asdsdghwkerhkvbsdf',
+    name: 'Temperature sweep with L=5nH',
     operators: [{
-      name: "Tomi"
+      name: 'Tomi'
     }],
-    location: "Thalwil",
+    location: 'Thalwil',
     temperature: 24.5,
     startTime: Date.now(),
     endTime: Date.now(),
-    log: [],
-    comments: [],
+    log: [{
+      id: 'vxglzhflkjhblkhzg',
+      when: Date.now(),
+      json: '{"Comment":{"text":"What a wonderful world","createdAt":2342543,"previousVersion":"dahfkhesrskhqe"}}'
+    }, {
+      id: 'qgdglgxlkhxlkb',
+      when: Date.now(),
+      json: '{"ConnectionCommand":{"writeString":"*IDN?"}}'
+    }],
+    comments: [{
+      text: 'What a wonderful world',
+      createdAt: 2342543,
+      previousVersion: null
+    }],
     measurements: [],
     setup: {
-      id: "jnerktnkfjgnksdf",
-      name: "DCDC Setup",
-      description: "JU characterization board",
+      id: 'jnerktnkfjgnksdf',
+      name: 'DCDC Setup',
+      description: 'JU characterization board',
       images: [],
       comments: [],
       setupHardware: [],
@@ -40,4 +80,4 @@ const CharacterizationPage = props => (
   <Characterization data={MOCK_DATA} />
 )
 
-export default CharacterizationPage
+export default CharacterizationPage

frontend/pages/interfaces.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Connection from '../components/Connection'
 
 const InterfacePage = props => (