Skip to content

Commit

Permalink
Merge pull request #13 from ojdon/ui
Browse files Browse the repository at this point in the history
Code Night #1 Changes
  • Loading branch information
DivineOmega committed Jun 1, 2016
2 parents 9916bc2 + b6c7576 commit 2f20a32
Show file tree
Hide file tree
Showing 3 changed files with 205 additions and 62 deletions.
29 changes: 26 additions & 3 deletions config/urls.json.example
Original file line number Diff line number Diff line change
@@ -1,4 +1,27 @@
[
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/", "timeout": 3000 },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.example.com/" }
]
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.google.com/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://bbc.co.uk/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://getbootstrap.com/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.ebay.com/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.getbootstrap.com/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.google.com/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.google.com/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.google.com/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.google.com/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.google.com/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.google.com/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.google.com/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.google.com/" },
{ "siteName": "Jordan Hall", "pageName": "Homepage", "url": "http://jordanhall.co.uk/" },
{ "siteName": "Example.com", "pageName": "Homepage", "url": "http://www.google.com/", "testError": true }
]
167 changes: 139 additions & 28 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,100 @@
<title>Watchful Eyes</title>
<link href="./jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet">
<style>

@-webkit-keyframes scaleIn {
from {
-webkit-transform: scale(1,1); /* Safari */
transform: scale(1,1);
}
to {
-webkit-transform: scale(1.1,1.1); /* Safari */
transform: scale(1.1,1.1);
}
}

/* Standard syntax */
@keyframes mymove {
from {
-webkit-transform: scale(1,1); /* Safari */
transform: scale(1,1);
}
to {
-webkit-transform: scale(1.1,1.1); /* Safari */
transform: scale(1.1,1.1);
}
}


body {
margin: 0px;
background-color: #333;
background-color: #222;
font-size: 20px;
}

#urlObjects {
margin: 20px;
margin: 16px;
text-align: center;

}

.urlObjectLight {
.scaleIn {
animation-name: scaleIn;
animation-duration: 0.25s;
animation-fill-mode: forwards;
-webkit-animation-name: scaleIn;
-webkit-animation-duration: 0.25s;
-webkit-animation-fill-mode: forwards;
}

.urlObjectParent {
background: #ecf0f1;
width: 128px;
height: 128px;
position: relative;
float: left;
width: 40px;
height: 40px;
margin-right: 5px;
margin-bottom: 5px;
text-align: center;
}

.urlObjectParent img {
width: 128px;
height: 128px;
}

.urlObjectParent:hover {
cursor: pointer;
z-index: 111;
animation-name: scaleIn;
animation-duration: 0.25s;
animation-fill-mode: forwards;
-webkit-animation-name: scaleIn;
-webkit-animation-duration: 0.25s;
-webkit-animation-fill-mode: forwards;
}

.urlObjectLight {
width: 32px;
height: 32px;
background-color: #CCC;
border: 1px #333 solid;
border-radius: 50%;
position: absolute;
bottom: 5px;
right: 5px;
}

.urlObjectPageName {
width: 118px;
height: 20px;
opacity: 0.8;
overflow-y: hidden;
position: absolute;
top: 5px;
left: 5px;
font-size: 75%;
font-family: sans-serif;
background-color: #ccc;
}

.ui-tooltip {
Expand All @@ -38,9 +116,9 @@
var urlObjectsJSON = null;
var urlObjects = [];

var remote = require('remote');
var Menu = remote.require('menu');
var MenuItem = remote.require('menu-item');
const {remote} = require('electron');
const {Menu, MenuItem} = remote;


var appMenu = new Menu();

Expand Down Expand Up @@ -128,16 +206,27 @@

return requestDelaySeconds * 1000;
}

function stripUrl(url) {
url = url.split('/');
url = url[2];
if(url.indexOf('www.') == -1) {
url = 'www.'+url;
}
return url;
};

function checkUrlObject(index, urlObject)
{
var titlePrefix = '';
titlePrefix += 'Site name: ' + urlObject.siteName + '<br/>'
titlePrefix += 'Page name: ' + urlObject.pageName + '<br/>'
titlePrefix += 'URL: ' + urlObject.url + '<br/><hr/>';

var placeholderImageUrl = 'https://placeholdit.imgix.net/~text?txtsize=36&txt='+encodeURIComponent(urlObject.siteName)+'&w=128&h=128&txttrack=0';

if (!$('#urlObject'+index).length) {
$('#urlObjects').append('<div class="urlObjectLight" id="urlObject'+index+'" title="'+titlePrefix+'Not yet checked">');
var imgUrl = stripUrl(urlObject.url);
$('#urlObjects').append('<div class="urlObjectParent" id="urlObject'+index+'" title="'+titlePrefix+' Not yet checked"><img src="https://logo.clearbit.com/'+imgUrl+'" onerror="this.src=\''+placeholderImageUrl+'\'"><div class="urlObjectLight" ></div><div class="urlObjectPageName">'+urlObject.pageName+'</div>');
}

if (typeof urlObject.failures == 'undefined') {
Expand All @@ -148,13 +237,25 @@
urlObject.startedDate = null;
}

if (typeof urlObject.timeout == 'undefined') {
urlObject.timeout = 3000;
if (typeof urlObject.testError == 'undefined') {
urlObject.testError = false;
}

$('#urlObject'+index+'.urlObjectLight').css('border-color', '#CCC');
if (urlObject.testError == true) {
urlObject.failures = getFailureCountThreshold();
if (urlObject.startedDate===null) urlObject.startedDate = Date();
var colour = '#e74c3c',
borderColour = '#c0392b';
$('#urlObject'+index+' > .urlObjectLight').css('background-color', colour);
$('#urlObject'+index+' > .urlObjectLight').css('border', '1px solid '+ borderColour + '');
$('#urlObject'+index).attr('title', "Test error!");
return;
}

$('#urlObject'+index+' > .urlObjectLight').css('border', '1px solid #bdc3c7');
$('#urlObject'+index+' > .urlObjectLight').parent().addClass('scaleIn');

$.ajax({
$.ajax({
url: urlObject.url,
timeout: urlObject.timeout
}).fail(function(jqXHR, textStatus, errorThrown)
Expand All @@ -172,11 +273,13 @@

title += 'Ocurrences: ' + urlObject.failures + '<br/>';
title += 'Started: ' + urlObject.startedDate + '<br/>';

var colour = '#c00';

var colour = '#e74c3c',
borderColour = '#c0392b';

if (urlObject.failures < getFailureCountThreshold()) {
colour = '#FFA500'
colour = '#e67e22'
borderColour = '#d35400';
}

if (urlObject.failures == getFailureCountThreshold()) {
Expand All @@ -186,8 +289,9 @@
reportFailure(urlObject, title);
}

$('#urlObject'+index+'.urlObjectLight').css('background-color', colour);
$('#urlObject'+index+'.urlObjectLight').attr('title', title);
$('#urlObject'+index+' > .urlObjectLight').css('background-color', colour);
$('#urlObject'+index+' > .urlObjectLight').css('border', '1px solid '+ borderColour + '');
$('#urlObject'+index).attr('title', title);

}).done(function(data){

Expand Down Expand Up @@ -229,10 +333,12 @@
title += 'Ocurrences: ' + urlObject.failures + '<br/>';
title += 'Started: ' + urlObject.startedDate + '<br/>';

var colour = '#c00';
var colour = '#c0392b',
borderColour = '#c0392b';

if (urlObject.failures < getFailureCountThreshold()) {
colour = '#FFA500'
colour = '#f39c12'
borderColour = '#d35400';
}

if (urlObject.failures == getFailureCountThreshold()) {
Expand All @@ -242,8 +348,9 @@
reportFailure(urlObject, title);
}

$('#urlObject'+index+'.urlObjectLight').css('background-color', colour);
$('#urlObject'+index+'.urlObjectLight').attr('title', title);
$('#urlObject'+index+' > .urlObjectLight').css('background-color', colour);
$('#urlObject'+index+' > .urlObjectLight').css('border', '1px solid '+ borderColour +'');
$('#urlObject'+index).attr('title', title);

}
else {
Expand All @@ -253,16 +360,18 @@

var title = titlePrefix + 'No problems detected.';

$('#urlObject'+index+'.urlObjectLight').css('background-color', '#0c0');
$('#urlObject'+index+'.urlObjectLight').attr('title', title);
$('#urlObject'+index+' > .urlObjectLight').css('background-color', '#2ecc71');
$('#urlObject'+index+' > .urlObjectLight').css('border', '1px solid #27ae60');
$('#urlObject'+index).attr('title', title);

}

}).always(function()
{
$('#urlObject'+index+'.urlObjectLight').css('border-color', '#333');

$('#urlObject'+index+' > .urlObjectLight').parent().removeClass('scaleIn');
$('#urlObject'+index+' > .urlObjectLight').parent().addClass('scaleOut');
doSetTimeout(index, urlObject, false);

});
}

Expand Down Expand Up @@ -314,6 +423,8 @@
try
{
urlObjects = JSON.parse(urlObjectsJSON);

urlObjects.sort(function(a,b) {return (a.siteName > b.siteName) ? 1 : ((b.siteName > a.siteName) ? -1 : 0);} );
}
catch (e)
{
Expand Down
71 changes: 40 additions & 31 deletions start.js
Original file line number Diff line number Diff line change
@@ -1,44 +1,53 @@
var app = require('app'); // Module to control application life.

app.commandLine.appendSwitch('disable-http-cache');

var BrowserWindow = require('browser-window'); // Module to create native browser window.
const electron = require('electron');
// Module to control application life.

// Report crashes to our server.
require('crash-reporter').start();
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});

// This method will be called when Electron has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {

// Create the browser window.
mainWindow = new BrowserWindow({width: 1000, height: 700, icon: 'g', fullscreen: false});
// be closed automatically when the JavaScript object is garbage collected.
let win;
app.commandLine.appendSwitch('disable-http-cache');
function createWindow() {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600});

// Maximize
mainWindow.maximize();
// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`);

// and load the index.html of the app.
mainWindow.loadUrl('file://' + __dirname + '/index.html');
// Open the DevTools.
win.webContents.openDevTools();

// Open the devtools.
//mainWindow.openDevTools();
// Emitted when the window is closed.
win.on('closed', () => {

// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
win = null;
});
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});

app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
}
});

0 comments on commit 2f20a32

Please sign in to comment.