diff --git a/.scalafmt.conf b/.scalafmt.conf new file mode 100644 index 0000000..8134e97 --- /dev/null +++ b/.scalafmt.conf @@ -0,0 +1,2 @@ +version = "3.7.15" +runner.dialect = scala3 \ No newline at end of file diff --git a/build.sbt b/build.sbt index 02dcfde..b1ae84d 100644 --- a/build.sbt +++ b/build.sbt @@ -25,4 +25,5 @@ lazy val fahrtenbuch = project.in(file(".")) * It provides static types for the browser DOM APIs. */ libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.8.0", + libraryDependencies += "com.raquo" %%% "laminar" % "17.2.1" ) diff --git a/index.html b/index.html index 2ad7b1a..e686c71 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,11 @@ - Vite App -
+
diff --git a/javascript.svg b/javascript.svg deleted file mode 100644 index f9abb2b..0000000 --- a/javascript.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/main.js b/main.js index 727b4ea..0b26a91 100644 --- a/main.js +++ b/main.js @@ -1,23 +1,2 @@ import './style.css' -import javascriptLogo from './javascript.svg' -import { setupCounter } from './counter.js' - -document.querySelector('#app').innerHTML = ` -
- - - - - - -

Hello Vite!

-
- -
-

- Click on the Vite logo to learn more -

-
-` - -setupCounter(document.querySelector('#counter')) +import 'scalajs:main.js' diff --git a/package-lock.json b/package-lock.json index ce032f5..0f452ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,13 @@ "": { "name": "fahrtenbuch", "version": "0.0.0", + "dependencies": { + "@material-design-icons/font": "^0.14.15", + "@mdi/font": "^7.4.47", + "bulma": "^1.0.4" + }, "devDependencies": { + "@scala-js/vite-plugin-scalajs": "^1.0.0", "vite": "^4.1.0" } }, @@ -385,6 +391,34 @@ "node": ">=12" } }, + "node_modules/@material-design-icons/font": { + "version": "0.14.15", + "resolved": "https://registry.npmjs.org/@material-design-icons/font/-/font-0.14.15.tgz", + "integrity": "sha512-h4YFZnYxNuciEKR0jAOekaQmIg2UGUSxbnoyzo4OdE42gy9QB3UnrjLcASiDy9ra8fqrcHy+NqxTHx7F86BH0A==", + "license": "Apache-2.0" + }, + "node_modules/@mdi/font": { + "version": "7.4.47", + "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.4.47.tgz", + "integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==", + "license": "Apache-2.0" + }, + "node_modules/@scala-js/vite-plugin-scalajs": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@scala-js/vite-plugin-scalajs/-/vite-plugin-scalajs-1.0.0.tgz", + "integrity": "sha512-QqeOXFWiwZyl4LrtAg7ZMeoShVWTD+4qcmuv0M7QNCu8QYzf+h3ysozbmyWYJKVpxJYMLnuSZZSiygD8Tzh+eg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "vite": "^4.1.4" + } + }, + "node_modules/bulma": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.4.tgz", + "integrity": "sha512-Ffb6YGXDiZYX3cqvSbHWqQ8+LkX6tVoTcZuVB3lm93sbAVXlO0D6QlOTMnV6g18gILpAXqkG2z9hf9z4hCjz2g==", + "license": "MIT" + }, "node_modules/esbuild": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", diff --git a/package.json b/package.json index 7e2da23..71c1e9a 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,12 @@ "preview": "vite preview" }, "devDependencies": { + "@scala-js/vite-plugin-scalajs": "^1.0.0", "vite": "^4.1.0" + }, + "dependencies": { + "@material-design-icons/font": "^0.14.15", + "@mdi/font": "^7.4.47", + "bulma": "^1.0.4" } -} \ No newline at end of file +} diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/main/scala/fahrtenbuch/Entry.scala b/src/main/scala/fahrtenbuch/Entry.scala new file mode 100644 index 0000000..00931db --- /dev/null +++ b/src/main/scala/fahrtenbuch/Entry.scala @@ -0,0 +1,11 @@ +package fahrtenbuch + +import scala.scalajs.js.Date + +case class Entry(startKm: Double, endKm: Double, date: Date, animal: String, paid: Boolean, driver: String): + val distance = endKm - startKm + + // 13 cent pro km, 5 cent Abnutzung + def costGas: Double = distance * 0.13 + def costWear: Double = distance * 0.05 + def costTotal: Double = costGas + costWear diff --git a/src/main/scala/fahrtenbuch/main.scala b/src/main/scala/fahrtenbuch/main.scala index b4f432c..1b90516 100644 --- a/src/main/scala/fahrtenbuch/main.scala +++ b/src/main/scala/fahrtenbuch/main.scala @@ -1,44 +1,64 @@ -package livechart +package fahrtenbuch import scala.scalajs.js import scala.scalajs.js.annotation.* - import org.scalajs.dom +import com.raquo.laminar.api.L.{*, given} +import scala.scalajs.js.Date // import javascriptLogo from "/javascript.svg" -@js.native @JSImport("/javascript.svg", JSImport.Default) -val javascriptLogo: String = js.native +//@js.native @JSImport("/javascript.svg", JSImport.Default) +//val javascriptLogo: String = js.native @main -def LiveChart(): Unit = - dom.document.querySelector("#app").innerHTML = s""" -
- - - - - - -

Hello Scala.js!

-
- -
-

- Click on the Vite logo to learn more -

-
- """ +def Fahrtenbuch(): Unit = + renderOnDomContentLoaded( + dom.document.getElementById("app"), + Main.appElement() + ) + println("Hello, Worlds!") - setupCounter(dom.document.getElementById("counter")) -end LiveChart +object Main { -def setupCounter(element: dom.Element): Unit = - var counter = 0 + val entries = List( + Entry(100.0, 200.0, new Date(), "🐷", true, "Gesine"), + Entry(200.0, 300.0, new Date(), "Dog", false, "Bob") + ) - def setCounter(count: Int): Unit = - counter = count - element.innerHTML = s"count is $counter" - - element.addEventListener("click", e => setCounter(counter + 1)) - setCounter(0) -end setupCounter + def appElement(): HtmlElement = + div( + cls := "app content", + h1("Fahrtenbuch"), + table( + cls := "table", + thead( + tr( + th("Date"), + th("Fahrer*in"), + th("Start Km"), + th("Ende Km"), + th("Tier"), + th("Abnutzung"), + th("Gesamtkosten"), + th("Bezahlt") + ) + ), + tbody( + entries.map(entry => + tr( + td(entry.date.toDateString()), + td(entry.driver), + td(entry.startKm), + td(entry.endKm), + td(entry.animal), + td(entry.costWear), + td(entry.costTotal), + td(entry.paid), + td(span(cls := "icon", i(cls := "mdi mdi-pencil-box"))) + ) + ) + ) + ), + button(cls := "button is-primary", "Eintrag hinzufügen") + ) +} diff --git a/style.css b/style.css index abf9d15..553ac74 100644 --- a/style.css +++ b/style.css @@ -1,97 +1,2 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.vanilla:hover { - filter: drop-shadow(0 0 2em #f7df1eaa); -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} +@import '@mdi/font'; +@import "bulma/css/bulma.css"; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..3b0b85e --- /dev/null +++ b/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from "vite"; +import scalaJSPlugin from "@scala-js/vite-plugin-scalajs"; + +export default defineConfig({ + plugins: [scalaJSPlugin()], +});