Adiciona histórico de processamentos e melhorias na interface

lpirola · Dec 16, 2015 · 09eae0c · 09eae0c
1 parent aa90d71
commit 09eae0c
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 [![Stories in Ready](https://badge.waffle.io/lpirola/processador-inscricao-evento.png?label=ready&title=Ready)](https://waffle.io/lpirola/processador-inscricao-evento)
 [![Documentation](https://doc.esdoc.org/github.com/lpirola/processador-inscricao-evento/badge.svg)](https://doc.esdoc.org/github.com/lpirola/processador-inscricao-evento/)
 
-# Processador de instricões em eventos
+# Processador de inscricões em eventos
 É utilizado uma planilha no Google Drive para controlar o envio de e-mail com boleto para pagamento e confirmação da inscrição.
 
 ## Dependências
@@ -18,10 +18,11 @@ A sequência e os valores disponíveis são: "", "Boleto Enviado", "Boleto Pago"
 ## Adicionar variáveis de ambiente
 
 ```
+export REDIS_URL='redis://127.0.0.1:6379'
+export DATABASE_URL='mysql://[email protected]:/processador-inscricao-evento'
 export MAIL_SERVICE='Gmail'
 export MAIL_USER='[email protected]'
 export MAIL_PASS='xxxx'
-export GOOGLE_SPREADSHEET_KEY='xxxxx'
 export GOOGLE_CREDS='{"type": "service_account","private_key_id": "","private_key": "","client_email": "","client_id": "","auth_uri": "","token_uri": "","auth_provider_x509_cert_url": "","client_x509_cert_url": ""}'
 ```
 

diff --git a/client/index.js b/client/index.js
@@ -1,4 +1,5 @@
 var m = require('mithril')
+var moment = require('moment')
 
 var Datasource = function(data) {
     data = data || {id:'', name:'', key:'', interval_update:''}
@@ -13,6 +14,10 @@ Datasource.list = function(data) {
 Datasource.save = function(data) {
     return m.request({method: "POST", url: "/datasources", data: data})
 }
+var Job = function (data) {}
+Job.list = function(data) {
+    return m.request({method: "GET", url: "/fila/jobs/0..1000/desc", data: data})
+}
 
 var DatasourceForm = {
     controller: function(args) {
@@ -28,39 +33,81 @@ var DatasourceForm = {
 					m('h2', 'Adicionar planilha'),
 					m('.pure-control-group', [
 						m('label', 'Nome'),
-						m("input",
+						m("input.pure-input-2-3",
 							{onchange: m.withAttr("value", ds.name), value: ds.name()})
 					]),
 					m('.pure-control-group', [
 						m('label', 'Chave da planilha no Google Drive'),
-						m("input[placeholder=Ex.: 1gKGxto-RDqS5k2F3TbLXnOoj6IB6RFp18K_MUzBP_Hw]",
+						m("input.pure-input-2-3[placeholder=Ex.: 1gKGxto-RDqS5k2F3TbLXnOoj6IB6RFp18K_MUzBP_Hw]",
 							{onchange: m.withAttr("value", ds.key), value: ds.key()})
 					]),
 					m('.pure-control-group', [
 						m('label', 'Intervalo atualização (min)'),
-						m("input",
+						m("input.pure-input-2-3",
 							{onchange: m.withAttr("value", ds.interval_update), value: ds.interval_update()})
 					]),
 					m('.pure-controls', [
-						m("button.pure-button.pure-button-primary", {onclick: args.onsave.bind(this,ds)}, "Salvar")
+						m("button.pure-button.pure-button-primary", {onclick: args.onsave.bind(this,ds)}, "salvar")
 					])
 				])
 			])
         ])
     }
 }
 
+var JobList = {
+	view : function (ctrl, args) {
+		return m('.job-list', [
+			m('h2', [
+				'Histórico processamentos ',
+				m('a.pure-button.pure-button-primary[href=/fila/]', m('i.fa.fa-cogs'))
+			]),
+			m("table.pure-table", [
+				m('thead', m('tr', [
+					m('th', 'id'),
+					m('th', 'status'),
+					m('th', 'tipo'),
+					m('th', 'duração (s)'),
+					m('th', 'resultado'),
+					m('th', 'última atualização'),
+					m('th', '')
+				])),
+				args.jobs().map(function(j) {
+					console.log(j)
+					return m("tr", [
+						m("td", j.id),
+						m("td", j.state),
+						m("td", j.type),
+						m("td", moment.duration(Number(j.duration)).asSeconds()),
+						m("td", j.result),
+						m("td", moment(Number(j.updated_at)).fromNow()),
+					])
+				})
+			])
+		])
+	}
+}
+
 var DatasourceList = {
     view: function(ctrl, args) {
         return m('.half.active-spreadsheets', [
 			m('h2', 'Planilhas ativas'),
-			m("table", [
+			m("table.pure-table", [
+				m('thead', m('tr', [
+					m('th', 'id'),
+					m('th', 'nome'),
+					m('th', 'chave'),
+					m('th', 'intervalo'),
+					m('th', '')
+				])),
 				args.ds().map(function(ds) {
 					return m("tr", [
 						m("td", ds.id),
 						m("td", ds.name),
-						m("td", ds.key),
-						m("td", ds.interval_update)
+						m("td", m('i.fa fa-key[title='+ds.key+']')),
+						m("td", moment.duration(Number(ds.interval_update)).asMinutes() + ' minutos'),
+						m('td', m('a.pure-button.button-warning[href=#]', 'excluir'))
+
 					])
 				})
 			])
@@ -71,14 +118,16 @@ var DatasourceList = {
 var Home = {
     controller: function update() {
         this.datasources = Datasource.list()
+        this.jobs = Job.list()
         this.save = function(ds) {
             Datasource.save(ds).then(update.bind(this))
         }.bind(this)
     },
     view: function(ctrl) {
         return [
             m.component(DatasourceForm, {onsave: ctrl.save}),
-            m.component(DatasourceList, {ds: ctrl.datasources})
+            m.component(DatasourceList, {ds: ctrl.datasources}),
+            m.component(JobList, {jobs: ctrl.jobs})
         ]
     }
 }

diff --git a/package.json b/package.json
@@ -1,57 +1,58 @@
 {
-	"name": "processador-inscricao-evento",
-	"version": "0.0.2",
-	"description": "Processador de inscrições em eventos que utiliza uma planilha no Google Drive para controlar o envio de e-mail para pagamento e para confirmação da inscrição",
-	"main": "bin/www",
-	"scripts": {
-		"start": "./node_modules/.bin/babel-node ./src/server.js",
-		"test": "./node_modules/.bin/jasmine",
-		"generate-docs": "./node_modules/.bin/jsdoc --configure .jsdoc.json --verbose"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/lpirola/processador-inscricao-evento.git"
-	},
-	"keywords": [
-		"queue",
-		"web",
-		"bdd"
-	],
-	"author": "Lucas Pirola <[email protected]>",
-	"license": "GPL-3.0",
-	"bugs": {
-		"url": "https://github.com/lpirola/processador-inscricao-evento/issues"
-	},
-	"homepage": "https://github.com/lpirola/processador-inscricao-evento#readme",
-	"dependencies": {
-		"async": "^1.5.0",
-		"body-parser": "~1.13.2",
-		"browserify-middleware": "^7.0.0",
-		"commander": "^2.9.0",
-		"cookie-parser": "~1.3.5",
-		"debug": "~2.2.0",
-		"express": "~4.13.1",
-		"google-spreadsheet": "^1.0.1",
-		"jade": "~1.11.0",
-		"jeet": "^6.1.2",
-		"kue": "^0.10.4",
-		"mithril": "^0.2.0",
-		"morgan": "~1.6.1",
-		"mysql": "^2.9.0",
-		"nodemailer": "^1.10.0",
-		"sequelize": "^3.14.2",
-		"serve-favicon": "~2.3.0",
-		"stylus": "0.42.3",
-		"babel-cli": "^6.2.1"
-	},
-	"devDependencies": {
-		"istanbul": "^0.4.1",
-		"jasmine-es6": "0.0.18",
-		"minami": "^1.1.1",
-		"nodemailer-stub-transport": "^1.0.0"
-	},
-	"engines" : {
-		"node" : "v0.12.7",
-		"npm" : "2.11.3"
-	}
+  "name": "processador-inscricao-evento",
+  "version": "0.0.2",
+  "description": "Processador de inscrições em eventos que utiliza uma planilha no Google Drive para controlar o envio de e-mail para pagamento e para confirmação da inscrição",
+  "main": "bin/www",
+  "scripts": {
+    "start": "./node_modules/.bin/babel-node ./src/server.js",
+    "test": "./node_modules/.bin/jasmine",
+    "generate-docs": "./node_modules/.bin/jsdoc --configure .jsdoc.json --verbose"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lpirola/processador-inscricao-evento.git"
+  },
+  "keywords": [
+    "queue",
+    "web",
+    "bdd"
+  ],
+  "author": "Lucas Pirola <[email protected]>",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/lpirola/processador-inscricao-evento/issues"
+  },
+  "homepage": "https://github.com/lpirola/processador-inscricao-evento#readme",
+  "dependencies": {
+    "async": "^1.5.0",
+    "babel-cli": "^6.2.1",
+    "body-parser": "~1.13.2",
+    "browserify-middleware": "^7.0.0",
+    "commander": "^2.9.0",
+    "cookie-parser": "~1.3.5",
+    "debug": "~2.2.0",
+    "express": "~4.13.1",
+    "google-spreadsheet": "^1.0.1",
+    "jade": "~1.11.0",
+    "jeet": "^6.1.2",
+    "kue": "^0.10.4",
+    "mithril": "^0.2.0",
+    "moment": "^2.10.6",
+    "morgan": "~1.6.1",
+    "mysql": "^2.9.0",
+    "nodemailer": "^1.10.0",
+    "sequelize": "^3.14.2",
+    "serve-favicon": "~2.3.0",
+    "stylus": "0.42.3"
+  },
+  "devDependencies": {
+    "istanbul": "^0.4.1",
+    "jasmine-es6": "0.0.18",
+    "minami": "^1.1.1",
+    "nodemailer-stub-transport": "^1.0.0"
+  },
+  "engines": {
+    "node": "v0.12.7",
+    "npm": "2.11.3"
+  }
 }
diff --git a/stylus/style.styl b/stylus/style.styl
@@ -7,12 +7,51 @@ html
 
 body
 	font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
+	color: #055058
+a, h1, h2, h3, h4, h5, h6
+	color: #055058
+table
+	th
+		background-color: #055058
+		color: #fff
 h1
 	text-align: center
+	color: #fff
+	background-color: #055058
+	margin: 0
+	padding: 1em
+
+h2
+	.pure-button
+		padding: .1em .5em
+
+a.pure-button-primary,
+.pure-button-primary
+	background-color: #055058
+.button-success,
+.button-error,
+.button-warning,
+.button-secondary
+	color: white
+
+.button-success
+	background-color: rgb(28, 184, 65)
+
+.button-error
+	background-color: rgb(202, 60, 60)
+
+.button-warning
+	background-color: rgb(223, 117, 20)
+
+.button-secondary
+	background-color: rgb(66, 184, 221)
 
 .active-spreadsheets
 	table
 		width: 100%
 .half
-	padding: 2em
+	padding: 0 2em 2em
 	col(1/2)
+.job-list
+	padding: 0 2em 2em
+	col(1)
diff --git a/views/layout.jade b/views/layout.jade
@@ -2,8 +2,9 @@ doctype html
 html
 	head
 		title= title
-		link(rel='stylesheet', href='/style.css')
 		link(rel='stylesheet', href='http://yui.yahooapis.com/pure/0.6.0/pure-min.css')
+		link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css")
+		link(rel='stylesheet', href='/style.css')
 	body
 		block content
 		script(src='/main.js')