From bc95a986520062987d13f17a1073b156dfba3251 Mon Sep 17 00:00:00 2001 From: Christian Lohmann Date: Thu, 22 Dec 2016 14:33:25 +0100 Subject: [PATCH] added selectbox --- app/package.json | 1 + app/src/app.js | 58 +++++++++++++++++++++++-------- app/src/selectbox.js | 81 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 125 insertions(+), 15 deletions(-) create mode 100644 app/src/selectbox.js diff --git a/app/package.json b/app/package.json index f15bfff..6976fe4 100644 --- a/app/package.json +++ b/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" }, diff --git a/app/src/app.js b/app/src/app.js index f4a57be..54c23e6 100644 --- a/app/src/app.js +++ b/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 {Pod, ALL_PODS} from './pod.js' +import SelectBox from './selectbox' +import 'pixi-display' const PIXI = require('pixi.js') + export default class App { constructor() { @@ -20,7 +23,7 @@ export default class App { for (const pod of node.children) { const name = pod.pod && pod.pod.name if (name) { - if (!name.includes(searchString)){ + if (!name.includes(searchString)) { pod.filters = [filter] } else { // TODO: pod might have other filters set.. @@ -46,11 +49,13 @@ 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 - PIXI.ticker.shared.add(function(_) { - var v = Math.sin((PIXI.ticker.shared.lastTime % 2000)/2000.* Math.PI) + PIXI.ticker.shared.add(function (_) { + var v = Math.sin((PIXI.ticker.shared.lastTime % 2000) / 2000. * Math.PI) searchPrompt.alpha = v }) stage.addChild(searchPrompt) @@ -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 @@ -77,7 +104,7 @@ export default class App { event.preventDefault() } else if (event.key == 'Backspace') { - this.filterString = this.filterString.slice(0, Math.max(0, this.filterString.length-1)) + this.filterString = this.filterString.slice(0, Math.max(0, this.filterString.length - 1)) this.filter() event.preventDefault() } @@ -98,7 +125,7 @@ export default class App { const pod = new Pod(originalPod.pod, this.tooltip, false) pod.draw() const targetPosition = new PIXI.Point(globalX, globalY) - const angle = Math.random()*Math.PI*2 + const angle = Math.random() * Math.PI * 2 const cos = Math.cos(angle) const sin = Math.sin(angle) const distance = Math.max(200, Math.random() * Math.min(window.innerWidth, window.innerHeight)) @@ -111,7 +138,7 @@ export default class App { pod._progress = 0 originalPod.visible = false const that = this - const tick = function(t) { + const tick = function (t) { // progress goes from 0 to 1 const progress = Math.min(1, pod._progress + (0.01 * t)) const scale = 1 + ((1 - progress) * 140) @@ -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 @@ -154,7 +182,7 @@ export default class App { this.seenPods[key] = pod const globalPos = pod.toGlobal({x: 0, y: 0}) if (!firstTime && i < 10) { - window.setTimeout(function() { + window.setTimeout(function () { that.animatePodCreation(pod, globalPos.x, globalPos.y) }, 100 * i) } @@ -174,13 +202,13 @@ export default class App { function fetchData() { fetch('kubernetes-clusters', {credentials: 'include'}) - .then(function(response) { - return response.json() - }) - .then(function(json) { - const clusters = json.kubernetes_clusters - that.update(clusters) - }) + .then(function (response) { + return response.json() + }) + .then(function (json) { + const clusters = json.kubernetes_clusters + that.update(clusters) + }) window.setTimeout(fetchData, 5000) } diff --git a/app/src/selectbox.js b/app/src/selectbox.js new file mode 100644 index 0000000..532f7a4 --- /dev/null +++ b/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 + } + +} +