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