Commit 26ddb843 authored by Matthias Möller's avatar Matthias Möller

Angepasste component-Einfügung

parent f2ee2d79
......@@ -4,8 +4,18 @@ import layout from '../templates/components/explorviz-frontend-plugin-bci';
export default Ember.Component.extend({
layout:layout,
emotivWebsocket: Ember.inject.service("emotiv-websocket"),
tagName: "span",
classNames: ["glyphicon", "glyphicon-user"],
tagName: "a",
classNames:["pointer"],
classNameBindings: ["status"],
status : "disconnected"
status : "",
click: function(){
console.log("clicked");
this.get("emotivWebsocket").start();
},
init(){
this._super(...arguments);
this.status=Ember.computed("emotivWebsocket.status", function(){return this.get("emotivWebsocket").status;}.bind(this));
this.click=this.click.bind(this);
}
});
export function initialize(applicationInstance) {
let addonService = applicationInstance.lookup("service:addon-service");
addonService.get("navbarLabels").push("explorviz-frontend-plugin-bci");
let addonService = applicationInstance.lookup("service:addon-button-service");
addonService.get("addonNavbarRight").push("explorviz-frontend-plugin-bci");
/*let addon = {
"domID" : "emotivSignal",
"className" : "glyphicon glyphicon-signal",
......@@ -9,7 +9,7 @@ export function initialize(applicationInstance) {
addonService.get("navbarLabels").push(addon);
//Fügt eine neue Action in eine Komponente hinzu
let component = applicationInstance.lookup("component:addon-button");
let connectBCI =
let connectBCI =
function(domID){
let button = document.getElementById(domID);
let isConnected = (button.dataset.type) ? button.dataset.type : "diconnected";
......@@ -21,7 +21,7 @@ export function initialize(applicationInstance) {
}
};
component.actions["connectBCI"] = connectBCI;*/
}
export default {
......
import Ember from 'ember';
export default Ember.Service.extend({
websockets : Ember.inject.service("websockets"),
init: function(){
const self = this;
this._super();
},
socketReference:null,
status:"",
start: function(){
let websockets = Ember.inject.service("emotiv-websocket");
let sockets = websockets.get("websockets").socketFor("ws://localhost:1313/");
sockets.on("open", this.openMessageHandler, this);
sockets.on("message", this.myMessageHandler, this);
sockets.on("close", this.myCloseHandler, this);
this.set("status", "connecting");
let sockets = this.get("socketReference");
if(sockets){
sockets.reconnect();
}else{
sockets = this.get("websockets").socketFor("ws://localhost:1313/");
sockets.on("open", this.openMessageHandler, this);
sockets.on("message", this.myMessageHandler, this);
sockets.on("close", this.myCloseHandler, this);
this.set("socketReference", sockets);
}
},
openMessageHandler: function(event){
let signalButton = document.getElementById("emotivSignal");
signalButton.dataset.type = "connected";
this.set("status", "connected");
},
myMessageHandler: function(event){
let data = event.data;
console.log(data);
},
myCloseHandler: function(event){
console.log("closed");
let button = document.getElementById("emotivSignal");
button.dataset.type = "disconnected";
Ember.run.later(this, function(){this.set("status", "disconnected")}, 1000);
}
});
......@@ -4,18 +4,31 @@
100% {color:grey;}
}
.glyphicon.glyphicon-signal[data-type="connected"]{
@keyframes disconnected{
0% {color: grey;}
50% {color :red;}
100%{color: grey;}
}
.glyphicon.glyphicon-signal.connected{
color: #7FFF00;
}
.glyphicon.glyphicon-signal[data-type="disconnected"]{
.glyphicon.glyphicon-signal.disconnected{
color: grey;
cursor: pointer;
animation-name: disconnected;
animation-duration: 1s;
animation-iteration-count: 1;
}
.glyphicon.glyphicon-signal[data-type="connecting"]{
.glyphicon.glyphicon-signal.connecting{
animation-name: connecting;
animation-duration: 1s;
animation-iteration-count: infinite;
cursor: wait;
}
\ No newline at end of file
}
.pointer:{
cursor: pointer;
}
<span class="glyphicon glyphicon-signal {{status}}">
</span>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment