Quite experimental changes in Meta Data and registermap.

.gitignore

@@ -10,7 +10,10 @@
 /build
 
 # documentation
-/ code_docu
+/code_docu
+
+# database
+/db
 
 # misc
 .DS_Store

package.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "autoprefixer-stylus": "0.13.0",
+    "body-parser": "^1.17.1",
     "concurrently": "3.4.0",
     "jsdoc": "^3.4.3",
     "react-scripts": "0.9.5",

server/index.js

@@ -0,0 +1,21 @@
+const express = require('express')
+const bodyParser = require('body-parser')
+const mongoose = require('mongoose')
+const movies = require('./routes/movies')
+
+const app = express()
+
+const dbName = 'movieDB'
+var connectionString = `mongodb://localhost:27017/${dbName}`
+
+mongoose.connect(connectionString)
+
+app.use(bodyParser.json())
+app.use(bodyParser.urlencoded({ extended: true }))
+app.use('/api', movies)
+
+app.set('port', process.env.PORT || 4000)
+
+const server = app.listen(app.get('port'), function () {
+  console.log(`Server listening on port ${server.address().port}`)
+})

server/measure/model.js

@@ -0,0 +1,11 @@
+const mongoose = require('mongoose')
+
+const measurementSchema = new mongoose.Schema({
+  datetime: String,
+  characterization: {
+    type: String,
+    index: true },
+  result: [Number]
+})
+
+module.exports = mongoose.model('Measurement', measurementSchema)

server/measure/route.js

@@ -0,0 +1,70 @@
+const Movie = require('../models/movie.js')
+const express = require('express')
+const router = express.Router()
+
+// GET
+router.route('/movies').get(function (req, res) {
+  Movie.find(function (err, movies) {
+    if (err) {
+      return res.send(err)
+    }
+    res.json(movies)
+  })
+})
+
+// POST
+router.route('/movies').post(function (req, res) {
+  console.log('Body:', req.body)
+  const movie = new Movie(req.body)
+
+  console.log('Movie:', movie)
+  movie.save(function (err) {
+    if (err) {
+      return res.send(err)
+    }
+    res.send({ message: 'Movie added.' })
+  })
+})
+
+// PUT
+router.route('/movies/:id').put(function (req, res) {
+  Movie.findOne({ _id: req.params.id }, function (err, movie) {
+    if (err) {
+      return res.send(err)
+    }
+
+    for (prop in req.body) {
+      movie[prop] = req.body[prop]
+    }
+
+    console.log('Movie:', movie)
+    movie.save(function (req, res) {
+      if (err) {
+        return res.send(err)
+      }
+      res.json({ message: 'Movie updated.' })
+    })
+  })
+})
+
+// GET :id
+router.route('/movies/:id').get(function (req, res) {
+  Movie.findOne({ _id: req.params.id }, function (err, movie) {
+    if (err) {
+      return res.send(err)
+    }
+    res.json(movie)
+  })
+})
+
+// GET :id
+router.route('/movies/:id').delete(function (req, res) {
+  Movie.remove({ _id: req.params.id }, function (err, movie) {
+    if (err) {
+      return res.send(err)
+    }
+    res.json({ message: 'Movie deleted.' })
+  })
+})
+
+module.exports = router

server/models/movie.js

@@ -0,0 +1,10 @@
+const mongoose = require('mongoose')
+
+const movieSchema = new mongoose.Schema({
+  title: String,
+  releaseYear: String,
+  director: String,
+  genre: String
+})
+
+module.exports = mongoose.model('Movie', movieSchema)

server/movies.js

@@ -0,0 +1,10 @@
+const mongoose = require('mongoose')
+
+const movieSchema = new mongoose.Schema({
+  title: String,
+  releaseYear: String,
+  director: String,
+  genre: String
+})
+
+module.exports = mongoose.model('Movie', movieSchema)

server/project/model.js

@@ -0,0 +1,10 @@
+const mongoose = require('mongoose')
+
+const projectSchema = new mongoose.Schema({
+  name: String,
+  tag: String,
+  description: String,
+  meta: [mongoose.Schema.Types.Mixed]
+})
+
+module.exports = mongoose.model('Project', projectSchema)

server/registermap/model.js

@@ -0,0 +1,36 @@
+const mongoose = require('mongoose')
+
+const registermapSchema = new mongoose.Schema({
+  name: {
+    type: String,
+    required: true },
+  tag: String,
+  description: String,
+  meta: [mongoose.Schema.Types.Mixed]
+})
+
+module.exports = mongoose.model('Project', registermapSchema)
+
+const settingSchema = new mongoose.Schema({
+  name: {
+    type: String,
+    required: true,
+    maxlength: 50 },
+  tag: {
+    type: String,
+    maxlength: 10,
+    required: true },
+  description: {
+    type: String,
+    maxlength: 200 },
+  group: {
+    type: String,
+    maxlength: 20 },
+  bits: {
+    type: Number,
+    min: 1,
+    get: (value) => Math.round(value),
+    set: (value) => Math.round(value) }
+})
+
+module.exports = mongoose.model('Setting', settingSchema)

server/routes/movies.js

@@ -0,0 +1,70 @@
+const Movie = require('../models/movie.js')
+const express = require('express')
+const router = express.Router()
+
+// GET
+router.route('/movies').get(function (req, res) {
+  Movie.find(function (err, movies) {
+    if (err) {
+      return res.send(err)
+    }
+    res.json(movies)
+  })
+})
+
+// POST
+router.route('/movies').post(function (req, res) {
+  console.log('Body:', req.body)
+  const movie = new Movie(req.body)
+
+  console.log('Movie:', movie)
+  movie.save(function (err) {
+    if (err) {
+      return res.send(err)
+    }
+    res.send({ message: 'Movie added.' })
+  })
+})
+
+// PUT
+router.route('/movies/:id').put(function (req, res) {
+  Movie.findOne({ _id: req.params.id }, function (err, movie) {
+    if (err) {
+      return res.send(err)
+    }
+
+    for (prop in req.body) {
+      movie[prop] = req.body[prop]
+    }
+
+    console.log('Movie:', movie)
+    movie.save(function (req, res) {
+      if (err) {
+        return res.send(err)
+      }
+      res.json({ message: 'Movie updated.' })
+    })
+  })
+})
+
+// GET :id
+router.route('/movies/:id').get(function (req, res) {
+  Movie.findOne({ _id: req.params.id }, function (err, movie) {
+    if (err) {
+      return res.send(err)
+    }
+    res.json(movie)
+  })
+})
+
+// GET :id
+router.route('/movies/:id').delete(function (req, res) {
+  Movie.remove({ _id: req.params.id }, function (err, movie) {
+    if (err) {
+      return res.send(err)
+    }
+    res.json({ message: 'Movie deleted.' })
+  })
+})
+
+module.exports = router

src/MetaData.js

@@ -0,0 +1,119 @@
+import React from 'react'
+
+class MetaInformationForm extends React.Component {
+  constructor () {
+    super()
+    this.changeType = this.changeType.bind(this)
+  }
+
+  changeType (event) {
+    this.type = this.sali
+  }
+
+  render () {
+    const { data } = this.props
+    const metaElements = {
+      text: (
+        <fieldset>
+          <input type='text' placeholder='Key Name' />
+          <input type='text' placeholder='Value' />
+        </fieldset>
+      ),
+      image: (
+        <fieldset>
+          <input type='text' placeholder='Image URL' />
+          <button>Select from Gallery</button>
+          <input type='file' placeholder='Upload file' />
+          <input type='text' placeholder='Name' />
+          <input type='text' placeholder='Description' />
+        </fieldset>
+      ),
+      link: (
+        <fieldset>
+          <input type='text' placeholder='URL' />
+          <input type='text' placeholder='Description' />
+        </fieldset>
+      ),
+      file: (
+        <fieldset>
+          <input type='file' placeholder='URL' />
+          <input type='text' placeholder='Description' />
+        </fieldset>
+      )
+    }
+
+    return (
+      <form>
+        <select value={data.type} ref={(input) => { this.sali = input }} onChange={changeType}>
+          <option value='text'>Text</option>
+          <option value='image'>Image</option>
+          <option value='link'>Link</option>
+          <option value='file'>File</option>
+        </select>
+        {metaElements[type]}
+      </form>
+    )
+  }
+}
+
+class MetaInformationDisplay extends React.Component {
+  render () {
+    const { data } = this.props
+    const metaElements = {
+      text: (
+        <p>
+          <em>{data.key}</em>&nbsp;<span>{data.value}</span>
+        </p>
+      ),
+      image: (
+        <fieldset>
+          <input type='text' placeholder='Image URL' />
+          <button>Select from Gallery</button>
+          <input type='file' placeholder='Upload file' />
+          <input type='text' placeholder='Name' />
+          <input type='text' placeholder='Description' />
+        </fieldset>
+      ),
+      link: (
+        <fieldset>
+          <input type='text' placeholder='URL' />
+          <input type='text' placeholder='Description' />
+        </fieldset>
+      ),
+      file: (
+        <fieldset>
+          <input type='file' placeholder='URL' />
+          <input type='text' placeholder='Description' />
+        </fieldset>
+      )
+    }
+
+    return (
+      <form>
+        <select value={data.type} ref={(input) => { this.sali = input }} onChange={changeType}>
+          <option value='text'>Text</option>
+          <option value='image'>Image</option>
+          <option value='link'>Link</option>
+          <option value='file'>File</option>
+        </select>
+        {metaElements[data.type]}
+      </form>
+    )
+  }
+}
+
+class MetaInformation extends React.Component {
+  render () {
+    const { method, data } = this.props
+    if (method === 'form') {
+      return (
+        <MetaInformationForm method={method} data={data} />
+      )
+    }
+    return (
+      <MetaInformationDisplay method={method} data={data} />
+    )
+  }
+}
+
+export default MetaInformation

src/css/style.css

@@ -83,7 +83,7 @@ button {
 }
 * {
   font-family: 'Roboto', sans-serif;
-  font-size: 24;
+  font-size: 18;
   box-sizing: border-box;
 }
 h1,

src/css/style.styl

@@ -14,7 +14,7 @@
   //font-family 'Mukta Vaani', sans-serif
   //font-family 'Alegreya Sans', sans-serif; 
   font-family 'Roboto', sans-serif
-  font-size 24
+  font-size 18
   box-sizing border-box
 h1, h2, h3, h4, th
   font-family 'Roboto', sans-serif

src/registermap/components/RegisterTable.js

@@ -0,0 +1,49 @@
+import React from 'react'
+
+class RegisterTable extends React.Component {
+  constructor () {
+    super()
+    this.bitmap = {}
+    this.table = this.table.bind(this)
+  }
+
+  table (registermap, settings) {
+    // Generate a table with rows for registers and columns for bits
+    let trow = []
+    let idx
+
+    const thead = []
+    const tbody = []
+
+    for (let idxCol = 0; idxCol < registermap.bitsPerRegister; idxCol += 1) {
+      trow.push(<th key={idxCol}>{idxCol}</th>)
+    }
+    trow.push(<th key={registermap.bitsPerRegister}>Register Name</th>)
+    thead.push(<tr key={-1}>{trow}</tr>)
+
+    for (let idxRow = 0; idxRow < registermap.nrOfRegisters; idxRow += 1) {
+      trow = []
+      for (let idxCol = 0; idxCol < registermap.bitsPerRegister; idxCol += 1) {
+        idx = idxRow * registermap.bitsPerRegister + idxCol
+        this.bitmap[idx] = ''
+        trow.push(<td key={idx} onClick={this.sayMyName}>{this.bitmap[idx]}</td>)
+      }
+      trow.push(<td key={`inp${idxRow}`}><input ref={input => { this.bitmap[idxRow] = input }} type='text' placeholder={`register${idxRow}`} onChange={this.updateRegister} /></td>)
+      tbody.push(<tr key={idxRow}>{trow}</tr>)
+    }
+    return (
+      <table>
+        <thead>{thead}</thead>
+        <tbody>{tbody}</tbody>
+      </table>
+    )
+  }
+
+  render () {
+    return (
+     this.table(this.props.registermap, this.props.settingList)
+    )
+  }
+}
+
+export default RegisterTable

src/registermap/components/ShowRegistermap.js

@@ -1,14 +1,13 @@
 import React from 'react'
 import EditRegistermap from './EditRegistermap'
 import EditSetting from './EditSetting'
+import RegisterTable from './RegisterTable'
 import './registermap.css'
 
 class ShowRegistermap extends React.Component {
   constructor () {
     super()
     this.sayMyName = this.sayMyName.bind(this)
-    this.table = this.table.bind(this)
-
     this.bitmap = {}
   }
 
@@ -17,38 +16,6 @@ class ShowRegistermap extends React.Component {
     console.log('Hi, my name is', event)
   }
 
-  table (registermap, settings) {
-    // Generate a table with rows for registers and columns for bits
-    let trow = []
-    let idx
-
-    const thead = []
-    const tbody = []
-
-    for (let idxCol = 0; idxCol < registermap.bitsPerRegister; idxCol += 1) {
-      trow.push(<th key={idxCol}>{idxCol}</th>)
-    }
-    trow.push(<th key={registermap.bitsPerRegister}>Register Name</th>)
-    thead.push(<tr key={-1}>{trow}</tr>)
-
-    for (let idxRow = 0; idxRow < registermap.nrOfRegisters; idxRow += 1) {
-      trow = []
-      for (let idxCol = 0; idxCol < registermap.bitsPerRegister; idxCol += 1) {
-        idx = idxRow * registermap.bitsPerRegister + idxCol
-        this.bitmap[idx] = ''
-        trow.push(<td key={idx} onClick={this.sayMyName}>{this.bitmap[idx]}</td>)
-      }
-      trow.push(<td key={`inp${idxRow}`}><input ref={input => { this.bitmap[idxRow] = input }} type='text' placeholder={`register${idxRow}`} onChange={this.updateRegister} /></td>)
-      tbody.push(<tr key={idxRow}>{trow}</tr>)
-    }
-    return (
-      <table>
-        <thead>{thead}</thead>
-        <tbody>{tbody}</tbody>
-      </table>
-    )
-  }
-
   render () {
     const { registermap, settingList, actions } = this.props
     console.log('Show registermap', registermap, settingList, actions)
@@ -64,17 +31,13 @@ class ShowRegistermap extends React.Component {
           <h2>Registermap {registermap.name}</h2>
           <EditRegistermap registermap={registermap} actions={actions} />
           <h2>Registers</h2>
-          {this.table(registermap, settingList)}
-          <div>Warning: Not all settings fit in the registers!</div>
+          <RegisterTable registermap={registermap} settings={settingList} bitsPerRegister={registermap.bitsPerRegister} nrOfRegisters={registermap.nrOfRegisters} />
         </div>
         <div className='content-aside-right'>
           <h2>Settings</h2>
-          {settingList.map((value, idx) => {
-            return (
-              <EditSetting key={idx} setting={value} actions={actions} />
-            )
-          }
-          )}
+          {settingList.map((value, idx) => (
+            <EditSetting key={idx} setting={value} actions={actions} />
+          ))}
         </div>
       </div>
     )

src/server.js

@@ -0,0 +1,18 @@
+const express = require('express')
+const app = express()
+const bodyParser = require('body-parser')
+
+app.use(bodyParser.urlencoded({ extended: true }))
+app.use(bodyParser.json())
+
+const port = process.env.PORT || 4000
+
+const router = express.Router()
+
+router.get('/', (req, res) => {
+  res.json({ message: 'Hello!' })
+})
+
+app.use('/', router)
+
+app.listen(port, () => { console.log(`Server listening on port ${port}`) })