From df39fe204301d7b2ca3639fe620dd01fd7498abb Mon Sep 17 00:00:00 2001
From: Dominic Bosch <dominicsfakeaddress@server.fake>
Date: Sun, 27 Apr 2014 13:20:08 +0200
Subject: [PATCH] Clean state again. With user friendly features

---
 coffee/components-manager.coffee              |   1 +
 coffee/engine.coffee                          |   2 +-
 coffee/event-poller.coffee                    |   2 +-
 js/components-manager.js                      |   1 +
 js/engine.js                                  |   2 +-
 js/event-poller.js                            |   2 +-
 webpages/handlers/coffee/forge_rule.coffee    | 222 ++++++++-------
 webpages/handlers/coffee/forge_webhook.coffee |   7 +-
 webpages/handlers/js/forge_rule.js            | 257 ++++++++++--------
 webpages/handlers/js/forge_webhook.js         |  11 +-
 webpages/handlers/templates/forge_event.html  |   4 +-
 webpages/handlers/templates/forge_rule.html   |   6 +-
 webpages/public/style.css                     |  14 +
 13 files changed, 316 insertions(+), 215 deletions(-)

diff --git a/coffee/components-manager.coffee b/coffee/components-manager.coffee
index 903f6e8..b6733bf 100644
--- a/coffee/components-manager.coffee
+++ b/coffee/components-manager.coffee
@@ -229,6 +229,7 @@ storeRule = ( user, oBody, callback ) =>
 	# This is how a rule is stored in the database
 		rule =
 			id: oBody.id
+			eventtype: oBody.eventtype
 			eventname: oBody.eventname
 			eventstart: oBody.eventstart
 			eventinterval: oBody.eventinterval
diff --git a/coffee/engine.coffee b/coffee/engine.coffee
index 20b3698..441940f 100644
--- a/coffee/engine.coffee
+++ b/coffee/engine.coffee
@@ -273,7 +273,7 @@ processEvent = ( evt ) =>
 			fSearchAndInvokeAction node[arrPath[depth]], arrPath, funcName, evt, depth + 1
 
 	@log.info 'EN | Processing event: ' + evt.eventname
-	fCheckEventForUser = ( userName, oUser ) ->
+	fCheckEventForUser = ( userName, oUser ) =>
 		for ruleName, oMyRule of oUser
 
 			ruleEvent = oMyRule.rule.eventname
diff --git a/coffee/event-poller.coffee b/coffee/event-poller.coffee
index a93663b..99b4ee5 100644
--- a/coffee/event-poller.coffee
+++ b/coffee/event-poller.coffee
@@ -81,7 +81,7 @@ fLoadModule = ( msg ) ->
 	fAnonymous = () ->
 		db.eventPollers.getModule msg.user, arrName[ 0 ], ( err, obj ) ->
 			if not obj
-				log.warn "EP | Strange... no module retrieved: #{ arrName[0] }"
+				log.info "EP | No module retrieved for #{ arrName[0] }, must be a custom event or Webhook"
 			else
 				 # we compile the module and pass: 
 				dynmod.compileString obj.data,  # code
diff --git a/js/components-manager.js b/js/components-manager.js
index 06e53bd..c80ba04 100644
--- a/js/components-manager.js
+++ b/js/components-manager.js
@@ -321,6 +321,7 @@ Components Manager
       var args, arr, epModId, eventInfo, id, oFuncArgs, oParams, params, rule, strRule;
       rule = {
         id: oBody.id,
+        eventtype: oBody.eventtype,
         eventname: oBody.eventname,
         eventstart: oBody.eventstart,
         eventinterval: oBody.eventinterval,
diff --git a/js/engine.js b/js/engine.js
index 1b73ce2..390c65b 100644
--- a/js/engine.js
+++ b/js/engine.js
@@ -357,7 +357,7 @@ Engine
             ruleEvent += '_created:' + oMyRule.rule.timestamp;
           }
           if (evt.eventname === ruleEvent && validConditions(evt, oMyRule.rule, userName, ruleName)) {
-            this.log.info('EN | EVENT FIRED: ' + evt.eventname + ' for rule ' + ruleName);
+            _this.log.info('EN | EVENT FIRED: ' + evt.eventname + ' for rule ' + ruleName);
             _results.push((function() {
               var _i, _len, _ref, _results1;
               _ref = oMyRule.rule.actions;
diff --git a/js/event-poller.js b/js/event-poller.js
index ea44492..fdab541 100644
--- a/js/event-poller.js
+++ b/js/event-poller.js
@@ -88,7 +88,7 @@ Dynamic Modules
     fAnonymous = function() {
       return db.eventPollers.getModule(msg.user, arrName[0], function(err, obj) {
         if (!obj) {
-          return log.warn("EP | Strange... no module retrieved: " + arrName[0]);
+          return log.info("EP | No module retrieved for " + arrName[0] + ", must be a custom event or Webhook");
         } else {
           return dynmod.compileString(obj.data, msg.user, msg.rule, arrName[0], obj.lang, "eventpoller", db.eventPollers, function(result) {
             var nd, now, oUser, start;
diff --git a/webpages/handlers/coffee/forge_rule.coffee b/webpages/handlers/coffee/forge_rule.coffee
index 64a0097..3fc686f 100644
--- a/webpages/handlers/coffee/forge_rule.coffee
+++ b/webpages/handlers/coffee/forge_rule.coffee
@@ -34,22 +34,34 @@ el = $( '<select>' ).attr( 'type', 'text' )
 el.change () ->	fFetchEventParams $( this ).val()
 domSelectEventPoller.append $( '<h4>' ).text( 'Event Poller Name : ' ).append el
 
-domInputStartTime = $( '<div>' ).attr( 'class', 'indent20' ).html "Start Time :
-	<input id=\"input_start\" type=\"text\" /> <b>\"hh:mm\"</b>, default = 12:00"
+domInputEventTiming = $( '<div>' ).attr( 'class', 'indent20' )
+table = $( '<table>' ).appendTo domInputEventTiming
+tr = $( '<tr>' ).appendTo table
+tr.append $( '<td>' ).text "Start Time : "
+tr.append $( '<td>' ).append $( '<input>' ).attr( 'id', 'input_start' ).attr( 'type', 'text' )
+tr.append $( '<td>' ).html " <b>\"hh:mm\"</b>, default = 12:00"
 
-domInputInterval = $( '<div>' ).attr( 'class', 'indent20' ).html "Interval :
-	<input id=\"input_interval\" type=\"text\" /> <b>\"days hours:minutes\"</b>, default = 10 minutes"
+tr = $( '<tr>' ).appendTo table
+tr.append $( '<td>' ).text "Interval : "
+tr.append $( '<td>' ).append $( '<input>' ).attr( 'id', 'input_interval' ).attr( 'type', 'text' )
+tr.append $( '<td>' ).html " <b>\"days hours:minutes\"</b>, default = 10 minutes"
 
 domEventPollerParameters = $( '<div>' ).attr 'id', 'event_poller_params'
 
-domTableSelectedActions = $( '<table> ' ).attr( 'id', 'selected_actions' )
-domDivActionUserParams = $( '<div>' ).attr( 'id', 'action_invoker_params' )
-$( '#action_parameters' ).append $( '<div>' ).html "<b>Selected Actions:</b>"
-$( '#action_parameters' ).append domTableSelectedActions
-$( '#action_parameters' ).append $( '<div>' ).html "<br><br><b>Required Parameters:</b><br><br>"
-$( '#action_parameters' ).append domDivActionUserParams
-$( '#action_parameters' ).append $( '<div>' ).html "<br><br>"
+domSectionSelectedActions = $( '<div>' )
+domSectionSelectedActions.append $( '<div>' ).html "<b>Selected Actions:</b>"
+domSectionSelectedActions.append $( '<table> ' ).attr( 'id', 'selected_actions' )
+domSectionSelectedActions.hide()
 
+domSectionActionParameters = $( '<div>' )
+domSectionActionParameters.append $( '<div>' ).html "<br><br><b>Required Parameters:</b><br><br>"
+domSectionActionParameters.append $( '<div>' ).attr( 'id', 'action_invoker_params' )
+domSectionActionParameters.append $( '<div>' ).html "<br><br>"
+domSectionActionParameters.hide()
+
+fClearInfo = () ->
+	$( '#info' ).text ''
+	$( '#info' ).attr 'class', 'neutral'
 
 fDisplayError = ( msg ) ->
 	window.scrollTo 0, 0
@@ -64,23 +76,22 @@ fFailedRequest = ( msg ) ->
 			fDisplayError msg
 
 fIssueRequest = ( args ) ->
-	$( '#info' ).text ''
+	fClearInfo()
 	$.post( '/usercommand', args.data )
 		.done args.done
 		.fail args.fail
 
 # Convert a time string ( d h:m ) to a date
 fConvertTimeToDate = ( str ) ->
-	txtStart = $( '#input_start' ).val()
 	dateConv = new Date()
-	if not txtStart
+	if not str
 		dateConv.setHours 12
 		dateConv.setMinutes 0
 	else
-		arrInp = txtStart.split ':'
+		arrInp = str.split ':'
 		# There's only one string entered: hour
 		if arrInp.length is 1
-			txtHr = txtStart
+			txtHr = str
 			dateConv.setMinutes 0
 		else
 			txtHr = arrInp[ 0 ]
@@ -189,8 +200,7 @@ fPrepareEventType = ( eventtype ) ->
 
 						else
 							$( '#event_parameters' ).append domSelectEventPoller
-							$( '#event_parameters' ).append domInputStartTime
-							$( '#event_parameters' ).append domInputInterval
+							$( '#event_parameters' ).append domInputEventTiming.show()
 
 							$( '#select_eventpoller option' ).remove()
 							for id, events of oEps
@@ -206,8 +216,6 @@ fPrepareEventType = ( eventtype ) ->
 
 # Fetch the required Event Poller parameters
 fFetchEventParams = ( name ) ->
-	console.log 'fetching event params'
-	console.log name
 	$( '#event_poller_params *' ).remove()
 	if name
 		$( '#event_parameters' ).append domEventPollerParameters
@@ -223,7 +231,6 @@ fFetchEventParams = ( name ) ->
 
 fDisplayEventParams = ( id ) ->
 	( data ) ->
-		console.log 'displaying event parameters'
 		if data.message
 			oParams = JSON.parse data.message
 			table = $ '<table>'
@@ -250,8 +257,6 @@ fFillEventParams = ( moduleId ) ->
 			body: JSON.stringify
 				id: moduleId
 		done: ( data ) ->
-			console.log 'filling event params: '
-			console.log data
 			oParams = JSON.parse data.message
 			for param, oParam of oParams
 				par = $( "#event_poller_params tr" ).filter () ->
@@ -269,7 +274,6 @@ fFetchEventFunctionArgs = ( arrName ) ->
 			body: JSON.stringify
 				id: arrName[ 0 ]
 		done: ( data ) ->
-			console.log 'fetching event function arguments: '
 			if data.message
 				oParams = JSON.parse data.message
 				if oParams[ arrName[ 1 ] ]
@@ -286,21 +290,18 @@ fFetchEventFunctionArgs = ( arrName ) ->
 						td = $( '<td>' ).appendTo tr
 						td.append $( '<input>' ).attr 'type', 'text'
 						tr.append td
-
 					fIssueRequest
 						data:
 							command: 'get_event_poller_user_arguments'
 							body: JSON.stringify
 								ruleId: $( '#input_id' ).val()
-								moduleId: moduleId
-						done: fAddEventUserArgs moduleId
+								moduleId: arrName[ 0 ]
+						done: fAddEventUserArgs arrName[ 1 ]
 
 		fail: fFailedRequest 'Error fetching event poller function arguments'
 
 fAddEventUserArgs = ( name ) ->
 	( data ) ->
-		console.log 'filling event funcction arguments: '
-		console.log data
 		for key, arrFuncs of data.message
 			par = $ "#event_poller_params"
 			for oFunc in JSON.parse arrFuncs
@@ -327,11 +328,7 @@ fAddSelectedAction = ( name ) ->
 	td = $( '<td>' ).attr( 'class', 'funcMappings').appendTo tr
 	fFetchActionFunctionArgs td, arrName
 	if arrName[ 0 ] not in arrEls
-		div = $( '<div>' ).appendTo $( '#action_invoker_params' )
-		subdiv = $( '<div> ').appendTo div 
-		subdiv.append $( '<div>' )
-			.attr( 'class', 'modName underlined' ).text arrName[ 0 ]
-		fFetchActionParams div, arrName[ 0 ]
+		fFetchActionParams arrName[ 0 ]
 	$( "#select_actions option" ).each () ->
 		if $( this ).text() is name
 			$( this ).remove()
@@ -339,7 +336,7 @@ fAddSelectedAction = ( name ) ->
 		fFillActionFunction arrName[ 0 ]
 	setTimeout fDelayed, 300
 
-fFetchActionParams = ( div, modName ) ->
+fFetchActionParams = ( modName ) ->
 	fIssueRequest
 		data: 
 			command: 'get_action_invoker_params'
@@ -348,20 +345,26 @@ fFetchActionParams = ( div, modName ) ->
 		done: ( data ) ->
 			if data.message
 				oParams = JSON.parse data.message
-				table = $ '<table>'
-				div.append table
-				fAppendActionParam = ( name, shielded ) ->
-					tr = $( '<tr>' )
-					tr.append $( '<td>' ).css 'width', '20px'
-					tr.append $( '<td>' ).attr( 'class', 'key').text name
-					inp = $( '<input>' )
-					if shielded
-						inp.attr( 'type', 'password' )
-					else
-						inp.attr( 'type', 'text' )
-					tr.append $( '<td>' ).text(' : ').append inp
-					table.append tr
-				fAppendActionParam name, sh for name, sh of oParams
+				if JSON.stringify( oParams ) isnt '{}'
+					domSectionActionParameters.show()
+					div = $( '<div>' ).appendTo $( '#action_invoker_params' )
+					subdiv = $( '<div> ').appendTo div 
+					subdiv.append $( '<div>' )
+						.attr( 'class', 'modName underlined' ).text modName
+					table = $ '<table>'
+					div.append table
+					for name, shielded of oParams
+						tr = $( '<tr>' )
+						tr.append $( '<td>' ).css 'width', '20px'
+						tr.append $( '<td>' ).attr( 'class', 'key').text name
+						inp = $( '<input>' )
+						if shielded
+							inp.attr( 'type', 'password' )
+						else
+							inp.attr( 'type', 'text' )
+						tr.append $( '<td>' ).text(' : ').append inp
+						table.append tr
+
 		fail: fFailedRequest 'Error fetching action invoker params'
 
 fFetchActionFunctionArgs = ( tag, arrName ) ->
@@ -450,6 +453,21 @@ fOnLoad = () ->
 	editor.getSession().setMode "ace/mode/json"
 	editor.setShowPrintMargin false
 
+	$( '#fill_example' ).click () ->
+		editor.setValue """
+
+			[
+				{
+					"selector": ".nested_property",
+					"type": "string",
+					"operator": "<=",
+					"compare": "has this value"
+				}
+			]
+			"""
+
+	$( '#action_parameters' ).append domSectionSelectedActions
+	$( '#action_parameters' ).append domSectionActionParameters
 	$( '#input_id' ).focus()
 
 
@@ -503,32 +521,32 @@ fOnLoad = () ->
 
 
 	$( '#select_actions' ).on 'change', () ->
-		$( '#action_parameters' ).append domTableSelectedActions	
+		domSectionSelectedActions.show()
 		opt = $ 'option:selected', this
 		fAddSelectedAction opt.text()
 		
 	$( '#selected_actions' ).on 'click', 'img', () ->
-		console.log 'click'
 		act = $( this ).closest( 'td' ).siblings( '.title' ).text()
 		arrName = act.split ' -> '
 
-		i = 0
 		nMods = 0
 		# Check whether we're the only function left that was selected from this module
 		$( "#selected_actions td.title" ).each () ->
-			i++
 			arrNm = $( this ).text().split ' -> '
 			nMods++ if arrNm[ 0 ] is arrName[ 0 ]
 
-		# If we are the last selected action we detach the whole action parameter section
-		if i is 1
-			$( '#action_parameters > *' ).detach()
-
 		if nMods is 1
 			$('#action_invoker_params > div').each () ->
 				if $( this ).children( 'div.modName' ).text() is arrName[ 0 ]
 					$( this ).remove()
 
+		# Hide if nothing to show
+		if $('#selected_actions td.title').length is 0
+			domSectionSelectedActions.hide()
+
+		if $('#action_invoker_params > div').length is 0
+			domSectionActionParameters.hide()
+
 		opt = $( '<option>' ).text act
 		$( '#select_actions' ).append opt
 		$( this ).closest( 'tr' ).remove()
@@ -538,7 +556,7 @@ fOnLoad = () ->
 
 	$( '#but_submit' ).click () ->
 		window.scrollTo 0, 0
-		$( '#info' ).text ''
+		fClearInfo()
 
 		try
 			if $( '#input_id' ).val() is ''
@@ -562,6 +580,7 @@ fOnLoad = () ->
 					eventname = $( '#select_eventhook' ).val()
 
 				when 'Event Poller'
+					eventname = $( '#select_eventpoller' ).val()
 					ep = {}
 					$( "#event_poller_params tr" ).each () ->
 						key = $( this ).children( '.key' ).text()
@@ -579,9 +598,9 @@ fOnLoad = () ->
 							ep[ key ].value = val
 
 					evtFuncs = {}
-					evtFuncs[ eventId ] = []
+					evtFuncs[ eventname ] = []
 					$( '#event_poller_params tr.funcMappings' ).each () ->
-						evtFuncs[ eventId ].push
+						evtFuncs[ eventname ].push
 							argument: $( 'div.funcarg', this ).text()
 							value: $( 'input[type=text]', this ).val()
 
@@ -654,26 +673,26 @@ fOnLoad = () ->
 					else
 						fFailedRequest( "#{ obj.id } not stored!" ) err
 
-			if $( '#select_event_type' ) is 'Event Poller'
-				start = fConvertTimeToDate $( '#input_start' ).val().toISOString()
+			if $( '#select_event_type' ).val() is 'Event Poller'
+				start = fConvertTimeToDate( $( '#input_start' ).val() ).toISOString()
 				mins = fConvertDayHourToMinutes $( '#input_interval' ).val()
 
-			obj =
-			console.log obj
+			obj = 
+				command: 'forge_rule'
+				body: JSON.stringify
+					id: $( '#input_id' ).val()
+					eventtype: eventtype
+					eventname: eventname
+					eventparams: ep
+					eventstart: start
+					eventinterval: mins
+					eventfunctions: evtFuncs
+					conditions: conds
+					actions: acts
+					actionparams: ap
+					actionfunctions: actFuncs
 			fIssueRequest
-				data: 
-					command: 'forge_rule'
-					body: JSON.stringify
-						id: $( '#input_id' ).val()
-						eventname: eventId
-						eventparams: ep
-						eventstart: start
-						eventinterval: mins
-						eventfunctions: evtFuncs
-						conditions: conds
-						actions: acts
-						actionparams: ap
-						actionfunctions: actFuncs
+				data: obj
 				done: ( data ) ->
 					$( '#info' ).text data.message
 					$( '#info' ).attr 'class', 'success'
@@ -686,35 +705,52 @@ fOnLoad = () ->
 # Edit a Rule
 # -----------
 	if oParams.id
-		obj =
-			command: 'get_rule'
-			data: JSON.stringify
-				id: oParams.id
 		fIssueRequest
-			data: obj
+			data: 
+				command: 'get_rule'
+				body: JSON.stringify
+					id: oParams.id
 			done: ( data ) ->
 				oRule = JSON.parse data.message
 				if oRule
 					$( '#input_id' ).val oRule.id
 					
 					# Event
-					$( '#select_event' ).val oRule.eventname
-					if $( '#select_event' ).val() isnt ''
-						fFetchEventParams oRule.eventname
-						fPlaceAndPaintInterval()
+					fPrepareEventType oRule.eventtype
+					switch oRule.eventtype
+						when 'Event Poller'
+							$( '#select_event' ).val oRule.eventname
+							if $( '#select_event' ).val() isnt ''
+								fFetchEventParams oRule.eventname
+								$( '#input_event' ).val oRule.eventname
+								d = new Date oRule.eventstart 
+								mins = d.getMinutes()
+								if mins.toString().length is 1
+										mins = '0' + mins
+								$( '#input_start', domInputEventTiming ).val d.getHours() + ':' + mins
+								$( '#input_interval', domInputEventTiming ).val oRule.eventinterval
 
-					$( '#input_event' ).val oRule.eventname
-					d = new Date oRule.eventstart 
-					mins = d.getMinutes()
-					if mins.toString().length is 1
-							mins = '0' + mins
-					$( '#input_start' ).val d.getHours() + ':' + mins
-					$( '#input_interval' ).val oRule.eventinterval
+							else
+								window.scrollTo 0, 0
+								$( '#info' ).text 'Error loading Rule: Your Event Poller does not exist anymore!'
+								$( '#info' ).attr 'class', 'error'
+
+						when 'Webhook'
+							$( '#select_eventhook' ).val oRule.eventname
+
+							if $( '#select_eventhook' ).val() is ''
+								window.scrollTo 0, 0
+								$( '#info' ).text 'Your Webhook does not exist anymore!'
+								$( '#info' ).attr 'class', 'error'
+
+						when 'Custom Event'
+							$( '#input_eventname' ).val oRule.eventname
 
 					# Conditions
 					editor.setValue JSON.stringify oRule.conditions, undefined, 2
 
 					# Actions
+					domSectionSelectedActions.show()
 					for action in oRule.actions
 						arrName = action.split ' -> '
 						fAddSelectedAction action
diff --git a/webpages/handlers/coffee/forge_webhook.coffee b/webpages/handlers/coffee/forge_webhook.coffee
index 05041bf..6c35c09 100644
--- a/webpages/handlers/coffee/forge_webhook.coffee
+++ b/webpages/handlers/coffee/forge_webhook.coffee
@@ -10,6 +10,9 @@ if oParams.id
 
 hostUrl = [ location.protocol, '//', location.host ].join ''
 
+fClearInfo = () ->
+	$( '#info' ).text ''
+	$( '#info' ).attr 'class', 'neutral'
 
 fDisplayError = ( msg ) ->
 	window.scrollTo 0, 0
@@ -18,7 +21,7 @@ fDisplayError = ( msg ) ->
 
 
 fIssueRequest = ( args ) ->
-	$( '#info' ).text ''
+	fClearInfo()
 	$.post( '/usercommand', args.body )
 		.done args.done
 		.fail args.fail
@@ -87,7 +90,7 @@ fOnLoad = () ->
 
 	# Register button action
 	$( '#but_submit' ).click ->
-		$( '#info' ).text ''
+		fClearInfo()
 
 		hookname = $( '#inp_hookname' ).val()
 		if hookname is ''
diff --git a/webpages/handlers/js/forge_rule.js b/webpages/handlers/js/forge_rule.js
index f4d508d..9d88b6e 100644
--- a/webpages/handlers/js/forge_rule.js
+++ b/webpages/handlers/js/forge_rule.js
@@ -1,6 +1,6 @@
 // Generated by CoffeeScript 1.7.1
 (function() {
-  var arrKV, arrParams, domDivActionUserParams, domEventPollerParameters, domInputEventName, domInputInterval, domInputStartTime, domSelectEventPoller, domSelectWebhook, domTableSelectedActions, el, fAddActionUserArgs, fAddActionUserParams, fAddEventUserArgs, fAddSelectedAction, fConvertDayHourToMinutes, fConvertTimeToDate, fDisplayError, fDisplayEventParams, fFailedRequest, fFetchActionFunctionArgs, fFetchActionParams, fFetchEventFunctionArgs, fFetchEventParams, fFillActionFunction, fFillEventParams, fIssueRequest, fOnLoad, fPrepareEventType, oParams, param, strPublicKey, _i, _len,
+  var arrKV, arrParams, domEventPollerParameters, domInputEventName, domInputEventTiming, domSectionActionParameters, domSectionSelectedActions, domSelectEventPoller, domSelectWebhook, el, fAddActionUserArgs, fAddActionUserParams, fAddEventUserArgs, fAddSelectedAction, fClearInfo, fConvertDayHourToMinutes, fConvertTimeToDate, fDisplayError, fDisplayEventParams, fFailedRequest, fFetchActionFunctionArgs, fFetchActionParams, fFetchEventFunctionArgs, fFetchEventParams, fFillActionFunction, fFillEventParams, fIssueRequest, fOnLoad, fPrepareEventType, oParams, param, strPublicKey, table, tr, _i, _len,
     __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
   strPublicKey = '';
@@ -41,25 +41,50 @@
 
   domSelectEventPoller.append($('<h4>').text('Event Poller Name : ').append(el));
 
-  domInputStartTime = $('<div>').attr('class', 'indent20').html("Start Time : <input id=\"input_start\" type=\"text\" /> <b>\"hh:mm\"</b>, default = 12:00");
+  domInputEventTiming = $('<div>').attr('class', 'indent20');
 
-  domInputInterval = $('<div>').attr('class', 'indent20').html("Interval : <input id=\"input_interval\" type=\"text\" /> <b>\"days hours:minutes\"</b>, default = 10 minutes");
+  table = $('<table>').appendTo(domInputEventTiming);
+
+  tr = $('<tr>').appendTo(table);
+
+  tr.append($('<td>').text("Start Time : "));
+
+  tr.append($('<td>').append($('<input>').attr('id', 'input_start').attr('type', 'text')));
+
+  tr.append($('<td>').html(" <b>\"hh:mm\"</b>, default = 12:00"));
+
+  tr = $('<tr>').appendTo(table);
+
+  tr.append($('<td>').text("Interval : "));
+
+  tr.append($('<td>').append($('<input>').attr('id', 'input_interval').attr('type', 'text')));
+
+  tr.append($('<td>').html(" <b>\"days hours:minutes\"</b>, default = 10 minutes"));
 
   domEventPollerParameters = $('<div>').attr('id', 'event_poller_params');
 
-  domTableSelectedActions = $('<table> ').attr('id', 'selected_actions');
+  domSectionSelectedActions = $('<div>');
 
-  domDivActionUserParams = $('<div>').attr('id', 'action_invoker_params');
+  domSectionSelectedActions.append($('<div>').html("<b>Selected Actions:</b>"));
 
-  $('#action_parameters').append($('<div>').html("<b>Selected Actions:</b>"));
+  domSectionSelectedActions.append($('<table> ').attr('id', 'selected_actions'));
 
-  $('#action_parameters').append(domTableSelectedActions);
+  domSectionSelectedActions.hide();
 
-  $('#action_parameters').append($('<div>').html("<br><br><b>Required Parameters:</b><br><br>"));
+  domSectionActionParameters = $('<div>');
 
-  $('#action_parameters').append(domDivActionUserParams);
+  domSectionActionParameters.append($('<div>').html("<br><br><b>Required Parameters:</b><br><br>"));
 
-  $('#action_parameters').append($('<div>').html("<br><br>"));
+  domSectionActionParameters.append($('<div>').attr('id', 'action_invoker_params'));
+
+  domSectionActionParameters.append($('<div>').html("<br><br>"));
+
+  domSectionActionParameters.hide();
+
+  fClearInfo = function() {
+    $('#info').text('');
+    return $('#info').attr('class', 'neutral');
+  };
 
   fDisplayError = function(msg) {
     window.scrollTo(0, 0);
@@ -78,21 +103,20 @@
   };
 
   fIssueRequest = function(args) {
-    $('#info').text('');
+    fClearInfo();
     return $.post('/usercommand', args.data).done(args.done).fail(args.fail);
   };
 
   fConvertTimeToDate = function(str) {
-    var arrInp, dateConv, h, intHour, intMin, m, txtHr, txtStart;
-    txtStart = $('#input_start').val();
+    var arrInp, dateConv, h, intHour, intMin, m, txtHr;
     dateConv = new Date();
-    if (!txtStart) {
+    if (!str) {
       dateConv.setHours(12);
       dateConv.setMinutes(0);
     } else {
-      arrInp = txtStart.split(':');
+      arrInp = str.split(':');
       if (arrInp.length === 1) {
-        txtHr = txtStart;
+        txtHr = str;
         dateConv.setMinutes(0);
       } else {
         txtHr = arrInp[0];
@@ -202,8 +226,7 @@
                 return $('#select_event_type').val('');
               } else {
                 $('#event_parameters').append(domSelectEventPoller);
-                $('#event_parameters').append(domInputStartTime);
-                $('#event_parameters').append(domInputInterval);
+                $('#event_parameters').append(domInputEventTiming.show());
                 $('#select_eventpoller option').remove();
                 for (id in oEps) {
                   events = oEps[id];
@@ -226,8 +249,6 @@
 
   fFetchEventParams = function(name) {
     var arr;
-    console.log('fetching event params');
-    console.log(name);
     $('#event_poller_params *').remove();
     if (name) {
       $('#event_parameters').append(domEventPollerParameters);
@@ -248,8 +269,7 @@
 
   fDisplayEventParams = function(id) {
     return function(data) {
-      var i, inp, name, shielded, table, tr;
-      console.log('displaying event parameters');
+      var i, inp, name, shielded;
       if (data.message) {
         oParams = JSON.parse(data.message);
         table = $('<table>');
@@ -286,8 +306,6 @@
       },
       done: function(data) {
         var oParam, par, _results;
-        console.log('filling event params: ');
-        console.log(data);
         oParams = JSON.parse(data.message);
         _results = [];
         for (param in oParams) {
@@ -315,8 +333,7 @@
         })
       },
       done: function(data) {
-        var functionArgument, table, td, tr, _j, _len1, _ref;
-        console.log('fetching event function arguments: ');
+        var functionArgument, td, _j, _len1, _ref;
         if (data.message) {
           oParams = JSON.parse(data.message);
           if (oParams[arrName[1]]) {
@@ -342,10 +359,10 @@
                 command: 'get_event_poller_user_arguments',
                 body: JSON.stringify({
                   ruleId: $('#input_id').val(),
-                  moduleId: moduleId
+                  moduleId: arrName[0]
                 })
               },
-              done: fAddEventUserArgs(moduleId)
+              done: fAddEventUserArgs(arrName[1])
             });
           }
         }
@@ -356,9 +373,7 @@
 
   fAddEventUserArgs = function(name) {
     return function(data) {
-      var arrFuncs, key, oFunc, par, tr, _ref, _results;
-      console.log('filling event funcction arguments: ');
-      console.log(data);
+      var arrFuncs, key, oFunc, par, _ref, _results;
       _ref = data.message;
       _results = [];
       for (key in _ref) {
@@ -383,7 +398,7 @@
   };
 
   fAddSelectedAction = function(name) {
-    var arrEls, arrName, div, fDelayed, img, subdiv, table, td, tr, _ref;
+    var arrEls, arrName, fDelayed, img, td, _ref;
     arrName = name.split(' -> ');
     arrEls = $("#action_invoker_params div.modName").map(function() {
       return $(this).text();
@@ -396,10 +411,7 @@
     td = $('<td>').attr('class', 'funcMappings').appendTo(tr);
     fFetchActionFunctionArgs(td, arrName);
     if (_ref = arrName[0], __indexOf.call(arrEls, _ref) < 0) {
-      div = $('<div>').appendTo($('#action_invoker_params'));
-      subdiv = $('<div> ').appendTo(div);
-      subdiv.append($('<div>')).attr('class', 'modName underlined').text(arrName[0]);
-      fFetchActionParams(div, arrName[0]);
+      fFetchActionParams(arrName[0]);
     }
     $("#select_actions option").each(function() {
       if ($(this).text() === name) {
@@ -412,7 +424,7 @@
     return setTimeout(fDelayed, 300);
   };
 
-  fFetchActionParams = function(div, modName) {
+  fFetchActionParams = function(modName) {
     return fIssueRequest({
       data: {
         command: 'get_action_invoker_params',
@@ -421,31 +433,33 @@
         })
       },
       done: function(data) {
-        var fAppendActionParam, name, sh, table, _results;
+        var div, inp, name, shielded, subdiv, _results;
         if (data.message) {
           oParams = JSON.parse(data.message);
-          table = $('<table>');
-          div.append(table);
-          fAppendActionParam = function(name, shielded) {
-            var inp, tr;
-            tr = $('<tr>');
-            tr.append($('<td>').css('width', '20px'));
-            tr.append($('<td>').attr('class', 'key').text(name));
-            inp = $('<input>');
-            if (shielded) {
-              inp.attr('type', 'password');
-            } else {
-              inp.attr('type', 'text');
+          if (JSON.stringify(oParams) !== '{}') {
+            domSectionActionParameters.show();
+            div = $('<div>').appendTo($('#action_invoker_params'));
+            subdiv = $('<div> ').appendTo(div);
+            subdiv.append($('<div>')).attr('class', 'modName underlined').text(modName);
+            table = $('<table>');
+            div.append(table);
+            _results = [];
+            for (name in oParams) {
+              shielded = oParams[name];
+              tr = $('<tr>');
+              tr.append($('<td>').css('width', '20px'));
+              tr.append($('<td>').attr('class', 'key').text(name));
+              inp = $('<input>');
+              if (shielded) {
+                inp.attr('type', 'password');
+              } else {
+                inp.attr('type', 'text');
+              }
+              tr.append($('<td>').text(' : ').append(inp));
+              _results.push(table.append(tr));
             }
-            tr.append($('<td>').text(' : ').append(inp));
-            return table.append(tr);
-          };
-          _results = [];
-          for (name in oParams) {
-            sh = oParams[name];
-            _results.push(fAppendActionParam(name, sh));
+            return _results;
           }
-          return _results;
         }
       },
       fail: fFailedRequest('Error fetching action invoker params')
@@ -461,7 +475,7 @@
         })
       },
       done: function(data) {
-        var functionArgument, table, td, tr, _j, _len1, _ref, _results;
+        var functionArgument, td, _j, _len1, _ref, _results;
         if (data.message) {
           oParams = JSON.parse(data.message);
           if (oParams[arrName[1]]) {
@@ -533,7 +547,7 @@
 
   fAddActionUserArgs = function(name) {
     return function(data) {
-      var arrFuncs, key, oFunc, par, tr, _ref, _results;
+      var arrFuncs, key, oFunc, par, _ref, _results;
       _ref = data.message;
       _results = [];
       for (key in _ref) {
@@ -560,7 +574,7 @@
   };
 
   fOnLoad = function() {
-    var editor, obj;
+    var editor;
     fIssueRequest({
       data: {
         command: 'get_public_key'
@@ -582,6 +596,11 @@
     editor.setTheme("ace/theme/monokai");
     editor.getSession().setMode("ace/mode/json");
     editor.setShowPrintMargin(false);
+    $('#fill_example').click(function() {
+      return editor.setValue("\n[\n	{\n		\"selector\": \".nested_property\",\n		\"type\": \"string\",\n		\"operator\": \"<=\",\n		\"compare\": \"has this value\"\n	}\n]");
+    });
+    $('#action_parameters').append(domSectionSelectedActions);
+    $('#action_parameters').append(domSectionActionParameters);
     $('#input_id').focus();
     $('#select_event_type').change(function() {
       return fPrepareEventType($(this).val());
@@ -644,28 +663,22 @@
     });
     $('#select_actions').on('change', function() {
       var opt;
-      $('#action_parameters').append(domTableSelectedActions);
+      domSectionSelectedActions.show();
       opt = $('option:selected', this);
       return fAddSelectedAction(opt.text());
     });
     $('#selected_actions').on('click', 'img', function() {
-      var act, arrName, i, nMods, opt;
-      console.log('click');
+      var act, arrName, nMods, opt;
       act = $(this).closest('td').siblings('.title').text();
       arrName = act.split(' -> ');
-      i = 0;
       nMods = 0;
       $("#selected_actions td.title").each(function() {
         var arrNm;
-        i++;
         arrNm = $(this).text().split(' -> ');
         if (arrNm[0] === arrName[0]) {
           return nMods++;
         }
       });
-      if (i === 1) {
-        $('#action_parameters > *').detach();
-      }
       if (nMods === 1) {
         $('#action_invoker_params > div').each(function() {
           if ($(this).children('div.modName').text() === arrName[0]) {
@@ -673,6 +686,12 @@
           }
         });
       }
+      if ($('#selected_actions td.title').length === 0) {
+        domSectionSelectedActions.hide();
+      }
+      if ($('#action_invoker_params > div').length === 0) {
+        domSectionActionParameters.hide();
+      }
       opt = $('<option>').text(act);
       $('#select_actions').append(opt);
       return $(this).closest('tr').remove();
@@ -680,7 +699,7 @@
     $('#but_submit').click(function() {
       var actFuncs, acts, ap, conds, ep, err, eventname, eventtype, evtFuncs, fCheckOverwrite, mins, obj, start;
       window.scrollTo(0, 0);
-      $('#info').text('');
+      fClearInfo();
       try {
         if ($('#input_id').val() === '') {
           $('#input_id').focus();
@@ -704,6 +723,7 @@
             eventname = $('#select_eventhook').val();
             break;
           case 'Event Poller':
+            eventname = $('#select_eventpoller').val();
             ep = {};
             $("#event_poller_params tr").each(function() {
               var encryptedParam, key, shielded, val;
@@ -725,9 +745,9 @@
               }
             });
             evtFuncs = {};
-            evtFuncs[eventId] = [];
+            evtFuncs[eventname] = [];
             $('#event_poller_params tr.funcMappings').each(function() {
-              return evtFuncs[eventId].push({
+              return evtFuncs[eventname].push({
                 argument: $('div.funcarg', this).text(),
                 value: $('input[type=text]', this).val()
               });
@@ -808,27 +828,28 @@
             }
           };
         };
-        if ($('#select_event_type') === 'Event Poller') {
-          start = fConvertTimeToDate($('#input_start').val().toISOString());
+        if ($('#select_event_type').val() === 'Event Poller') {
+          start = fConvertTimeToDate($('#input_start').val()).toISOString();
           mins = fConvertDayHourToMinutes($('#input_interval').val());
         }
-        obj = console.log(obj);
+        obj = {
+          command: 'forge_rule',
+          body: JSON.stringify({
+            id: $('#input_id').val(),
+            eventtype: eventtype,
+            eventname: eventname,
+            eventparams: ep,
+            eventstart: start,
+            eventinterval: mins,
+            eventfunctions: evtFuncs,
+            conditions: conds,
+            actions: acts,
+            actionparams: ap,
+            actionfunctions: actFuncs
+          })
+        };
         return fIssueRequest({
-          data: {
-            command: 'forge_rule',
-            body: JSON.stringify({
-              id: $('#input_id').val(),
-              eventname: eventId,
-              eventparams: ep,
-              eventstart: start,
-              eventinterval: mins,
-              eventfunctions: evtFuncs,
-              conditions: conds,
-              actions: acts,
-              actionparams: ap,
-              actionfunctions: actFuncs
-            })
-          },
+          data: obj,
           done: function(data) {
             $('#info').text(data.message);
             return $('#info').attr('class', 'success');
@@ -843,33 +864,51 @@
       }
     });
     if (oParams.id) {
-      obj = {
-        command: 'get_rule',
-        data: JSON.stringify({
-          id: oParams.id
-        })
-      };
       return fIssueRequest({
-        data: obj,
+        data: {
+          command: 'get_rule',
+          body: JSON.stringify({
+            id: oParams.id
+          })
+        },
         done: function(data) {
           var action, arrName, d, mins, oRule, _j, _len1, _ref, _results;
           oRule = JSON.parse(data.message);
           if (oRule) {
             $('#input_id').val(oRule.id);
-            $('#select_event').val(oRule.eventname);
-            if ($('#select_event').val() !== '') {
-              fFetchEventParams(oRule.eventname);
-              fPlaceAndPaintInterval();
+            fPrepareEventType(oRule.eventtype);
+            switch (oRule.eventtype) {
+              case 'Event Poller':
+                $('#select_event').val(oRule.eventname);
+                if ($('#select_event').val() !== '') {
+                  fFetchEventParams(oRule.eventname);
+                  $('#input_event').val(oRule.eventname);
+                  d = new Date(oRule.eventstart);
+                  mins = d.getMinutes();
+                  if (mins.toString().length === 1) {
+                    mins = '0' + mins;
+                  }
+                  $('#input_start', domInputEventTiming).val(d.getHours() + ':' + mins);
+                  $('#input_interval', domInputEventTiming).val(oRule.eventinterval);
+                } else {
+                  window.scrollTo(0, 0);
+                  $('#info').text('Error loading Rule: Your Event Poller does not exist anymore!');
+                  $('#info').attr('class', 'error');
+                }
+                break;
+              case 'Webhook':
+                $('#select_eventhook').val(oRule.eventname);
+                if ($('#select_eventhook').val() === '') {
+                  window.scrollTo(0, 0);
+                  $('#info').text('Your Webhook does not exist anymore!');
+                  $('#info').attr('class', 'error');
+                }
+                break;
+              case 'Custom Event':
+                $('#input_eventname').val(oRule.eventname);
             }
-            $('#input_event').val(oRule.eventname);
-            d = new Date(oRule.eventstart);
-            mins = d.getMinutes();
-            if (mins.toString().length === 1) {
-              mins = '0' + mins;
-            }
-            $('#input_start').val(d.getHours() + ':' + mins);
-            $('#input_interval').val(oRule.eventinterval);
             editor.setValue(JSON.stringify(oRule.conditions, void 0, 2));
+            domSectionSelectedActions.show();
             _ref = oRule.actions;
             _results = [];
             for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
diff --git a/webpages/handlers/js/forge_webhook.js b/webpages/handlers/js/forge_webhook.js
index a2695bd..220c6e0 100644
--- a/webpages/handlers/js/forge_webhook.js
+++ b/webpages/handlers/js/forge_webhook.js
@@ -1,6 +1,6 @@
 // Generated by CoffeeScript 1.7.1
 (function() {
-  var arrKV, arrParams, fDisplayError, fFailedRequest, fIssueRequest, fOnLoad, fProcessWebhookList, fShowWebhookUsage, fUpdateWebhookList, hostUrl, oParams, param, _i, _len;
+  var arrKV, arrParams, fClearInfo, fDisplayError, fFailedRequest, fIssueRequest, fOnLoad, fProcessWebhookList, fShowWebhookUsage, fUpdateWebhookList, hostUrl, oParams, param, _i, _len;
 
   arrParams = window.location.search.substring(1).split('&');
 
@@ -18,6 +18,11 @@
 
   hostUrl = [location.protocol, '//', location.host].join('');
 
+  fClearInfo = function() {
+    $('#info').text('');
+    return $('#info').attr('class', 'neutral');
+  };
+
   fDisplayError = function(msg) {
     window.scrollTo(0, 0);
     $('#info').text("Error: " + msg);
@@ -25,7 +30,7 @@
   };
 
   fIssueRequest = function(args) {
-    $('#info').text('');
+    fClearInfo();
     return $.post('/usercommand', args.body).done(args.done).fail(args.fail);
   };
 
@@ -98,7 +103,7 @@
     fUpdateWebhookList(fShowWebhookUsage);
     $('#but_submit').click(function() {
       var hookname;
-      $('#info').text('');
+      fClearInfo();
       hookname = $('#inp_hookname').val();
       if (hookname === '') {
         return fDisplayError('Please provide an Event Name for your new Webhook!');
diff --git a/webpages/handlers/templates/forge_event.html b/webpages/handlers/templates/forge_event.html
index 22556f0..e578210 100644
--- a/webpages/handlers/templates/forge_event.html
+++ b/webpages/handlers/templates/forge_event.html
@@ -10,6 +10,6 @@
 }
 	</div>
 </div>
-<button id="but_prepare" style="width:200px">Prepare a Rule for this Event</button>
+<button id="but_prepare" style="width:300px">Prepare a Rule for this Event</button>
 <br>
-<button id="but_submit" style="width:200px">Push Event into System</button>
+<button id="but_submit" style="width:300px">Push Event into System</button>
diff --git a/webpages/handlers/templates/forge_rule.html b/webpages/handlers/templates/forge_rule.html
index b5cb029..c95a0ef 100644
--- a/webpages/handlers/templates/forge_rule.html
+++ b/webpages/handlers/templates/forge_rule.html
@@ -17,7 +17,7 @@
 <tr><td>
 <h2>CONDITIONS</h2>
 <div id="conditions">
-Refer to <a target="_blank" href="https://github.com/harthur/js-select#selectors">js-select selectors</a> for valid selectors!
+Refer to <a target="_blank" href="https://github.com/harthur/js-select#selectors">js-select selectors</a> for valid selectors!<br>
 	<div id="editor_conditions">
 [
 	{
@@ -29,6 +29,7 @@ Refer to <a target="_blank" href="https://github.com/harthur/js-select#selectors
 ]
 	</div>
 </div>
+<button class="outent20" id="fill_example">Fill with example condition</button>
 </td></tr>
 <tr><td>
 
@@ -36,5 +37,6 @@ Refer to <a target="_blank" href="https://github.com/harthur/js-select#selectors
 	<select id="select_actions"><option></option></select>
 	<br><br>
 	<div id="action_parameters"></div>
-	<button id="but_submit">save</button>
+	<br><br>
+	<button id="but_submit">Save Rule</button>
 </td></tr></table>
diff --git a/webpages/public/style.css b/webpages/public/style.css
index c763842..d851112 100644
--- a/webpages/public/style.css
+++ b/webpages/public/style.css
@@ -31,10 +31,18 @@ input[type=password]:focus {
   border: 1px solid rgba(81, 203, 238, 1);
 }
 
+button {
+  font-size: 1.2em;
+}
+
 .indent20 {
   padding-left: 20px;
 }
 
+.outent20 {
+  margin-left: 20px;
+}
+
 #mobile {
   margin: 10px 20px 10px 20px;
 }
@@ -65,6 +73,7 @@ input[type=password]:focus {
 }
 
 #info {
+  height: 20px;
   padding-left: 20px;
   line-height: 2em;
   font-family: Tahoma, sans-serif;
@@ -72,6 +81,11 @@ input[type=password]:focus {
   font-weight: bold;
 }
 
+.neutral {
+  background-color: #EEF;
+  color: #050;
+}
+
 .success {
   background-color: #CFC;
   color: #050;