added selectbox

app/package.json

@@ -26,6 +26,7 @@
   },
   "homepage": "https://github.com/hjacobs/kube-ops-view#readme",
   "dependencies": {
+    "pixi-display": "^1.0.1",
     "pixi.js": "^4.3.0",
     "webpack-dev-server": "^1.16.2"
   },

app/src/app.js

@@ -1,8 +1,11 @@
 import Tooltip from './tooltip.js'
 import Cluster from './cluster.js'
 import {Pod, ALL_PODS} from './pod.js'
+import SelectBox from './selectbox'
+import 'pixi-display'
 const PIXI = require('pixi.js')
 
+
 export default class App {
 
     constructor() {
@@ -46,6 +49,8 @@ export default class App {
         //Create a container object called the `stage`
         const stage = new PIXI.Container()
 
+        stage.displayList = new PIXI.DisplayList()
+
         const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 18, fill: 0xaaaaff})
         searchPrompt.x = 20
         searchPrompt.y = 5
@@ -60,6 +65,28 @@ export default class App {
         searchText.y = 5
         stage.addChild(searchText)
 
+        const items = [
+            {
+                text: 'Name', sorterFn: () => {}
+            },
+            {
+                text: 'Age', sorterFn: () => {}
+            },
+            {
+                text: 'Memory', sorterFn: () => {}
+            },
+            {
+                text: 'CPU', sorterFn: () => {}
+            },
+
+        ]
+        const selectBox = new SelectBox(items)
+        selectBox.x = 265
+        selectBox.y = 5
+        const mainLayer = new PIXI.DisplayGroup(1, true)
+        selectBox.displayGroup = mainLayer
+        stage.addChild(selectBox.draw())
+
         const viewContainer = new PIXI.Container()
         viewContainer.x = 20
         viewContainer.y = 40
@@ -132,6 +159,7 @@ export default class App {
         PIXI.ticker.shared.add(tick)
         this.stage.addChild(pod)
     }
+
     update(clusters) {
         this.viewContainer.removeChildren()
         var y = 0

app/src/selectbox.js

@@ -0,0 +1,81 @@
+const PIXI = require('pixi.js')
+
+export default class SelectBox extends PIXI.Graphics {
+    constructor(items) {
+        super()
+        this.items = items
+        this.count = 0
+        this.text = new PIXI.Text(this.items[this.count].text, {
+            fontFamily: 'ShareTechMono',
+            fontSize: 14,
+            fill: 0xaaaaff,
+            align: 'center'
+        })
+        this.text.x = 10
+        this.text.y = 10
+        this.addChild(this.text)
+    }
+
+    onForwardPressed() {
+        const selectBox = this
+        if (selectBox.count + 1 < this.items.length) {
+            selectBox.count++
+        } else {
+            selectBox.count = 0
+        }
+        selectBox.text.text = selectBox.items[selectBox.count].text
+    }
+
+    onBackPressed() {
+        const selectBox = this
+        if (selectBox.count - 1 > 0) {
+            selectBox.count--
+        } else {
+            selectBox.count = selectBox.items.length - 1
+        }
+        selectBox.text.text = selectBox.items[selectBox.count].text
+    }
+
+    draw() {
+        const selectBox = this
+
+        const backArrow = new PIXI.Graphics()
+        const forwardArrow = new PIXI.Graphics()
+        backArrow.interactive = true
+        forwardArrow.interactive = true
+        selectBox.interactive = true
+        // set a fill and line style
+
+        // draw a triangle
+        backArrow.lineStyle(2, 0x000000, 1)
+        backArrow.beginFill(0x1b7c87, 0.5)
+        backArrow.moveTo(0, 2)
+        backArrow.lineTo(-20, 15)
+        backArrow.lineTo(0, 28)
+        backArrow.lineTo(0, 2)
+        backArrow.endFill()
+        selectBox.addChild(backArrow)
+        selectBox.lineStyle(2, 0x000000, 1)
+        selectBox.beginFill(0x1b7c87, 0.5)
+        selectBox.drawRoundedRect(4, 0, 100, 30, 10)
+        selectBox.endFill()
+
+        forwardArrow.lineStyle(2, 0x000000, 1)
+        forwardArrow.beginFill(0x1b7c87, 0.5)
+        forwardArrow.moveTo(108, 2)
+        forwardArrow.lineTo(128, 15)
+        forwardArrow.lineTo(108, 28)
+        forwardArrow.lineTo(108, 2)
+        forwardArrow.endFill()
+        selectBox.addChild(forwardArrow)
+
+        backArrow.on('mousedown', selectBox.onBackPressed.bind(this))
+        backArrow.on('touchstart', selectBox.onBackPressed.bind(this))
+        forwardArrow.on('mousedown', selectBox.onForwardPressed.bind(this))
+        forwardArrow.on('touchstart', selectBox.onForwardPressed.bind(this))
+
+        return selectBox
+    }
+
+}
+