gui.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. define([ "chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
  2. "linklist", "nodelist", "simplenodelist", "infobox/main",
  3. "proportions", "forcegraph", "title" ],
  4. function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
  5. Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph, Title) {
  6. return function (config, router) {
  7. var self = this
  8. var dataTargets = []
  9. var latestData
  10. var content
  11. var contentDiv
  12. var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5])
  13. var sidebar
  14. function dataTargetRemove(d) {
  15. dataTargets = dataTargets.filter( function (e) { return d !== e })
  16. }
  17. function removeContent() {
  18. if (!content)
  19. return
  20. router.removeTarget(content)
  21. dataTargetRemove(content)
  22. content.destroy()
  23. contentDiv.removeChild(content.div)
  24. content = null
  25. }
  26. function addContent(K) {
  27. removeContent()
  28. content = new K(config, linkScale, sidebar, router)
  29. contentDiv.appendChild(content.div)
  30. if (latestData)
  31. content.setData(latestData)
  32. dataTargets.push(content)
  33. router.addTarget(content)
  34. router.reload()
  35. }
  36. contentDiv = document.createElement("div")
  37. contentDiv.classList.add("content")
  38. document.body.appendChild(contentDiv)
  39. sidebar = new Sidebar(document.body)
  40. var buttonToggle = document.createElement("button")
  41. buttonToggle.classList.add("contenttoggle")
  42. buttonToggle.classList.add("next-graph")
  43. buttonToggle.onclick = function () {
  44. if (content.constructor === Map) {
  45. buttonToggle.classList.remove("next-graph")
  46. buttonToggle.classList.add("next-map")
  47. addContent(ForceGraph)
  48. } else {
  49. buttonToggle.classList.remove("next-map")
  50. buttonToggle.classList.add("next-graph")
  51. addContent(Map)
  52. }
  53. }
  54. contentDiv.appendChild(buttonToggle)
  55. var title = new Title(config)
  56. var infobox = new Infobox(config, sidebar, router)
  57. var tabs = new Tabs()
  58. var overview = new Container()
  59. var meshstats = new Meshstats()
  60. var newnodeslist = new SimpleNodelist(config, "new", "firstseen", router, "Neue Knoten")
  61. var lostnodeslist = new SimpleNodelist(config, "lost", "lastseen", router, "Verschwundene Knoten")
  62. var nodelist = new Nodelist(router)
  63. var linklist = new Linklist(linkScale, router)
  64. var statistics = new Proportions()
  65. dataTargets.push(meshstats)
  66. dataTargets.push(newnodeslist)
  67. dataTargets.push(lostnodeslist)
  68. dataTargets.push(nodelist)
  69. dataTargets.push(linklist)
  70. dataTargets.push(statistics)
  71. overview.add(meshstats)
  72. overview.add(newnodeslist)
  73. overview.add(lostnodeslist)
  74. sidebar.add(tabs)
  75. tabs.add("Übersicht", overview)
  76. tabs.add("Alle Knoten", nodelist)
  77. tabs.add("Verbindungen", linklist)
  78. tabs.add("Statistiken", statistics)
  79. router.addTarget(title)
  80. router.addTarget(infobox)
  81. addContent(Map)
  82. self.setData = function (data) {
  83. latestData = data
  84. dataTargets.forEach(function (d) {
  85. d.setData(data)
  86. })
  87. }
  88. return self
  89. }
  90. })