Commit 8e91cddf authored by Ricardo J. Mendez's avatar Ricardo J. Mendez

New dashboard

parent 1930ec56
......@@ -46,11 +46,12 @@
}
:chromebuild {:resource-paths ["resources/js"
"resources/html"
"resources/images"
"resources/css"]
:target-path "target/unpacked"}
:chromebuild {:resource-paths ["resources/js"
"resources/dashboard"
"resources/images"
"resources/css"]
:preserve-folders true
:target-path "target/unpacked"}
:profiles {:release
{:cljsbuild
......@@ -64,13 +65,13 @@
:test
{:dependencies [[lein-doo "0.1.6-SNAPSHOT"]]
:cljsbuild
{:builds
{:test
{:source-paths ["test" "src/common"]
:compiler {:output-to "target/js/test/relevance-tests.js"
:output-dir "target/js/test"
:main relevance.test.runner
:optimizations :none
:pretty-print :true}}}}
{:builds
{:test
{:source-paths ["test" "src/common"]
:compiler {:output-to "target/js/test/relevance-tests.js"
:output-dir "target/js/test"
:main relevance.test.runner
:optimizations :none
:pretty-print :true}}}}
}
})
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" type="image/png" href="favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Relevance - Dashboard</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
<meta name="viewport" content="width=device-width"/>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet"/>
<!-- Light Bootstrap Table core CSS -->
<link href="light-bootstrap-dashboard.css" rel="stylesheet"/>
<!-- Fonts and icons -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<link href="pe-icon-7-stroke.css" rel="stylesheet"/>
</head>
<body>
<div class="wrapper">
<div class="sidebar" data-color="purple" data-image="relevance-0.4-background.jpg">
<!-- you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple" -->
<div class="sidebar-wrapper">
<div class="logo">
<a href="http://www.numergent.com" class="simple-text">
Relevance
</a>
</div>
<div id="nav-left">
<!-- Left navbar goes here -->
</div>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-default navbar-fixed">
<div class="container-fluid" id="nav-top">
<!-- top navbar goes here -->
</div>
</nav>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="main-section">
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<p class="copyright pull-right">
&copy; 2015 <a href="http://numergent.com" target="_blank">Numergent Limited</a>
</p>
</div>
</footer>
</div>
</div>
</body>
<!-- Core JS Files -->
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script src="light-bootstrap-dashboard.js"></script>
<script type="text/javascript" src="ui.js"></script>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
var searchVisible = 0;
var transparent = true;
var transparentDemo = true;
var fixedTop = false;
var navbar_initialized = false;
$(document).ready(function(){
window_width = $(window).width();
// check if there is an image set for the sidebar's background
lbd.checkSidebarImage();
// Init navigation toggle for small screens
if(window_width <= 991){
lbd.initRightMenu();
}
// Activate the tooltips
$('[rel="tooltip"]').tooltip();
// Activate the switches with icons
if($('.switch').length != 0){
$('.switch')['bootstrapSwitch']();
}
// Activate regular switches
if($("[data-toggle='switch']").length != 0){
$("[data-toggle='switch']").wrap('<div class="switch" />').parent().bootstrapSwitch();
}
$('.form-control').on("focus", function(){
$(this).parent('.input-group').addClass("input-group-focus");
}).on("blur", function(){
$(this).parent(".input-group").removeClass("input-group-focus");
});
});
// activate collapse right menu when the windows is resized
$(window).resize(function(){
if($(window).width() <= 991){
lbd.initRightMenu();
}
});
lbd = {
misc:{
navbar_menu_visible: 0
},
checkSidebarImage: function(){
$sidebar = $('.sidebar');
image_src = $sidebar.data('image');
if(image_src !== undefined){
sidebar_container = '<div class="sidebar-background" style="background-image: url(' + image_src + ') "/>'
$sidebar.append(sidebar_container);
}
},
initRightMenu: function(){
if(!navbar_initialized){
$navbar = $('nav').find('.navbar-collapse').first().clone(true);
$sidebar = $('.sidebar');
sidebar_color = $sidebar.data('color');
$logo = $sidebar.find('.logo').first();
logo_content = $logo[0].outerHTML;
ul_content = '';
$navbar.attr('data-color',sidebar_color);
// add the content from the sidebar to the right menu
content_buff = $sidebar.find('.nav').html();
ul_content = ul_content + content_buff;
//add the content from the regular header to the right menu
$navbar.children('ul').each(function(){
content_buff = $(this).html();
ul_content = ul_content + content_buff;
});
ul_content = '<ul class="nav navbar-nav">' + ul_content + '</ul>';
navbar_content = logo_content + ul_content;
$navbar.html(navbar_content);
$('body').append($navbar);
background_image = $sidebar.data('image');
if(background_image != undefined){
$navbar.css('background',"url('" + background_image + "')")
.removeAttr('data-nav-image')
.addClass('has-image');
}
$toggle = $('.navbar-toggle');
$navbar.find('a').removeClass('btn btn-round btn-default');
$navbar.find('button').removeClass('btn-round btn-fill btn-info btn-primary btn-success btn-danger btn-warning btn-neutral');
$navbar.find('button').addClass('btn-simple btn-block');
$toggle.click(function (){
if(lbd.misc.navbar_menu_visible == 1) {
$('html').removeClass('nav-open');
lbd.misc.navbar_menu_visible = 0;
$('#bodyClick').remove();
setTimeout(function(){
$toggle.removeClass('toggled');
}, 400);
} else {
setTimeout(function(){
$toggle.addClass('toggled');
}, 430);
div = '<div id="bodyClick"></div>';
$(div).appendTo("body").click(function() {
$('html').removeClass('nav-open');
lbd.misc.navbar_menu_visible = 0;
$('#bodyClick').remove();
setTimeout(function(){
$toggle.removeClass('toggled');
}, 400);
});
$('html').addClass('nav-open');
lbd.misc.navbar_menu_visible = 1;
}
});
navbar_initialized = true;
}
}
}
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
timeout = null;
if (!immediate) func.apply(context, args);
}, wait);
if (immediate && !timeout) func.apply(context, args);
};
};
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Relevance - Smart tab organizer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="shortcut icon" href="/favicon.png">
<link rel="stylesheet" href="/bootstrap.min.css" media="screen">
</head>
<body>
<div class="bs-component" id="navbar">
</div>
<div class="container">
<div id="nav-bar">
</div>
<div id="main-section"></div>
<footer>
<div class="row">
<div class="col-sm-6 col-sm-offset-3" style="text-align: center">
<p>&copy <a href="http://numergent.com" target="_blank">Numergent Limited</a></p>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="/ui.js"></script>
</body>
</html>
......@@ -119,32 +119,38 @@
[:a {:on-click #(dispatch [:app-state-item [:ui-state :section] section])} label
(when (= section current) [:span {:class "sr-only"} "(current)"])]])
(defn navbar []
(defn nav-left-item [label class section current]
[:li {:class (when (= section current) "active")}
[:a {:on-click #(dispatch [:app-state-item [:ui-state :section] section])}
[:i {:class class}]
[:p label]
]]
)
(defn nav-left []
(let [section (subscribe [:ui-state :section])]
(fn []
[:nav {:class "navbar navbar-default"}
[:div {:class "container-fluid"}
[:div {:class "navbar-header"}
[:button {:type "button", :class "navbar-toggle collapsed", :data-toggle "collapse", :data-target "#bs-example-navbar-collapse-1"}
[:span {:class "sr-only"} "Toggle navigation"]
[:span {:class "icon-bar"}]
[:span {:class "icon-bar"}]
[:span {:class "icon-bar"}]]
[:a {:class "navbar-brand" :href "http://numergent.com" :target "_blank"} "Relevance"]]
[:div {:class "collapse navbar-collapse", :id "bs-example-navbar-collapse-1"}
[:ul {:class "nav navbar-nav"}
[navbar-item "Introduction" :intro @section]
[navbar-item "Times per page" :url-times @section]
[navbar-item "Times per site" :site-times @section]
]
#_[:form {:class "navbar-form navbar-left", :role "search"}
[:div {:class "form-group"}
[:input {:type "text", :class "form-control", :placeholder "Search"}]]
[:button {:type "submit", :class "btn btn-default"} "Submit"]]
[:ul {:class "nav navbar-nav navbar-right"}
[navbar-item "Export" :export @section]
[navbar-item "Import" :import @section]]]]])))
[:ul {:class "nav"}
(nav-left-item "Introduction" "pe-7s-home" :intro @section)
(nav-left-item "Page times" "pe-7s-note2" :url-times @section)
(nav-left-item "Site times" "pe-7s-note2" :site-times @section)
(nav-left-item "Export data" "pe-7s-box1" :export @section)
(nav-left-item "Import data" "pe-7s-attention" :import @section)]))
)
(defn nav-top []
(let [section (subscribe [:ui-state :section])]
(fn []
[:div {:class "navbar-header"}
[:a {:class "navbar-brand"}
(condp = @section
:intro "About Relevance"
:url-times "Time reading a page"
:site-times "Time visiting a site"
:export "Export your Relevance data"
:import "Import a Relevance backup"
"")
]])))
;; We could actually move modal-confirm to a component namespace, parametrize it.
(defn modal-confirm []
......@@ -180,18 +186,18 @@
url
title)
display (if (< 100 (count label))
(apply str (concat(take 100 label) "..."))
(apply str (concat (take 100 label) "..."))
label)]
^{:key i}
[:tr
[:td {:class "col-sm-2"} (time-display (:time tab))]
[:td {:class "col-sm-9 col-sm-offset-1"} [:a
{:href url :target "_blank"}
(if favicon
[:img {:src favicon
:width 16
:height 16}])
display]]
{:href url :target "_blank"}
(if favicon
[:img {:src favicon
:width 16
:height 16}])
display]]
])))))
......@@ -201,16 +207,49 @@
url-values (reaction (filter-tabs (vals @url-times)))
to-list (reaction (sort-by #(* -1 (:time %)) @url-values))]
(fn []
[:div
[:div {:class "page-header"} [:h2 "Time reading at a page"]]
[:table {:class "table table-striped table-hover"}
[:thead
[:tr
[:th "#"]
[:th "Title"]]]
[:tbody
(list-urls @to-list @site-times)]
]])
[:div {:class "row"}
[:div {:class "card"}
[:div {:class "content table-responsive table-full-width"}
[:table {:class "table table-striped table-hover"}
[:thead
[:tr
[:th "Time"]
[:th "Title"]]]
[:tbody
(list-urls @to-list @site-times)]]]]
])
))
(defn div-sitetimes []
(let [site-times (subscribe [:data :site-times])
sites (reaction (vals @site-times))
to-list (reaction (sort-by #(* -1 (:time %)) @sites))]
(fn []
[:div {:class "row"}
[:div {:class "card"}
[:div {:class "content table-responsive table-full-width"}
[:table {:class "table table-striped table-hover"}
[:thead
[:tr
[:th "Time"]
[:th "Site"]]]
[:tbody
(->>
@to-list
(map-indexed
(fn [i site]
(let [url (:host site)
favicon (:favIconUrl site)]
^{:key i}
[:tr
[:td {:class "col-sm-1"} (time-display (:time site))]
[:td {:class "col-sm-6"} (if favicon
[:img {:src favicon
:width 16
:height 16}])
url]
]))))]
]]]])
))
(defn div-intro []
......@@ -257,42 +296,11 @@
]
)
(defn div-sitetimes []
(let [site-times (subscribe [:data :site-times])
sites (reaction (vals @site-times))
to-list (reaction (sort-by #(* -1 (:time %)) @sites))]
(fn []
[:div
[:div {:class "page-header"} [:h2 "Time spent at a site"]]
[:table {:class "table table-striped table-hover"}
[:thead
[:tr
[:th "#"]
[:th "Site"]]]
[:tbody
(->>
@to-list
(map-indexed
(fn [i site]
(let [url (:host site)
favicon (:favIconUrl site)]
^{:key i}
[:tr
[:td {:class "col-sm-1"} (time-display (:time site))]
[:td {:class "col-sm-6"} (if favicon
[:img {:src favicon
:width 16
:height 16}])
url]
]))))]
]])
))
(defn data-export []
(let [data (subscribe [:raw-data])]
(fn []
[:div
[:div {:class "col-sm-10 col-sm-offset-1"}
[:div {:class "page-header"} [:h2 "Current data"]]
[:p (str "Copy the text below to a safe location. Size: " (count @data))]
[:textarea {:class "form-control"
......@@ -306,7 +314,7 @@
(let [path [:app-state :import]
import-data (subscribe path)]
(fn []
[:div
[:div {:class "col-sm-10 col-sm-offset-1"}
[:div {:class "page-header"} [:h2 "Import data"]]
[:div {:class "alert alert-warning"}
[:h4 "Warning!"]
......@@ -341,7 +349,8 @@
(defn mount-components []
(reagent/render-component [navbar] (.getElementById js/document "navbar"))
(reagent/render-component [nav-left] (.getElementById js/document "nav-left"))
(reagent/render-component [nav-top] (.getElementById js/document "nav-top"))
(reagent/render-component [main-section] (.getElementById js/document "main-section")))
......
Markdown is supported
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