diff options
Diffstat (limited to 'vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala')
| -rw-r--r-- | vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala | 83 |
1 files changed, 60 insertions, 23 deletions
diff --git a/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala b/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala index 4ec695e..0264e5f 100644 --- a/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala +++ b/vfd-dashboard/src/main/scala/vfd/dashboard/ui/Layout.scala @@ -1,12 +1,11 @@ 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.header import scalatags.JsDom.all.height import scalatags.JsDom.all.iframe import scalatags.JsDom.all.p @@ -16,12 +15,69 @@ import scalatags.JsDom.all.stringFrag import scalatags.JsDom.all.stringPixelStyle import scalatags.JsDom.all.style import scalatags.JsDom.all.width +import scalatags.JsDom.all.button +import scalatags.JsDom.all.id +import scalatags.JsDom.all._ +import scalatags.jsdom._ +import scalatags.jsdom.Frag import vfd.dashboard.Environment import vfd.dashboard.MavlinkSocket import vfd.dashboard.ui.panels.Communication import vfd.dashboard.ui.panels.Primary +import org.scalajs.dom.MouseEvent +import org.scalajs.dom + +class Layout(socket: MavlinkSocket)(implicit env: Environment) { + + private def panel(contents: Frag*) = div(`class` := "d-panel")(contents: _*) + + def layout = + div(`class` := "d-container d-column")( + div(`class` := "d-above")( + top), + div(`class` := "d-above d-container d-row")( + panel(modes), + panel(infos)), + div(`class` := "d-container d-row")( + div(`class` := "d-container d-details")( + panel("foo")), + div(`class` := "d-container d-left")( + left), + div(`class` := "d-container d-column d-middle")( + div(`class` := "d-container d-center")( + center), + div(`class` := "d-container d-below")( + below)), + div(`class` := "d-container d-right")( + right))) + + def top = header( + div("Flight Control Panel"), + div("00:00:00"), + div("System #")) -class Layout(socket: MavlinkSocket) { + def left = panel(map) + def center = panel(feed) + def below = panel(Primary(socket)) + def right = panel(Communication(socket)) + + def mode(name: String, kind: String, on: Boolean = false) = div(`class` := s"mode $kind ${if (!on) "off"}")(name) + + val modes = div( + mode("MANUAL", "warning", true), + mode("STABILIZED", "info", true), + mode("GUIDED", "success", true), + mode("AUTO", "success", true)) + + val infos = div( + mode("BAY", "info"), + mode("RECOVERY", "danger"), + mode("NOGPS", "warning", true), + mode("OVERLOAD", "danger", true), + mode("BATTERY", "danger", false), + mode("LINK", "danger", true), + mode("SOCKET", "danger", true), + div(style := "float: right")(mode("CRITICAL", "danger", true))) val map = iframe( width := 100.pct, @@ -35,24 +91,5 @@ class Layout(socket: MavlinkSocket) { 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 - + def element: html.Element = layout.render }
\ No newline at end of file |