Commit 2202ca91 authored by Fjen Undso's avatar Fjen Undso
Browse files

html: update angular and cleanup js

parent 369498d8
[{"MaxBestand": 60, "Bild": "club-mate.png", "Name": "Club Mate", "Bestand": 15, "Preis": 100}, {"MaxBestand": 20, "Bild": "club-mate-icet.png", "Name": "Club Mate Ice-T", "Bestand": 11, "Preis": 100}, {"MaxBestand": 20, "Bild": "club-mate-granat.png", "Name": "Club Mate Granat", "Bestand": 17, "Preis": 100}, {"MaxBestand": 36, "Bild": "mio.jpg", "Name": "Mio Mate", "Bestand": 14, "Preis": 100}, {"MaxBestand": 24, "Bild": "club-mate-cola.png", "Name": "Club Mate Cola", "Bestand": 18, "Preis": 80}, {"MaxBestand": 24, "Bild": "fritz-kola.png", "Name": "Fritz Kola", "Bestand": 0, "Preis": 80}, {"MaxBestand": 24, "Bild": "fritz-kola-zuckerfrei.png", "Name": "Fritz Kola Zuckerfrei", "Bestand": 11, "Preis": 80}, {"MaxBestand": 24, "Bild": "mischmasch.jpg", "Name": "Fritz MischMasch", "Bestand": 0, "Preis": 80}, {"MaxBestand": 24, "Bild": "bionade.jpg", "Name": "Bionade", "Bestand": 23, "Preis": 80}, {"MaxBestand": 12, "Bild": "mineralwasser.jpg", "Name": "Mineralwasser", "Bestand": 0, "Preis": 50}]
\ No newline at end of file
[{"Name": "Club Mate", "Bild": "club-mate.png", "Bestand": 5, "Preis": 100, "MaxBestand": 60}, {"Name": "Club Mate Ice-T", "Bild": "club-mate-icet.png", "Bestand": 6, "Preis": 100, "MaxBestand": 20}, {"Name": "Club Mate Granat", "Bild": "club-mate-granat.png", "Bestand": 18, "Preis": 100, "MaxBestand": 20}, {"Name": "Club Mate Klein", "Bild": "club-mate-0.33.jpg", "Bestand": 0, "Preis": 80, "MaxBestand": 20}, {"Name": "Mio Mio Mate", "Bild": "mio.jpg", "Bestand": 36, "Preis": 100, "MaxBestand": 36}, {"Name": "Club Mate Cola", "Bild": "club-mate-cola.png", "Bestand": 40, "Preis": 80, "MaxBestand": 24}, {"Name": "fritz-kola", "Bild": "fritz/FritzKola.png", "Bestand": 0, "Preis": 80, "MaxBestand": 24}, {"Name": "fritz-kola Zuckerfrei", "Bild": "fritz/FritzKola_zuckerfrei.png", "Bestand": 0, "Preis": 80, "MaxBestand": 24}, {"Name": "MischMasch", "Bild": "fritz/Mischmasch.png", "Bestand": 46, "Preis": 80, "MaxBestand": 24}, {"Name": "fritz-limo Zitrone", "Bild": "fritz/Fritz-limo_zitrone.png", "Bestand": 0, "Preis": 80, "MaxBestand": 24}, {"Name": "fritz-limo Orange", "Bild": "fritz/Fritz-limo_orange.png", "Bestand": 0, "Preis": 80, "MaxBestand": 24}, {"Name": "fritz-limo Honigmelone", "Bild": "fritz/Fritz-limo_melone.png", "Bestand": 0, "Preis": 80, "MaxBestand": 24}, {"Name": "fritz-limo Apfel Kirsch Holunder", "Bild": "fritz/Fritz-limo_akh.png", "Bestand": 0, "Preis": 80, "MaxBestand": 24}, {"Name": "fritz-spritz Bio-Rhabarberschorle", "Bild": "fritz/FritzSpritz_rhabarbersaftschorle.png", "Bestand": 0, "Preis": 100, "MaxBestand": 24}, {"Name": "fritz-spritz Bio-Apfelschorle", "Bild": "fritz/FritzSpritz_apfelsaftschorle.png", "Bestand": 48, "Preis": 100, "MaxBestand": 24}, {"Name": "fritz-spritz Bio-Traubenschorle", "Bild": "fritz/FritzSpritz_traubensaftschorle.png", "Bestand": 0, "Preis": 100, "MaxBestand": 24}, {"Name": "Bionade", "Bild": "bionade.jpg", "Bestand": 0, "Preis": 100, "MaxBestand": 24}, {"Name": "Hermann Zitrone", "Bild": "hermann_zitrone.jpg", "Bestand": 0, "Preis": 80, "MaxBestand": 20}, {"Name": "Premium Cola", "Bild": "premium.jpg", "Bestand": 0, "Preis": 100, "MaxBestand": 40}, {"Name": "Spezi", "Bild": "spezi.png", "Bestand": 0, "Preis": 100, "MaxBestand": 20}, {"Name": "Mineralwasser", "Bild": "mineralwasser.jpg", "Bestand": 24, "Preis": 50, "MaxBestand": 12}]
......@@ -16,19 +16,20 @@
<script>
var app = angular.module('myApp', []);
app.controller('getraenkeCtrl', function($scope, $http) {
var update = function() {
$http.get('data/getraenke.json').success(function(data) {
$scope.names = data;
app.controller('getraenkeCtrl', function($http) {
var self = this;
function update() {
$http.get('data/getraenke.json').then(function(response) {
self.drinks = response.data;
for (var i = 0; i < $scope.names.length; i++) {
$scope.names[i].Prozent = $scope.names[i].Bestand / $scope.names[i].MaxBestand * 100;
$scope.names[i].color = "green";
if ($scope.names[i].Prozent < 40) {
$scope.names[i].color = "orange";
for (let i = 0; i < self.drinks.length; i++) {
self.drinks[i].Prozent = self.drinks[i].Bestand / self.drinks[i].MaxBestand * 100;
self.drinks[i].color = "green";
if (self.drinks[i].Prozent < 40) {
self.drinks[i].color = "orange";
}
if ($scope.names[i].Prozent < 20) {
$scope.names[i].color = "red";
if (self.drinks[i].Prozent < 20) {
self.drinks[i].color = "red";
}
}
});
......@@ -37,54 +38,51 @@ app.controller('getraenkeCtrl', function($scope, $http) {
setInterval(update, 5000);
});
app.controller('musicCtrl', function($scope, $http) {
var update = function() {
$http.get('data/music.json').success(function(data) {
app.controller('musicCtrl', function($http) {
var self = this;
function update() {
$http.get('data/music.json').then(function(response) {
var data = response.data;
if (data.artist) {
$scope.title = data.title;
$scope.artist = data.artist;
$scope.album = data.album;
self.title = data.title;
self.artist = data.artist;
self.album = data.album;
} else {
// upnp streams
$scope.title = data.name;
$scope.artist = data.file;
$scope.album = '';
self.title = data.name;
self.artist = data.file;
self.album = '';
}
if (data['x-albumimage']) {
$scope.pic_url = data['x-albumimage'];
$scope.showpic = true;
$scope.shownopic = false;
} else {
$scope.showpic = false;
$scope.shownopic = true;
}
self.pic_url = data['x-albumimage'];
});
}
update();
setInterval(update, 5000);
});
app.controller('tempCtrl', function($scope, $http) {
var update = function() {
$http.get('data/temp.json').success(function(data) {
$scope.indoor = data.indoor;
$scope.outdoor = data.outdoor;
app.controller('tempCtrl', function($http) {
var self = this;
function update() {
$http.get('data/temp.json').then(function(response) {
var data = response.data;
self.indoor = data.indoor;
self.outdoor = data.outdoor;
});
}
update();
setInterval(update, 5000);
setInterval(update, 30000);
});
app.controller('personCtrl', function($scope, $http) {
var update = function() {
$http.get('data/pir.json').success(function(data) {
app.controller('personCtrl', function($http) {
var self = this;
function update() {
$http.get('data/pir.json').then(function(response) {
var data = response.data;
self.movement = data.movement;
if (data.movement) {
$scope.color = "green";
$scope.icon = "supervisor_account";
self.icon = "supervisor_account";
} else {
$scope.color = "red";
$scope.icon = "not_interested";
self.icon = "not_interested";
}
});
}
......@@ -95,14 +93,14 @@ app.controller('personCtrl', function($scope, $http) {
</head>
<body class="blue-grey lighten-5" ng-app="myApp">
<nav class="orange darken-2" role="navigation">
<div class="nav-wrapper container" ng-controller="tempCtrl">
<span class="chip">Innen: {{indoor}} °C</span>
<div id="logo-container" href="#" class="brand-logo center">
<img id="header-logo"src="images/honeypot-152.png">
<div class="nav-wrapper container" ng-controller="tempCtrl as temp">
<span class="chip">Innen: {{ temp.indoor }} °C</span>
<div id="logo-container" class="brand-logo center">
<img id="header-logo" src="images/honeypot-152.png">
<span class="hide-on-small-only">Honeypot Status</span>
</div>
<div class="right">
<span class="chip" style="">Außen: {{outdoor}} °C</span>
<span class="chip" style="">Außen: {{ temp.outdoor }} °C</span>
</div>
</div>
</nav>
......@@ -110,15 +108,15 @@ app.controller('personCtrl', function($scope, $http) {
<div class="parallax-container">
<div class="parallax"><img src="images/music2.jpg"></div>
<div class="container">
<div class="section" ng-controller="musicCtrl">
<div class="section" ng-controller="musicCtrl as music">
<h3 class="center white-text">Music</h3>
<ul class="collection z-depth-1 hoverable col s5">
<li class="collection-item avatar white-text" style="background-color: rgba(0,0,0,0.6);">
<img class="circle" ng-class="{hidden: shownopic}" src="{{pic_url}}">
<i class="material-icons circle red" ng-class="{hidden: showpic}">play_arrow</i>
<img class="circle" ng-hide="!music.pic_url" ng-src="{{ music.pic_url }}">
<i class="material-icons circle red" ng-hide="music.pic_url">play_arrow</i>
<span class="title">Now Playing:</span>
<p class="orange-text" style="font-size: 130%">{{title}}</p>
<p class="orange-text" style="font-size: 130%">{{artist}} - {{album}}</p>
<p class="orange-text" style="font-size: 130%">{{ music.title }}</p>
<p class="orange-text" style="font-size: 130%">{{ music.artist }} - {{ music.album }}</p>
</li>
</ul>
</div>
......@@ -126,16 +124,16 @@ app.controller('personCtrl', function($scope, $http) {
</div>
<div class="container">
<div class="section" ng-controller="getraenkeCtrl">
<div class="section" ng-controller="getraenkeCtrl as g">
<h3 class="center orange-text text-accent-4">Getränke</h3>
<ul class="collection z-depth-1 hoverable">
<li class="collection-item avatar black-text" ng-repeat="x in names">
<img src="images/{{x.Bild}}" alt="" class="circle">
<div class="chip">{{x.Preis}} Cent</div>
<span class="title">{{x.Name}}</span>
<p>Anzahl: {{x.Bestand}} </p>
<div class="progress grey lighten-2"><div class="determinate {{x.color}}" style="width: {{x.Prozent}}%"></div></div>
<li class="collection-item avatar black-text" ng-repeat="d in g.drinks">
<img ng-src="images/{{ d.Bild }}" alt="" class="circle">
<div class="chip">{{ d.Preis }} Cent</div>
<span class="title">{{ d.Name }}</span>
<p>Anzahl: {{ d.Bestand }} </p>
<div class="progress grey lighten-2"><div class="determinate {{ d.color }}" style="width: {{ d.Prozent }}%"></div></div>
</li>
</ul>
</div>
......@@ -169,9 +167,9 @@ app.controller('personCtrl', function($scope, $http) {
</div>
</div>
<div class="fixed-action-btn" ng-controller="personCtrl">
<a class="btn-floating btn-large {{color}}" title="Raumbelegung">
<i class="large material-icons">{{icon}}</i>
<div class="fixed-action-btn" ng-controller="personCtrl as person">
<a class="btn-floating btn-large" ng-class="{green: person.movement, red: !person.movement}" title="Raumbelegung">
<i class="large material-icons">{{ person.icon }}</i>
</a>
</div>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
Supports Markdown
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