refactoring of webui and event based websocket layer (#219)

* make hyperion websocket api event based

* implement new websocket handling for generalconf

* migrate all webui stuff to new event based websocket api
some cleanup ... now all html templates are in content
refactoring of web stuff

* add hyperionport to global
start impl. removing advanced key

* separate dashboard
serverinfo is updated every 3 seconds automatily
add input selection
cleanup and remove not needed stuff

* prepare infrastructure for server sided file execution

* webui minor fixes

* fix compile
This commit is contained in:
redPanther
2016-09-03 15:54:33 +02:00
committed by GitHub
parent c17c3bd273
commit 4a27f3d43e
35 changed files with 842 additions and 865 deletions

View File

@@ -0,0 +1,91 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
<div class="introd">
<h4 lang="en" data-lang-token="dashboard_label_intro">The dashboard give you a quick overview about the status of Hyperion and show you the latest news of the Hyperion Blog.</h4>
</div>
<hr>
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-info-circle fa-fw"></i>
<span lang="en" data-lang-token="dashboard_label_infobox_title">Information</span>
</div>
<div class="panel-body">
<table class="table borderless">
<tbody>
<tr>
<td lang="en" data-lang-token="dashboard_label_infobox_currenthyp">Your Hyperion version:</td>
<td id="currentversion">unknown</td>
</tr>
<tr>
<td lang="en" data-lang-token="dashboard_label_infobox_latesthyp">Latest version:</td>
<td id="latestversion">unknown</td>
</tr>
<tr>
<td lang="en" data-lang-token="dashboard_label_infobox_leddevice">LED type:</td>
<td id="dash_leddevice">unknown</td>
</tr>
<tr>
<td lang="en" data-lang-token="dashboard_label_infobox_device">Device:</td>
<td id="dash_systeminfo"></td>
</tr>
</tbody>
</table>
<hr>
<span id="versioninforesult"></span>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-eye fa-fw"></i>
<span lang="en" data-lang-token="dashboard_label_componentbox_title">Components status</span>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Component</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kodi Watch</td>
<td><i class="fa fa-circle component-on"></i></td>
</tr>
<tr>
<td>Blackborder</td>
<td><i class="fa fa-circle component-off"></i></td>
</tr>
<tr>
<td>Booteffect</td>
<td><i class="fa fa-circle component-off"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-newspaper-o fa-fw"></i>
<span lang="en" data-lang-token="dashboard_label_newsbox_title">Latest blog posts</span>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->

View File

@@ -0,0 +1,25 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_effects_token">Effects</h1>
<div class="introd">
<h4 lang="en" data-lang-token="remote_effects_intro">The Effects remote enables you to set an effect for testing or demonstration purposes. Don't forget to stop it afterwards.</h4>
</div>
<hr>
<div class="col-lg-12" id="buttondiv">
<button type="button" class="btn btn-danger" id="effect_stop" onclick="requestPriorityClear()"><i class="fa fa-stop"></i></button><span lang="en" data-lang-token="remote_effects_label_stopeffect">Stop Effect</span><br />
</div>
</div>
</div>
</div>
<script>
$(document).ready( function() {
for(i = 0; i < parsedServerInfoJSON.info.effects.length; i++) {
//console.log(parsedServerInfoJSON.info.effects[i].name);
var effectName = parsedServerInfoJSON.info.effects[i].name;
$('#buttondiv').append('<button type="button" class="btn btn-success" onclick="requestPlayEffect(\''+effectName+'\')"><i class="fa fa-play"></i></button> '+effectName+'<br />');
}
});
</script>

View File

@@ -0,0 +1,106 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_general_conf_token">General</h1>
<div class="introd">
<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
</div>
<hr>
<div class="col-lg-12">
<form id="generalConfForm"></form>
<div id='editor_holder'></div>
<button id='submit'>Submit (console.log)</button>
</div>
</div>
</div>
</div>
<script>
function removeAdvanced(obj,searchStack = [])
{
$.each(obj, function(key, val) {
if ( typeof(val) == 'object' )
{
searchStack.push(key);
if (! removeAdvanced(val,searchStack) )
searchStack.pop();
}
else if ( key == "advanced" && val == true )
{
console.log(searchStack);
return true;
}
});
return false;
}
$(hyperion).on("cmd-config-getschema", function(event) {
parsedConfSchemaJSON = event.response.result;
// remove all "advanced" options from schema
//removeAdvanced(parsedConfSchemaJSON); // not working atm
//console.log(JSON.stringify(parsedConfSchemaJSON));
schema_smoothing = parsedConfSchemaJSON.properties.smoothing;
schema_kodiVideoChecker = parsedConfSchemaJSON.properties.kodiVideoChecker;
schema_initialEffect = parsedConfSchemaJSON.properties.initialEffect;
//schema_grabber-v4l2 = parsedConfSchemaJSON.properties.grabber-v4l2;
schema_framegrabber = parsedConfSchemaJSON.properties.framegrabber;
schema_forwarder = parsedConfSchemaJSON.properties.forwarder;
schema_effects = parsedConfSchemaJSON.properties.effects;
schema_device = parsedConfSchemaJSON.properties.device;
schema_color = parsedConfSchemaJSON.properties.color;
schema_blackborderdetector = parsedConfSchemaJSON.properties.blackborderdetector;
schema_logger = parsedConfSchemaJSON.properties.logger;
schema_jsonServer = parsedConfSchemaJSON.properties.jsonServer;
schema_protoServer = parsedConfSchemaJSON.properties.protoServer;
schema_boblightServer = parsedConfSchemaJSON.properties.boblightServer;
schema_udpListener = parsedConfSchemaJSON.properties.udpListener;
schema_webConfig = parsedConfSchemaJSON.properties.webConfig;
var element = document.getElementById('editor_holder');
//JSONEditor.defaults.options.theme = 'bootstrap3';
var general_conf_editor = new JSONEditor(element,{
theme: 'bootstrap3',
disable_collapse: 'true',
form_name_root: 'sa',
disable_edit_json: 'true',
disable_properties: 'true',
no_additional_properties: 'true',
schema: {
title:' ',
properties: {
schema_blackborderdetector,
schema_color,
schema_device,
schema_effects,
schema_forwarder,
schema_framegrabber,
//schema_grabber-v4l2,
schema_initialEffect,
schema_kodiVideoChecker,
schema_smoothing,
schema_logger,
schema_jsonServer,
schema_protoServer,
schema_boblightServer,
schema_udpListener,
schema_webConfig
}
}
});
});
$(document).ready( function() {
requestServerConfigSchema();
document.getElementById('submit').addEventListener('click',function() {
// Get the value from the editor
console.log(general_conf_editor.getValue());
});
// $("[type='checkbox']").bootstrapSwitch();
});
</script>

View File

@@ -0,0 +1,119 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_huebridge_token">Hue Bridge</h1>
<div class="col-lg-12" >
<div class="col-lg-6" >
<span id="ip_alert" style="display:none; color:red; font-weight: bold;" lang="en" data-lang-token="hue_failure_ip_token">Please check your IP Address.</span>
<div class="form-group">
<label for="ip">IP:</label>
<input type="text" class="form-control" id="ip">
<label for="user" lang="en" data-lang-token="hue_label_username">Username:</label>
<input type="text" class="form-control" id="user" disabled>
<br />
<button type="button" class="btn btn-success" id="create_user_first"> <i class="fa fa-floppy-o"></i><span lang="en" data-lang-token="hue_button_create_user_token"> Create User</span></button>
</div>
</div>
</div>
</div>
</div>
<hr />
<div id="hue_lights" class="row">
</div>
</div>
<div class="modal fade bs-pair-modal-lg" id="pairmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Hue Bridge</h4>
</div>
<div class="modal-body">
<span lang="en" data-lang-token="hue_press_link_modal">Press link button on the Hue Bridge now and confirm with the "Pair" button.</span> <br /><br />
<span id="link_not_pressed" style="display:none; color: red" lang="en" data-lang-token="hue_press_link_modal_failure">Please press link button on your Hue Bridge.</span>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-success" id="create_user_second"> <i class="fa fa-floppy-o"></i><span lang="en" data-lang-token="hue_button_pair"> Pair</span>
</center>
</div>
</div>
</div>
</div>
<script>
$(document).ready( function() {
if($("#ip").val() != '' && $("#user").val() != '') {
get_hue_lights();
}
$("#create_user_first").on("click", function() {
var data = {"devicetype":"hyperion#"+Date.now()};
$.ajax({
type: "POST",
url: 'http://'+$("#ip").val()+'/api',
processData: false,
timeout: 1000,
contentType: 'application/json',
data: JSON.stringify(data),
success: function(r) {
$("#ip_alert").hide();
if (typeof r[0].error != 'undefined') {
if (r[0].error.description == "link button not pressed"){
$('#pairmodal').modal('show')
}
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#ip_alert").show();
}
});
});
$("#create_user_second").on("click", function() {
var data = {"devicetype":"my_hue_app#iphone pet2er"};
$.ajax({
type: "POST",
url: 'http://'+$("#ip").val()+'/api',
processData: false,
contentType: 'application/json',
data: JSON.stringify(data),
success: function(r) {
if (typeof r[0].error != 'undefined') {
$("#link_not_pressed").show();
}
if (typeof r[0].success != 'undefined') {
$('#pairmodal').modal('hide');
$('#user').val(r[0].success.username);
$("#link_not_pressed").hide();
get_hue_lights();
}
}
});
});
function get_hue_lights(){
$.ajax({
type: "GET",
url: 'http://'+$("#ip").val()+'/api/'+$("#user").val()+'/lights',
processData: false,
contentType: 'application/json',
success: function(r) {
for(var lightid in r){
//console.log(r[lightid].name);
$('#hue_lights').append('ID: '+lightid+' Name: '+r[lightid].name+'<br />');
}
}
});
}
});
</script>

View File

@@ -0,0 +1,34 @@
<div style="text-align:center;margin:auto;padding:auto">
<div id="hyperion_inputs" />
</div>
<script>
$(hyperion).on("cmd-serverinfo", function(event) {
var data = "";
var i;
for(i = 0; i < parsedServerInfoJSON.info.priorities.length; i++) {
var owner = parsedServerInfoJSON.info.priorities[i].owner;
var active = parsedServerInfoJSON.info.priorities[i].active;
var visible = parsedServerInfoJSON.info.priorities[i].visible;
var priority = parsedServerInfoJSON.info.priorities[i].priority;
var btn_type = "default";
if (active) btn_type = "warning";
if (visible) btn_type = "success";
data += '<button id="srcBtn'+i+'" type="button" class="btn btn-lg btn-'+btn_type+' btn_input_selection" style="margin:10px;min-width:200px" title="prio '+priority+'" onclick="requestSetSource('+priority+');">'+owner+'</button><br/>';
}
data += '<button id="srcBtn'+i+'" type="button" class="btn btn-lg btn-info btn_input_selection" style="margin:10px;min-width:200px" onclick="requestSetSource(\'auto\');">auto select</button><br/>';
$('#hyperion_inputs').html(data);
var max_width=200;
$('.btn_input_selection').each(function() {
elem_width = $(this).css('width')
elem_width = elem_width.substring(0, elem_width.length - 2);
if (elem_width > max_width)
max_width = elem_width;
});
$('.btn_input_selection').css("min-width",max_width+"px");
});
</script>

View File

@@ -0,0 +1,136 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="conf_kodi_label_title">Kodi Watch</span></h1>
<div class="col-lg-12">
<div class="introd">
<h4 lang="en" data-lang-token="conf_kodi_label_intro">The Kodi Watcher enables you to enable and disable the screencapture depending on Kodi state. This is not limited to the same machine, you could observe also a Kodi on any other device at your network.</h4>
</div>
<hr>
<div class="alert alert-info" role="alert">
<strong>HINT 1:</strong> In any case you need to enable the remote control for Kodi. Please checkout Wiki for instructions. LINK<br>
<strong>HINT 2:</strong> If you just use a USB-Grabber you could enable the Kodi Watch for this separately at the USB-Grabber page.
</div>
</div>
<div class="col-lg-7">
<div class="panel panel-default">
<div class="panel-body">
<!--Form example start-->
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-10" for="SetEnableKodiCheck">Aktiviere die Überwachung für Kodi:</label>
<div class="col-xs-2">
<div class="checkbox checkbox-success">
<input type="checkbox" id="SetEnableKodiCheck">
<label for="SetEnableKodiCheck"></label>
</div>
</div>
</div>
<hr>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiIP">Kodi IP-Adresse:</label>
<div class="col-xs-6">
<input type="text" class="form-control" id="SetKodiIP" placeholder="127.0.0.1">
<p>Set your Kodi IP, this could be also a running Kodi on your desktop computer</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiPort">Kodi TCP Port:</label>
<div class="col-xs-6">
<input type="text" class="form-control" id="SetKodiPort" placeholder="9090">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiMenu">LEDs an im Menü:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<label>
<input type="checkbox" id="SetKodiMenu" data-toggle="toggle">
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiVideo">LEDs an bei Video:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary pull-left">
<input type="checkbox" id="SetKodiVideo">
<label for="SetKodiVideo"></label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiMusic">LEDs an bei Musik:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="SetKodiMusic">
<label for="SetKodiMusic"></label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiPicture">LEDs an bei Bilder:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="SetKodiPicture">
<label for="SetKodiPicture"></label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiPause">LEDs an bei Pause:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="SetKodiPause">
<label for="SetKodiPause"></label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodi3D">LEDs an bei 3D:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="SetKodi3D">
<label for="SetKodi3D"></label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6" for="SetKodiScreensaver">LEDs an bei Bildschirmschoner:</label>
<div class="col-xs-6">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="SetKodiScreensaver">
<label for="SetKodiScreensaver"></label>
</div>
</div>
</div>
<!--form example end -->
</div>
</div>
</div>
<div class="col-lg-12">
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-target="#dkodiWatchInfo">
Kodi options explained
</div>
<div id="kodiWatchInfo" class="collapse panel-body">
<ul>
<li><strong>Enabled:</strong> If checked, the Kodi Checker is enabled</li>
<li><strong>Kodi IP-Address:</strong> The ip address of your kodi "127.0.01" means your kodi on the same machine (see hint below)</li>
<li><strong>TCP Port:</strong> The TCP port of your Kodi. If you changed nothing, the default "9090" is correct.</li>
<li><strong>Menu:</strong> If checked, the ambilight will be "ON" if you are at the kodi menu. "OFF" if unchecked</li>
<li><strong>Video:</strong> If checked, the ambilight will be "ON" if you are playing a video (Movie/TV-Show/Youtube etc). "OFF" if unchecked</li>
<li><strong>Picture:</strong> If checked, the ambilight will be "ON" if you are watching pictures. "OFF" if unchecked</li>
<li><strong>Audio:</strong> If checked, the ambilight will be "ON" if you are listening to audio (music/web radio etc). "OFF" if unchecked</li>
<li><strong>Screensaver:</strong> If checked, the ambilight will be "ON" if the screensaver is active. "OFF" if unchecked</li>
<li><strong>3D Check:</strong> If checked, Hyperion will be switching to the detected 3D mode. (SBS/TAB) no MVC yet!</li>
<li><strong>Pause:</strong> If checked, the ambilight will be "ON" if the Kodi player is at pause state. "OFF" if unchecked</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,58 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_colors_token">Colors</h1>
<div class="col-lg-1">
<span lang="en" data-lang-token="remote_colors_label_color">Set color: </span>
</div>
<div class="col-lg-3">
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
<div class="col-lg-8">
<button lang="en" data-lang-token="remote_colors_button_reset" type="button" class="btn btn-warning" id="reset_color">Reset Color</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#cp2').colorpicker({
format: 'rgb',
colorSelectors: {
'default': '#777777',
'primary': '#337ab7',
'success': '#5cb85c',
'info' : '#5bc0de',
'warning': '#f0ad4e',
'danger' : '#d9534f'
},
customClass: 'colorpicker-2x',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
alpha: {
maxTop: 200
},
}
});
$('#cp2').colorpicker().on('changeColor', function(e) {
color = e.color.toRGB();
requestSetColor(color.r, color.g, color.b);
});
});
$("#reset_color").on("click", requestPriorityClear);
</script>

View File

@@ -0,0 +1,26 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_component_token">Effects</h1>
<div class="introd">
<h4 lang="en" data-lang-token="remote_components_intro">The components remote enables you to disable and enable certain components of Hyperion during runtime. Keep in mind this persist just until the next reboot! To enable/disable components permament, use the configuration section.</h4>
</div>
<hr>
<div class="col-lg-12" id="componentsbutton">
</div>
</div>
</div>
</div>
<script>
new Enum('SMOOTHING', 'BLACKBORDER', 'KODICHECKER', 'FORWARDER', 'UDPLISTENER', 'BOBLIGHT_SERVER','GRABBER');
function Enum() {
for (var i in arguments)
{
this[arguments[i]] = i;
$('#componentsbutton').append('<button type="button" class="btn btn-success" onclick="requestSetComponentState(\''+arguments[i]+'\',true)"><i class="fa fa-play"></i></button> '+arguments[i]+'<br />');
$('#componentsbutton').append('<button type="button" class="btn btn-danger" onclick="requestSetComponentState(\''+arguments[i]+'\',false)"><i class="fa fa-play"></i></button> '+arguments[i]+'<br />');
}
}
</script>

View File

@@ -0,0 +1,113 @@
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1 class="page-header" lang="en" data-lang-token="support_label_title">Support Hyperion</h1>
<div class="introd">
<h4 lang="en" data-lang-token="support_label_intro">Hyperion is a free non-profit software. A small team is working on it and this is why we need your steady support.</h4>
</div>
<hr>
<h3 style="font-weight: bold" lang="en" data-lang-token="support_label_spreadtheword">Spread the word</h3>
<a href="#" target="_blank" class="unlink">
<div class="col-xs-12 col-sm-6 col-lg-3 support-container">
<i class="fa fa-facebook bg-color-fb"></i>
<h4>Facebook</h4>
<p lang="en" data-lang-token="support_label_fbtext">Share our Hyperion Facebook page and get a notice when new updates are released</p>
</div>
</a>
<a href="#" target="_blank" class="unlink">
<div class="col-xs-12 col-sm-6 col-lg-3 support-container">
<i class="fa fa-twitter bg-color-tw"></i>
<h4>Twitter</h4>
<p lang="en" data-lang-token="support_label_twtext">Share and follow on Twitter, be always up to date with latest post about the Hyperion development</p>
</div>
</a>
<a href="https://plus.google.com/103082579494653418604" target="_blank" class="unlink">
<div class="col-xs-12 col-sm-6 col-lg-3 support-container">
<i class="fa fa-google-plus bg-color-g"></i>
<h4>Google+</h4>
<p lang="en" data-lang-token="support_label_ggtext">Circle us on Google +!</p>
</div>
</a>
<a href="https://www.youtube.com/channel/UCCah_idbSMqgo4UwP6R9H-A" target="_blank" class="unlink">
<div class="col-xs-12 col-sm-6 col-lg-3 support-container">
<i class="fa fa-youtube bg-color-g"></i>
<h4>Youtube</h4>
<p lang="en" data-lang-token="support_label_yttext">Bored from pictures? Checkout our Youtube channel</p>
</div>
</a>
</div>
<div class="col-xs-12">
<hr>
<h3 style="font-weight: bold" lang="en" data-lang-token="support_label_donate">Donate or bookmark our affiliate links</h3>
<ol>
<li lang="en" data-lang-token="support_label_affinstr1">Click on the appropriate link of your country</li>
<li lang="en" data-lang-token="support_label_affinstr2">Everything you buy (doesnt matter what) we get a small fee based on your turnover</li>
<li lang="en" data-lang-token="support_label_affinstr3">You ALWAYS pay the same price, there is absolutely no difference. Try it out!</li>
</ol>
<div class="col-xs-12 col-sm-6 col-lg-3 support-container">
<i class="fa fa-amazon bg-color-am"></i>
<h4>Amazon</h4>
<ul>
<li><a href="http://www.amazon.de/?tag=hyperionproje-21" target="_blank" lang="en" data-lang-token="general_country_de">Germany</a></li>
<li><a href="http://www.amazon.com/?tag=hyperionpro05-20" target="_blank" lang="en" data-lang-token="general_country_us">United States</a></li>
<li><a href="http://www.amazon.co.uk/?tag=hyperionpro02-21" target="_blank" lang="en" data-lang-token="general_country_uk">United Kingdom</a></li>
<li><a href="http://www.amazon.fr/?tag=hyperionpro0c-21" target="_blank" lang="en" data-lang-token="general_country_fr">France</a></li>
<li><a href="http://www.amazon.es/?tag=hyperionpro07-21" target="_blank" lang="en" data-lang-token="general_country_es">Spain</a></li>
<li><a href="http://www.amazon.it/?tag=hyperionpro00-21" target="_blank" lang="en" data-lang-token="general_country_it">Italy</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3 support-container">
<i class="fa fa-shopping-cart bg-color-am"></i>
<h4>ebay</h4>
<ul>
<li><a href="http://rover.ebay.com/rover/1/707-53477-19255-0/1?pub=5575174930&toolid=10001&campid=707-53477-19255-0&customid=&mpt=9592320&mpre=http%3A%2F%2Fwww.ebay.de" target="_blank" lang="en" data-lang-token="general_country_de">Germany</a></li>
<li><a href="http://rover.ebay.com/rover/1/711-53200-19255-0/1?pub=5575174930&toolid=10001&campid=711-53200-19255-0&customid=&mpt=8091563&mpre=http%3A%2F%2Fwww.ebay.com" target="_blank" lang="en" data-lang-token="general_country_us">United States</a></li>
<li><a href="http://rover.ebay.com/rover/1/710-53481-19255-0/1?pub=5575174930&toolid=10001&campid=710-53481-19255-0&customid=&mpt=9837178&mpre=http%3A%2F%2Fwww.ebay.co.uk" target="_blank" lang="en" data-lang-token="general_country_uk">United Kingdom</a></li>
<li><a href="http://rover.ebay.com/rover/1/1346-53482-19255-0/1?pub=5575174930&toolid=10001&campid=1346-53482-19255-0&customid=&mpt=9890408&mpre=http%3A%2F%2Fwww.ebay.nl" target="_blank" lang="en" data-lang-token="general_country_nl">Netherlands</a></li>
<li><a href="http://rover.ebay.com/rover/1/709-53476-19255-0/1?pub=5575174930&toolid=10001&campid=709-53476-19255-0&customid=&mpt=9865977&mpre=http%3A%2F%2Fwww.ebay.fr" target="_blank" lang="en" data-lang-token="general_country_fr">France</a></li>
<li><a href="http://rover.ebay.com/rover/1/1185-53479-19255-0/1?pub=5575174930&toolid=10001&campid=1185-53479-19255-0&customid=&mpt=1016300&mpre=http%3A%2F%2Fwww.ebay.es" target="_blank" lang="en" data-lang-token="general_country_es">Spain</a></li>
</ul>
</div>
<a href="https://www.paypal.me/hyperionproject/10" target="_blank" class="unlink">
<div class="col-xs-12 col-sm-6 col-lg-3 support-container">
<i class="fa fa-paypal bg-color-pp"></i>
<h4>Paypal</h4>
<p lang="en" data-lang-token="support_label_donationpp">Donation:</p><a href="https://www.paypal.me/hyperionproject/10" target="_blank">Paypal</a>
</div>
</a>
<a href="bitcoin:1GGZbsT6fH3cGq25H5HS2PfisPfDnffSJR?amount=0.5&label=Hyperion Donation" class="unlink">
<div class="col-xs-12 col-sm-6 col-lg-3 support-container">
<i class="fa fa-btc bg-color-btc"></i>
<h4>Bitcoin</h4>
<p lang="en" data-lang-token="support_label_btctext">Address:</p>
<p>1GGZbsT6fH3cGq25H5HS2PfisPfDnffSJR</p>
</div>
</a>
</div>
<div class="col-xs-12">
<hr>
<h3 style="font-weight: bold" lang="en" data-lang-token="support_label_webrestitle">Information and help ressources</h3>
<a href="https://www.hyperion-project.org" target="_blank" class="unlink">
<div class="col-xs-12 col-sm-6 col-lg-3 support-container">
<i class="fa fa-globe bg-color-wf"></i>
<h4 lang="en" data-lang-token="support_label_webpagetitle">Webpage</h4>
<p lang="en" data-lang-token="support_label_webpagetext">Home of Hyperion</p>
</div>
</a>
<a href="https://wiki.hyperion-project.org" target="_blank" class="unlink">
<div class="col-xs-12 col-sm-6 col-lg-3 support-container">
<i class="fa fa-book bg-color-wf"></i>
<h4 lang="en" data-lang-token="support_label_wikititle">Wiki</h4>
<p lang="en" data-lang-token="support_label_wikitext">The A to Z source for almost everything Hyperion related</p>
</div>
</a>
<a href="https://forum.hyperion-project.org" target="_blank" class="unlink">
<div class="col-xs-12 col-sm-6 col-lg-3 support-container">
<i class="fa fa-comments bg-color-wf"></i>
<h4 lang="en" data-lang-token="support_label_forumtitle">Forum</h4>
<p lang="en" data-lang-token="support_label_forumtext">Showcases, discussions, help and more</p>
</div>
</a>
</div>
</div>
</div>

View File

@@ -0,0 +1,23 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_update_token">Update</h1>
<div class="introd">
<h4 lang="en" data-lang-token="update_label_intro">This page gives you an overview of all Hyperion versions available. On top you could update or downgrade your version of Hyperion whenever you want. Sorted from newest to oldest</h4>
</div>
<hr>
<h4 id="update_currver"></h4>
<hr>
<div class="col-lg-12" id="versionlist">
</div>
</div>
</div>
</div>
<script>
for (key in parsedUpdateJSON)
{
$('#versionlist').append('<div class="col-lg-6"><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-television fa-fw"></i>Hyperion V'+parsedUpdateJSON[key].versionnr+'</div><div class="panel-body"><p><span style="font-weight:bold;" lang="en" data-lang-token="update_label_type">Type:</span> '+ parsedUpdateJSON[key].channel +'</p><p><span style="font-weight:bold;" lang="en" data-lang-token="update_label_description">Description:</span> '+parsedUpdateJSON[key].versiondesc+'</p><hr><a class="btn btn-primary" href="'+ parsedUpdateJSON[key].versionchangelog +'" target="_blank"><i class="fa fa-list fa-fw"></i><span style="font-weight:bold;" lang="en" data-lang-token="update_button_changelog">Full changelog</span></a><button type="button" class="btn btn-warning pull-right"><i class="fa fa-download fa-fw"></i><span lang="en" data-lang-token="update_button_install">Install</span></button></div></div></div>');
}
$('#update_currver').append(currentVersion);
</script>