forked from community/product-iots
Merge pull request #287 from Kamidu/cloud-3.1.0
add the cloud menu to the iot packapplication-manager-new
Geeth
8 years ago
committed by
GitHub
commit
608b65a06f
@ -0,0 +1,245 @@
|
||||
/*
|
||||
* Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/**
|
||||
* Validation messages
|
||||
*/
|
||||
.required {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.required-error {
|
||||
background: #a94442;
|
||||
border: 1px solid #a94442;
|
||||
padding: 6px 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/**
|
||||
* Theme overrides
|
||||
*/
|
||||
.breadcrumb li .fw-home {
|
||||
float: left;
|
||||
padding-top: 2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Auth menu
|
||||
*/
|
||||
.auth .hidden-xs {
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.auth-xs {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.auth-xs ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 28px;
|
||||
background-color: #2a80b9;
|
||||
}
|
||||
|
||||
.auth-xs li {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.auth-xs li a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.auth-xs li a:hover {
|
||||
background-color: #499dd5;
|
||||
}
|
||||
|
||||
ul.dropdown-menu.more-actions-button {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
width: 40px;
|
||||
background: #F9F9F9;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
min-width: 45px;
|
||||
|
||||
}
|
||||
|
||||
ul.dropdown-menu.more-actions-button > li {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border: 1px;
|
||||
}
|
||||
|
||||
ul.dropdown-menu.more-actions-button > li > button {
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
border-top: 1px solid darkred;
|
||||
}
|
||||
|
||||
.btn-group.open .dropdown-toggle {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
|
||||
.cloud-menu .popover {
|
||||
border-radius: 0px;
|
||||
width: 24em;
|
||||
left: -21.1em !important;
|
||||
max-width: 32em;
|
||||
background-color: #006690
|
||||
}
|
||||
.cloud-menu .popover-title,.navbar-header .popover-title {
|
||||
background-color: #006690;
|
||||
font-size: 16px;
|
||||
border-bottom: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
.cloud-menu .popover.bottom>.arrow{
|
||||
margin-left:-2px;
|
||||
}
|
||||
.cloud-menu .popover.bottom>.arrow:after,.navbar-header .popover.bottom>.arrow:after{
|
||||
border-bottom-color: #006690;
|
||||
}
|
||||
.cloud-block {
|
||||
float: left;
|
||||
width: 8.2em;
|
||||
height: 8.2em;
|
||||
background-color: #fff;
|
||||
margin: 0.5em 0em 0.5em 0.5em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cloud-name {
|
||||
font-size:14px;
|
||||
margin-top: .5em;
|
||||
font-weight: 400;
|
||||
}
|
||||
.cloud-menu-popover {
|
||||
position: relative;
|
||||
float: right;
|
||||
padding: 0px 8px;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
#cloud-menu-popover-xs {
|
||||
color: #fff;
|
||||
line-height:24px;
|
||||
border: none;
|
||||
margin-right: 15px!important;
|
||||
}
|
||||
.navbar-toggle{
|
||||
border:none;
|
||||
border-radius: 0px;
|
||||
}
|
||||
.navbar-header .popover {
|
||||
border-radius: 0px;
|
||||
width: 21em;
|
||||
max-width:32em;
|
||||
background-color: #006690;
|
||||
}
|
||||
.navbar-header .popover .popover-content{
|
||||
padding:0px;
|
||||
}
|
||||
.cloud-menu .popover-content {
|
||||
padding: 0px;
|
||||
}
|
||||
.cloud-actions {
|
||||
background-color: #005578;
|
||||
float: left;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.cloud-actions h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
padding-left: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.cloud-block-invert {
|
||||
color: #fff;
|
||||
float: left;
|
||||
width: 8.2em;
|
||||
height: 8.2em;
|
||||
background-color: #1f1f1f;
|
||||
margin: 0.5em 0em 0.5em 0.5em;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cloud-block-default {
|
||||
color: #006690;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cloud-actions a:hover {
|
||||
color: #d7d5d5;
|
||||
background-color: #3d3d3d;
|
||||
text-decoration: none
|
||||
}
|
||||
.cloud-apps a {
|
||||
text-decoration: none;
|
||||
color: #006690 !important;
|
||||
cursor: pointer
|
||||
}
|
||||
.cloud-apps a:hover {
|
||||
text-decoration: none;
|
||||
color: #006690;
|
||||
background-color: #c5c5c5;
|
||||
}
|
||||
.cloud-apps .cloud-actions a {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.add-padding-top-3x {
|
||||
padding-top: 15px !important;
|
||||
}
|
||||
|
||||
.nav li a{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cloud-menu-content li a{
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
html{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body{
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
@ -0,0 +1,204 @@
|
||||
/*
|
||||
* Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
$(function () {
|
||||
|
||||
var dashboardsApi = ues.utils.tenantPrefix() + 'apis/dashboards';
|
||||
var dashboards = [];
|
||||
var isStillLoading = false;
|
||||
var nextStart = 0;
|
||||
var hasMore = true;
|
||||
|
||||
/**
|
||||
* Page count.
|
||||
* @const
|
||||
*/
|
||||
var PAGE_COUNT = 10;
|
||||
|
||||
// Pre-compiling handlebar templates
|
||||
var dashboardsListHbs = Handlebars.compile($("#ues-dashboards-list-hbs").html());
|
||||
var dashboardThumbnailHbs = Handlebars.compile($("#ues-dashboard-thumbnail-hbs").html());
|
||||
var dashboardConfirmHbs = Handlebars.compile($("#ues-dashboard-confirm-hbs").html());
|
||||
var dashboardsEmptyHbs = Handlebars.compile($("#ues-dashboards-empty-hbs").html());
|
||||
Handlebars.registerPartial('ues-dashboard-thumbnail-hbs', dashboardThumbnailHbs);
|
||||
|
||||
/**
|
||||
* Find the dashboard using dashboard id.
|
||||
* @param id
|
||||
* @return {object}
|
||||
* @private
|
||||
* */
|
||||
var findDashboard = function (id) {
|
||||
var i;
|
||||
var dashboard;
|
||||
var length = dashboards.length;
|
||||
for (i = 0; i < length; i++) {
|
||||
dashboard = dashboards[i];
|
||||
if (dashboard.id === id) {
|
||||
return dashboard;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Delete the selected dashboard
|
||||
* @param el:-selected dashboard element
|
||||
* @private
|
||||
* */
|
||||
var deleteDashboard = function (el) {
|
||||
var button = Ladda.create(el[0]);
|
||||
button.start();
|
||||
var id = el.closest('.ues-dashboard').data('id');
|
||||
$.ajax({
|
||||
url: dashboardsApi + '/' + id,
|
||||
method: 'DELETE',
|
||||
async : false,
|
||||
success: function () {
|
||||
button.stop();
|
||||
location.reload();
|
||||
},
|
||||
error: function () {
|
||||
button.stop();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Load the list of dashboards available.
|
||||
* @private
|
||||
* */
|
||||
var loadDashboards = function () {
|
||||
isStillLoading = true;
|
||||
|
||||
if (!hasMore) {
|
||||
isStillLoading = false;
|
||||
$('.ues-dashboard').each(function (i, obj) {
|
||||
if ($(this).find('.ues-dashboard-share').length) {
|
||||
$(this).addClass("shared");
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
ues.store.assets('dashboard', {
|
||||
start: nextStart,
|
||||
count: PAGE_COUNT
|
||||
}, function (err, data) {
|
||||
var dashboardsEl = $('#ues-portal').find('.ues-dashboards');
|
||||
hasMore = data.length;
|
||||
if (!hasMore && nextStart === 0) {
|
||||
dashboardsEl.append(dashboardsEmptyHbs());
|
||||
return;
|
||||
}
|
||||
|
||||
nextStart += PAGE_COUNT;
|
||||
dashboards = dashboards.concat(data);
|
||||
dashboardsEl.append(dashboardsListHbs(data));
|
||||
|
||||
var win = $(window);
|
||||
var doc = $(document);
|
||||
isStillLoading = false;
|
||||
if (doc.height() > win.height()) {
|
||||
return;
|
||||
}
|
||||
|
||||
loadDashboards();
|
||||
|
||||
$(".disable").on('click', function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize the UI functionality such as binding events.
|
||||
* @private
|
||||
* */
|
||||
var initUI = function () {
|
||||
var portal = $('#ues-portal');
|
||||
portal.on('click', '.ues-dashboards .ues-dashboard-trash-handle', function (e) {
|
||||
e.preventDefault();
|
||||
var thiz = $(this);
|
||||
var dashboardEl = thiz.closest('.ues-dashboard');
|
||||
var id = dashboardEl.data('id');
|
||||
var dashboard = findDashboard(id);
|
||||
dashboardEl.html(dashboardConfirmHbs(dashboard));
|
||||
});
|
||||
|
||||
portal.on('click', '.ues-dashboards .ues-dashboard-trash-confirm', function (e) {
|
||||
e.preventDefault();
|
||||
deleteDashboard($(this));
|
||||
});
|
||||
|
||||
portal.on('click', '.ues-dashboards .ues-dashboard-trash-cancel', function (e) {
|
||||
e.preventDefault();
|
||||
var thiz = $(this);
|
||||
var dashboardEl = thiz.closest('.ues-dashboard');
|
||||
var id = dashboardEl.data('id');
|
||||
var dashboard = findDashboard(id);
|
||||
dashboardEl.html(dashboardThumbnailHbs(dashboard));
|
||||
});
|
||||
|
||||
portal.on('click', '.ues-view:not(.disable)', function(e) {
|
||||
e.preventDefault();
|
||||
window.open($(this).attr('href'), '_blank');
|
||||
});
|
||||
|
||||
$('#filter-dashboards a').on('click', function () {
|
||||
$('#filter').html($(this).text());
|
||||
var filter = $(this).data('filter');
|
||||
|
||||
$('.ues-dashboard-container').each(function (i, obj) {
|
||||
if (filter === "All") {
|
||||
$(this).show();
|
||||
} else {
|
||||
if ($(this).find('.ues-dashboard-share').length) {
|
||||
filter === "Shared" ? $(this).show() : $(this).hide();
|
||||
} else {
|
||||
filter === "Shared" ? $(this).hide() : $(this).show();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(window).scroll(function () {
|
||||
var win = $(window);
|
||||
var doc = $(document);
|
||||
if (win.scrollTop() + win.height() < doc.height() - 100) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isStillLoading) {
|
||||
loadDashboards();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
$('#cloud-menu-popover i.fw-tiles').popover({
|
||||
html: true,
|
||||
trigger:'click',
|
||||
title: function() {
|
||||
return $("#popover-head").html();
|
||||
},
|
||||
content: function() {
|
||||
return $("#popover-content").html();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
initUI();
|
||||
loadDashboards();
|
||||
});
|
||||
Loading…
Reference in new issue