#!/usr/bin/env node
var express = require('express')
var route = express()
var babelify = require('express-babelify-middleware')
var dao = require('./dao')
var DateTime = require('dateutils').DateTime
var DateFormat = require('dateutils').DateFormat
var DateLocale = require('dateutils').DateLocale
var markupForDateRange = require('./markupForDateRange')
var headHtml = require('./head.html')
var filtersHtml = require('./filters.html')
var modalsHtml = require('./modals.html')
var scriptsHtml = require('./scripts.html')
var history = require('./history')
var format = require('./format')
var _ = require('lodash')

route.use('/front.min.js', babelify(__dirname + '/front.js'))
route.get('/courts', dao.sendFreeCourts)
route.use(express.static(__dirname + '/../public'))
route.get('/history', (req, res) => {
    var historyData = history.availabilityByDate()
    var today = new DateTime()
    const days = 70
    var firstDate = today.minusDays(days)
    var dates = _.range(1, days).map(num=>firstDate.plusDays(num))
    var times = _.range(60, 230, 5).map(format.formatIsoTime)
    res.write(`<!DOCTYPE html>`)
    res.write(`<html>
        <head>
        <style>
        body {font-family: "Trebuchet MS"; line-height: 1;}
        th {font-size:14x;}
        thead th {text-align: center; padding: 0 0 10px;transform: rotate(-90deg);overflow: hidden;}
        tbody th {text-align: left; padding:5px 10px 5px; white-space: nowrap;}
        td {text-align: center;}
        table {border-collapse: collapse;}
        </style>
        </head>`)
    res.write(`
        <body>
        <table>
        <thead>
        <tr><th>Pvm</th>
        ${times.map(time=>`<th>${time}</th>`).join('')}
        </tr>
        </thead>
        <tbody>
        ${dates.map(date=>`<tr><th>${DateFormat.format(date, 'D j.n', DateLocale.FI)}</th>
        ${times.map(time=> {
        const availabilityForDate = findAvailabilityForDate(historyData, date, time)
        const rgb = 255 - availabilityForDate * 15
        return `<td style="background:rgb(${rgb},${rgb},255)" title="${time}, vapaana ${availabilityForDate}"></td>`
    }).join('')}
        </tr>`).join('')}

        </tbody>
        </table>
        </body>
        </html>`)
    res.end()
})

function findAvailabilityForDate(historyData, date, time) {
    return _.get(_.find(historyData, row=> row.dateTime === date.toISODateString() + 'T' + time), 'avaliable', 0)

}
route.get('/', (req, res) => {
    var refresh = req.query.refresh === 'true'
    res.write(`<!DOCTYPE html>
        <html>`)
    res.write(headHtml())
    res.write(`<body><div class="container reservations detail">`)
    res.write(filtersHtml({
        places: [
            {id: 'meilahti', name: 'Meilahti'},
            {id: 'herttoniemi', name: 'Herttoniemi'},
            {id: 'kulosaari', name: 'Kulosaari'},
            {id: 'merihaka', name: 'Merihaka'},
            {id: 'taivallahti', name: 'Taivallahti'},
            {id: 'tapiola', name: 'Tapiola'},
            {id: 'tali', name: 'Tali'},
            {id: 'laajasalo', name: 'Laajasalo'},
            {id: 'hiekkaharju', name: 'Hiekkaharju'}
        ],
        types:  [
            {id: 'bubble', name: 'Kupla'},
            {id: 'outdoor', name: 'Ulko'},
            {id: 'indoor', name: 'Sisä'}
        ]
    }))
    res.write(`<section class="" id="schedule"><div class="reservationModal modal"></div>`)
    dao.freeCourts(new DateTime().toISODateString(), 3, refresh, (data) => {
        res.write(markupForDateRange(data, new DateTime()))
        res.write('</section></div>')
        res.write(modalsHtml())
        res.write(scriptsHtml({
            refresh:    refresh,
            serverDate: new DateTime().toISODateString()
        }))
        res.write('</body></html>')
        res.end()
    })
})

module.exports = route

@@ -1144,24 +1144,56 @@
      %3Chead%3E%0A
+        %3Cmeta charset=%22utf-8%22/%3E%0A
         %3Csty
@@ -1192,24 +1192,24 @@
     %3Cstyle%3E%0A
-
         body
@@ -1280,16 +1280,17 @@
 -size:14
+p
 x;%7D%0A    
@@ -1341,16 +1341,54 @@
  0 10px;
+ height: 50px;%7D%0A        thead th div %7B
 transfor
@@ -1409,24 +1409,23 @@
 eg);
-overflow: hidden
+margin: 0 -10px
 ;%7D%0A 
@@ -1471,17 +1471,17 @@
 ing:
-5
+3
 px 10px 
 5px;
@@ -1476,17 +1476,17 @@
 px 10px 
-5
+3
 px; whit
@@ -1641,24 +1641,65 @@
      %3Cbody%3E%0A
+        %3Ch1%3EMyym%C3%A4tt%C3%A4 j%C3%A4%C3%A4neet kent%C3%A4t%3C/h1%3E%0A
         %3Ctab
@@ -1774,16 +1774,21 @@
 e=%3E%60%3Cth%3E
+%3Cdiv%3E
 $%7Btime%7D%3C
@@ -1788,16 +1788,22 @@
 %7Btime%7D%3C/
+div%3E%3C/
 th%3E%60).jo

Improve styles