shaba/openuds
1
0
Fork 1
mirror of https://github.com/dkmstr/openuds.git synced 2024-12-31 17:17:53 +03:00
Code Issues Releases Wiki Activity

Advancing with semantic

Browse Source
This commit is contained in:
Adolfo Gómez García 2016-04-22 07:05:04 +02:00
parent 99b17e573c
commit 242d9b5e6e
7 changed files with 4761 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
server/src/uds/static/semantic/css/uds.css
View File

@ -11,3 +11,62 @@
footer {
text-align: right;
}
# cookiebar
#cookie-bar {
background: #333333;
height: 30px;
line-height: 24px;
color: #eeeeee;
text-align: center;
padding: 3px 0;
}
#cookie-bar.fixed {
background: #333333;
height: 30px;
line-height: 24px;
color: #eeeeee;
text-align: center;
padding: 3px 0;
position: fixed;
bottom: 0px;
left: 0;
width: 100%;
}
#cookie-bar p {
margin: 0;
padding: 0;
}
#cookie-bar a {
color: #ffffff;
display: inline-block;
border-radius: 3px;
text-decoration: none;
padding: 0 6px;
margin-left: 8px;
}
#cookie-bar .cb-enable {
background: #007700;
}
#cookie-bar .cb-enable:hover {
background: #009900;
}
#cookie-bar .cb-disable {
background: #990000;
}
#cookie-bar .cb-disable:hover {
background: #bb0000;
}
#cookie-bar .cb-policy {
background: #0033bb;
}
#cookie-bar .cb-policy:hover {
background: #0055dd;
}
@media (max-width: 768px) {
#cookie-bar {
height: 60px;
}
}

4604
server/src/uds/static/semantic/js/handlebars-v4.0.2.js Normal file
View File

File diff suppressed because one or more lines are too long

420
server/src/uds/templates/uds/semantic/index.html
View File

@ -1,369 +1,73 @@
{% extends "uds/html5/templates/base.html" %}
{% load i18n html5 static %}
{% extends "uds/semantic/templates/base.html" %}
{% load i18n html5 REST static %}
{% block title %}{% trans 'Available services list' %}{% endblock %}
{% block body %}
<ul class="nav nav-tabs nav-justified" id="services-tabs">
{% for grp in groups %}
<li{% if forloop.first %} class="active"{% endif %} data-name='tab-services-{{ forloop.counter }}'>
<a href="#tab-services-{{ forloop.counter }}" data-toggle="tab">
<img src="{% url 'galleryImage' grp.imageUuid %}" class="img-round se-agranda" style="width: 40px;">
{{ grp.name }}
</a>
{% comment %}<a href="#tab-services-{{ forloop.counter }}" data-toggle="tab" style="background: url('{% url 'galleryImage' grp.imageUuid %}') no-repeat left; display: block; background-size: 32px; min-width: 128px; padding-left: 32px; height: 40px;">{{ grp.name }}</a>{% endcomment %}
</li>
{% endfor %}
</ul>
<div class="tab-content">
{% for grp in groups %}
<div class="tab-pane fade{% if forloop.first %} in active{% endif %}" id="tab-services-{{ forloop.counter }}">
<div class="ui container">
<div class="ui top attached tabular menu">
{% for grp in groups %}
<a class="tab {% if forloop.first %}active{% endif %} item" data-group="{{ grp.name }}">
<img src="{% url 'galleryImage' grp.imageUuid %}" class="ui image mini">
{{ grp.name }}
</a>
{% endfor %}
</div>
<div class="ui bottom attached segment">
<p></p>
</div>
</div>
{% endblock %}
{% for ser in services %}
{% if ser.group.name == grp.name %}
{% if ser.transports %}
<div class="service-container">
{% with trans=ser.transports|first numTransports=ser.transports|length %}
<div class="service{% if ser.maintenance %} maintenance{% endif %}{% if ser.not_accesible %} notaccesible{% endif %}{% if ser.in_use %} inuse{% endif %}"
{% if ser.maintenance %}
data-content="{% trans "Under maintenance" %}"
{% elif ser.not_accesible %}
data-content="{% trans "Access limited by calendar" %}"
{% elif ser.in_use %}
data-content="{%trans "Currently in use" %}"
{% endif %}
data-href="{{ trans.link }}"
data-href-alt="{% url 'uds.web.views.client_downloads' %}">
<div class="service-image">
<img class="se-agranda" src="{% url "uds.web.views.serviceImage" idImage=ser.imageId %}" />
</div>
<span {% if ser.name|length > 16 %}class="with-tooltip" data-content="{{ser.name|capfirst}}"{% endif %}{% if ser.show_transports and numTransports > 1 %} style="width: 80%;"{% endif %}>{{ ser.name|capfirst|truncatechars:16 }}</span>
{% if ser.show_transports and numTransports > 1 %}
<span class="gear"><span class="fa fa-gear fa-spin"> </span></span>
{% endif %}
</div>
{% if ser.show_transports and numTransports > 1 %}
<div class="modal fade in">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title text-center">{% trans "Connections" %}</h4>
</div>
<div class="modal-body">
<ul class="transports">
{% for trans in ser.transports %}
<li><a class="uds-service-transport" data-href-alt="{% url 'uds.web.views.client_downloads' %}" href="{{ trans.link }}"><img class="transport" src="{% url "uds.web.views.transportIcon" idTrans=trans.id %}" alt="{{ trans.name }}" />{{ trans.name }}</a></li>
{% endfor %}
</ul>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endif %}
{% endwith %}
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
{% endfor %}
</div>
<div class="modal fade" id="maintenance-dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{% trans "Service under maintenance" %}</h4>
</div>
<div class="modal-body text-center">
<p>{% trans "This service is in maintenance mode." %}</p>
<p>{% trans "Please, retry access in a while." %}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="notaccesible-dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{% trans "Service access not allowed" %}</h4>
</div>
<div class="modal-body text-center">
<p>{% trans "This service is currently not accesible due to schedule restrictions" %}</p>
<p>{% trans "Please, retry access in a while." %}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% if user.isStaff %}
<div class="panel panel-warning">
<div class="panel-heading">
{% trans "Administrator info panel" %}
</div>
<div class="panel-body">
<p>{% trans "Ip" %}: {{ ip }}</p>
<p>{% trans "Networks" %}: {{ nets }}</p>
<p>{% trans "Transports" %}: {{ transports }}</p>
<p>{% trans "User Agent" %}: {{ request.META.HTTP_USER_AGENT }}</p>
<p>{% trans "OS" %}: {{ request.session.OS.OS }}</p>
</div>
</div>
{% endif %}
{% endblock %}
{% block css %}
<style media="screen">
.tab-content {
margin-top: 16px;
}
.with-tooltip {
z-index: 1000;
}
ul.transports > li {
list-style-type: none;
}
img.transport {
display: inline-block;
vertical-align: middle;
height: 32px;
width: 32px;
margin-right: 8px;
margin-bottom: 8px;
}
div.service-container {
display: inline-block;
width: 140px;
height: 162px;
margin: 0px 8px 24px 8px;
}
div.service {
/*background-color: #FAFAFA;*/
/*background-image: url("{% get_static_prefix %}/img/uds-small-back.png");*/
padding: 6px;
/*border: 1px solid #BABABA;
border-radius: 2px;*/
display: block;
position: relative;
width: 100%;
height: 100%;
box-shadow: 6px 6px 5px #E0E0E0;
cursor: pointer;
}
div.service.disabled {
opacity: 0.4;
filter: alpha(opacity=40);
}
div.service.maintenance {
opacity: 0.6;
filter: alpha(opacity=60);
}
div.service.inuse {
background-color: #DCDCFF;
}
div.service-image {
width: 128px;
height: 128px;
}
img.se-agranda {
max-width: 100%;
opacity: .8;
-webkit-transform: scale(.8,.8);
transform: scale(.8,.8);
-webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
li.active > a > img.se-agranda,
img.se-agranda:hover,
img.se-agranda:focus {
opacity: 1;
-webkit-transform: none;
transform: none;
-webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.service.over:not(.disabled) {
background-color: #F0F0F0;
animation: pulse 0.5s infinite alternate;
-webkit-animation-name: pulse;
-webkit-animation-duration: 0.8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: alternate;
}
@keyframes pulse {
from { box-shadow: 0px 0px 3px 3px #0066cc; }
to { box-shadow: 0px 0px 8px 5px #0066cc; }
}
@-webkit-keyframes pulse {
from { box-shadow: 0px 0px 3px 3px #0066cc; }
to { box-shadow: 0px 0px 8px 5px #0066cc; }
}
div.service > img {
width: 100%;
}
div.service > span {
display: inline-block;
position: absolute;
vertical-align: bottom;
text-align: center;
left: 0px;
bottom: 0px;
width: 100%;
}
div.service > span.gear {
text-align: right;
padding-right: 12px;
}
span.gear > span.fa {
cursor: zoom-in;
}
</style>
{% block jsnc %}
<!-- preloading of templates -->
{% js_template_path 'uds/semantic/tmpl' %}
{% js_template 'items' %}
{% endblock %}
{% block js %}
{% pageReloadTime as reloadTime %}
<script>
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function launchURL(el) {
var $el = $(el);
<script>
var itemsTemplate = null;
var groups = {
{% for grp in groups %}
"{{ grp.name }}": {
"items": [
{% for ser in services %}
{% if ser.group.name == grp.name and ser.transports %}
{
"maintenance": {{ ser.maintenance|yesno:"true,false" }},
"not_accesible": {{ ser.not_accesible|yesno:"true,false" }},
"in_use": {{ ser.in_use|yesno:"true,false" }},
"show_transports": {{ ser.show_transports|yesno:"true,false" }},
"name": "{{ ser.name|escape }}",
"description": "{{ ser.description|escape }}",
"image": "{% url "uds.web.views.serviceImage" idImage=ser.imageId %}",
"transports": [{% for trans in ser.transports %}{
"name": "{{ trans.name }}",
"link": "{{ trans.link }}",
"image": "{% url "uds.web.views.transportIcon" idTrans=trans.id %}"
},{% endfor %}],
},
{% endif %}
{% endfor %}
]
},
{% endfor %}
};
uds.resetReloadCounter(); // Resets page update
function showSelectedTabItems() {
var gName = $(".tab.active").attr('data-group');
$('.attached.segment').html(itemsTemplate(groups[gName].items));
}
url = $el.attr('data-href');
url = url != null ? url : $el.attr('href');
if ( url.substring(0, 7) == 'udsa://' ) {
uds.launch($el);
} else {
window.location = url;
}
}
$(function(){
itemsTemplate = Handlebars.compile($("#tmpl_items").html());
$(function() {
var autorun = {% if autorun %}true{% else %}false{% endif %};
uds.reloadCounterBase = {{ reloadTime }};
uds.reloadCounterBase /= uds.counterGranurality;
uds.resetReloadCounter();
$('.with-tooltip').popover({container: 'body', trigger: 'hover', delay: { show: 500, hide: 100 }, placement: 'auto bottom'});
$('.inuse').popover({container: 'body', trigger: 'hover', delay: { show: 500, hide: 100 }, placement: 'auto top'});
$('div.service:not(.maintenance, .notaccesible)').on("click", function (event){
var url, el;
event.preventDefault();
launchURL(this);
return false;
}).on("mouseenter mouseleave", function (event) {
$(this).toggleClass('over');
});
$('.uds-service-transport').on("click", function (event){
var url, el, modal;
event.preventDefault();
modal = $(this).parent().parent().parent().parent().parent().parent();
modal.modal('hide');
// check url
el = $(this)
url = el.attr('data-href');
url = url != null ? url : el.attr('href');
if ( url.substring(0, 7) == 'udsa://' ) {
uds.launch(el);
} else {
window.location = url;
}
return false;
})
$('div.service:not(.maintenance, .notaccesible) > span.gear > span.fa').on("click", function (event) {
event.stopPropagation();
event.preventDefault();
$(this).parent().parent().next().modal();
return false;
});
$(".maintenance").click( function(event) {
$('#maintenance-dialog').modal({
keyboard: false
})
return false;
});
$(".notaccesible").click( function(event) {
$('#notaccesible-dialog').modal({
keyboard: false
})
return false;
});
if( autorun ) {
if( $('.service').length > 0)
launchURL($('.service')[0]);
autorun = false;
}
uds.setReload();
// Select the correct tab if needed (on reload)
var tab = getUrlVars().tab;
if (tab != undefined) {
$("ul#services-tabs a[href='#" + tab + "']").tab('show')
}
});
</script>
showSelectedTabItems();
$(".tab.item").on('click', function(){
$(".tab").removeClass('active');
$(this).addClass('active');
showSelectedTabItems();
});
});
</script>
{% endblock %}

2
server/src/uds/templates/uds/semantic/snippets/navbar.html
View File

@ -21,7 +21,7 @@
</a>
{% if user and user.pk != None %}
<div class="item">
<div class="ui dropdown item">
<div class="ui dropdown selection item">
<i class="user icon"></i> {{ user.real_name }}
<i class="dropdown icon"></i>
<div class="menu">

9
server/src/uds/templates/uds/semantic/templates/base.html
View File

@ -47,20 +47,19 @@
<!-- Content -->
{% block body %}{% endblock %}
<!-- End of content -->
</div> <!-- End of container -->
<div class="st-sticky-push"></div>
</div>
<footer class="footer">
<div class="container">
{% block footer %}
{% block footer %}
<a href="http://www.udsenterprise.com">UDS Enterprise Edition. &copy; 2012-2016 Virtual Cable S.L.U.</a>
{% endblock %}
{% endblock %}
</div>
</footer>
<script src="{% url 'uds.web.views.jsCatalog' LANGUAGE_CODE %}"></script>
{% compress js %}
<script src="{% get_static_prefix %}semantic/js/jquery.min.js"></script>
<script src="{% get_static_prefix %}semantic/js/handlebars-v4.0.2.js"></script>
<script src="{% get_static_prefix %}semantic/js/semantic.min.js"></script>
<script>
var clientRest = "/" + "{% url 'ClientAccessEnabler' 'x' 'x' %}".split("/")[1];
@ -81,6 +80,6 @@
{% compress js %}
{% block js %}{% endblock %}
{% endcompress %}
{% block jsnc %}{% endblock %}
</body>
</html>

28
server/src/uds/templates/uds/semantic/tmpl/items.html Normal file
View File

@ -0,0 +1,28 @@
{% load i18n %}
{% verbatim %}
<div class="ui five link cards">
{{#each this}}
<div class="card">
<div class="ui fluid image centered">
<img src="{{ image }}">
</div>
<div class="content">
<a class="header">{{ name }}</a>
<div class="meta">
<span>{{#if in_use }}{% endverbatim %}{% trans 'Session in use' %}{% verbatim %}{{/if}}</span>
<span>{{#if maintenance }}{% endverbatim %}{% trans 'Maintenance' %}{% verbatim %}{{/if}}</span>
</div>
<div class="description">
{{ description }}
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
{{/each }}
</div>
{% endverbatim %}

4
server/src/uds/web/views/index.py
View File

@ -51,7 +51,7 @@ import logging
logger = logging.getLogger(__name__)
__updated__ = '2016-02-18'
__updated__ = '2016-04-22'
def about(request):
@ -126,6 +126,7 @@ def index(request):
services.append({
'id': 'A' + svr.uuid,
'name': svr.name,
'description': svr.deployed_service.comments,
'group': group,
'transports': trans,
'imageId': imageId,
@ -171,6 +172,7 @@ def index(request):
services.append({
'id': 'F' + svr.uuid,
'name': svr.name,
'description': svr.comments,
'group': group,
'transports': trans,
'imageId': imageId,