aboutsummaryrefslogtreecommitdiff
path: root/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala
blob: 4ec695e3f2ac64948449aa79d6a806af87a83583 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
package vfd.dashboard.ui

import org.scalajs.dom.html

import scalatags.JsDom.all.ExtendedString
import scalatags.JsDom.all.Int2CssNumber
import scalatags.JsDom.all.bindNode
import scalatags.JsDom.all.`class`
import scalatags.JsDom.all.div
import scalatags.JsDom.all.height
import scalatags.JsDom.all.iframe
import scalatags.JsDom.all.p
import scalatags.JsDom.all.src
import scalatags.JsDom.all.stringAttr
import scalatags.JsDom.all.stringFrag
import scalatags.JsDom.all.stringPixelStyle
import scalatags.JsDom.all.style
import scalatags.JsDom.all.width
import vfd.dashboard.Environment
import vfd.dashboard.MavlinkSocket
import vfd.dashboard.ui.panels.Communication
import vfd.dashboard.ui.panels.Primary

class Layout(socket: MavlinkSocket) {

  val map = iframe(
    width := 100.pct,
    height := 350.px,
    "frameborder".attr := "0",
    "scrolling".attr := "no",
    "marginheight".attr := "0",
    "marginwidth".attr := "0",
    src := "http://www.openstreetmap.org/export/embed.html?bbox=6.5611016750335684%2C46.51718501017836%2C6.570038795471191%2C46.520577350893525&layer=mapnik")

  val feed = div(style := "width: 100%; height: 460px; color: #ffffff; background-color: #c2c2c2; text-align: center;")(
    p(style := "padding-top: 220px")("video feed"))

  def element(implicit env: Environment): html.Element = div(`class` := "container-fluid")(
    div(`class` := "row")(
      div(`class` := "col-xs-12")(
        div(`class` := "panel panel-default")(
          div(`class` := "panel-body")()))),
    div(`class` := "row")(
      div(`class` := "col-xs-4")(
        div(`class` := "panel panel-default")(
          div(`class` := "panel-body")(
            map))),
      div(`class` := "col-xs-5")(
        div(`class` := "panel panel-default")(
          div(`class` := "panel-body")(
            feed)),
        div(`class` := "panel panel-default")(
          div(`class` := "panel-body")(Primary(socket)))),
      div(`class` := "col-xs-3")(
        div(`class` := "panel panel-default")(
          div(`class` := "panel-body")(Communication(socket)))))).render

}