Commit aab54770 authored by Vytor Calixto's avatar Vytor Calixto 👾

Autocomplete no upload

Tem que converter do nome para o _id ainda p/ conseguir salvar o arquivo
parent 50f3d4dd
[hidden] { display: none; }
.visually-hidden {
position: absolute;
clip: rect(0, 0, 0, 0);
}
div.awesomplete {
display: inline-block;
position: relative;
}
div.awesomplete > input {
display: block;
}
div.awesomplete > ul {
position: absolute;
left: 0;
z-index: 1;
min-width: 100%;
box-sizing: border-box;
list-style: none;
padding: 0;
border-radius: .3em;
margin: .2em 0 0;
background: hsla(0,0%,100%,.9);
background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
border: 1px solid rgba(0,0,0,.3);
box-shadow: .05em .2em .6em rgba(0,0,0,.2);
text-shadow: none;
}
div.awesomplete > ul[hidden],
div.awesomplete > ul:empty {
display: none;
}
@supports (transform: scale(0)) {
div.awesomplete > ul {
transition: .3s cubic-bezier(.4,.2,.5,1.4);
transform-origin: 1.43em -.43em;
}
div.awesomplete > ul[hidden],
div.awesomplete > ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
/* Pointer */
div.awesomplete > ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0; height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
div.awesomplete > ul > li {
position: relative;
padding: .2em .5em;
cursor: pointer;
}
div.awesomplete > ul > li:hover {
background: hsl(200, 40%, 80%);
color: black;
}
div.awesomplete > ul > li[aria-selected="true"] {
background: hsl(205, 40%, 40%);
color: white;
}
div.awesomplete mark {
background: hsl(65, 100%, 50%);
}
div.awesomplete li:hover mark {
background: hsl(68, 100%, 41%);
}
div.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}
\ No newline at end of file
// Awesomplete - Lea Verou - MIT license
(function(){function m(a,b){for(var c in a){var g=a[c],e=this.input.getAttribute("data-"+c.toLowerCase());this[c]="number"===typeof g?parseInt(e):!1===g?null!==e:g instanceof Function?null:e;this[c]||0===this[c]||(this[c]=c in b?b[c]:g)}}function d(a,b){return"string"===typeof a?(b||document).querySelector(a):a||null}function h(a,b){return k.call((b||document).querySelectorAll(a))}function l(){h("input.awesomplete").forEach(function(a){new f(a)})}var f=function(a,b){var c=this;this.input=d(a);this.input.setAttribute("autocomplete",
"off");this.input.setAttribute("aria-autocomplete","list");b=b||{};m.call(this,{minChars:2,maxItems:10,autoFirst:!1,filter:f.FILTER_CONTAINS,sort:f.SORT_BYLENGTH,item:function(a,b){return d.create("li",{innerHTML:a.replace(RegExp(d.regExpEscape(b.trim()),"gi"),"<mark>$&</mark>"),"aria-selected":"false"})},replace:function(a){this.input.value=a}},b);this.index=-1;this.container=d.create("div",{className:"awesomplete",around:a});this.ul=d.create("ul",{hidden:"",inside:this.container});this.status=d.create("span",
{className:"visually-hidden",role:"status","aria-live":"assertive","aria-relevant":"additions",inside:this.container});d.bind(this.input,{input:this.evaluate.bind(this),blur:this.close.bind(this),keydown:function(a){var b=a.keyCode;if(c.opened)if(13===b&&c.selected)a.preventDefault(),c.select();else if(27===b)c.close();else if(38===b||40===b)a.preventDefault(),c[38===b?"previous":"next"]()}});d.bind(this.input.form,{submit:this.close.bind(this)});d.bind(this.ul,{mousedown:function(a){a=a.target;if(a!==
this){for(;a&&!/li/i.test(a.nodeName);)a=a.parentNode;a&&c.select(a)}}});this.input.hasAttribute("list")?(this.list="#"+a.getAttribute("list"),a.removeAttribute("list")):this.list=this.input.getAttribute("data-list")||b.list||[];f.all.push(this)};f.prototype={set list(a){Array.isArray(a)?this._list=a:"string"===typeof a&&-1<a.indexOf(",")?this._list=a.split(/\s*,\s*/):(a=d(a))&&a.children&&(this._list=k.apply(a.children).map(function(a){return a.textContent.trim()}));document.activeElement===this.input&&
this.evaluate()},get selected(){return-1<this.index},get opened(){return this.ul&&null==this.ul.getAttribute("hidden")},close:function(){this.ul.setAttribute("hidden","");this.index=-1;d.fire(this.input,"awesomplete-close")},open:function(){this.ul.removeAttribute("hidden");this.autoFirst&&-1===this.index&&this.goto(0);d.fire(this.input,"awesomplete-open")},next:function(){this.goto(this.index<this.ul.children.length-1?this.index+1:-1)},previous:function(){var a=this.ul.children.length;this.goto(this.selected?
this.index-1:a-1)},goto:function(a){var b=this.ul.children;this.selected&&b[this.index].setAttribute("aria-selected","false");this.index=a;-1<a&&0<b.length&&(b[a].setAttribute("aria-selected","true"),this.status.textContent=b[a].textContent);d.fire(this.input,"awesomplete-highlight")},select:function(a){if(a=a||this.ul.children[this.index]){var b;d.fire(this.input,"awesomplete-select",{text:a.textContent,preventDefault:function(){b=!0}});b||(this.replace(a.textContent),this.close(),d.fire(this.input,
"awesomplete-selectcomplete"))}},evaluate:function(){var a=this,b=this.input.value;b.length>=this.minChars&&0<this._list.length?(this.index=-1,this.ul.innerHTML="",this._list.filter(function(c){return a.filter(c,b)}).sort(this.sort).every(function(c,d){a.ul.appendChild(a.item(c,b));return d<a.maxItems-1}),0===this.ul.children.length?this.close():this.open()):this.close()}};f.all=[];f.FILTER_CONTAINS=function(a,b){return RegExp(d.regExpEscape(b.trim()),"i").test(a)};f.FILTER_STARTSWITH=function(a,
b){return RegExp("^"+d.regExpEscape(b.trim()),"i").test(a)};f.SORT_BYLENGTH=function(a,b){return a.length!==b.length?a.length-b.length:a<b?-1:1};var k=Array.prototype.slice;d.create=function(a,b){var c=document.createElement(a),g;for(g in b){var e=b[g];"inside"===g?d(e).appendChild(c):"around"===g?(e=d(e),e.parentNode.insertBefore(c,e),c.appendChild(e)):g in c?c[g]=e:c.setAttribute(g,e)}return c};d.bind=function(a,b){if(a)for(var c in b){var d=b[c];c.split(/\s+/).forEach(function(b){a.addEventListener(b,
d)})}};d.fire=function(a,b,c){var d=document.createEvent("HTMLEvents");d.initEvent(b,!0,!0);for(var e in c)d[e]=c[e];a.dispatchEvent(d)};d.regExpEscape=function(a){return a.replace(/[-\\^$*+?.()|[\]{}]/g,"\\$&")};"undefined"!==typeof Document&&("loading"!==document.readyState?l():document.addEventListener("DOMContentLoaded",l));f.$=d;f.$$=h;"undefined"!==typeof self&&(self.Awesomplete=f);"object"===typeof exports&&(module.exports=f);return f})();
......@@ -7,4 +7,6 @@
<link rel="stylesheet" href="/bower_components/sweetalert/dist/sweetalert.css">
<meta name="description" content="Farol - Repositório de provas e trabalhos dos cursos de Informática Biomédica e Ciência da Computação da UFPR">
<script src="/bower_components/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" href="/css/awesomplete.css">
<script src="/js/awesomplete.min.js"></script>
</head>
......@@ -3,16 +3,17 @@
<% include partials/head %>
<body>
<% include partials/basic-header %>
<section class="card clearfix margin">
<h1>Upload</h1>
<div>
<form method="post" enctype="multipart/form-data">
<input type="file" name="arquivo">
<br>
<input type="text" name="materia" placeholder="Matéria" required>
<input type="text" name="materia" placeholder="Matéria" class="awesomplete" required
data-list="<% for(var i=0; i < materias.length-1; i++) { %> <%= materias[i].nome+',' %> <% } %> <%= materias[materias.length-1].nome%>">
<br>
<input type="text" name="professor" placeholder="Professor" required>
<input type="text" name="professor" placeholder="Professor" class="awesomplete" required
data-list="<% for(var i=0; i < professores.length-1; i++) { %> <%= professores[i].nome+',' %> <% } %> <%= professores[professores.length-1].nome%>">
<br>
<input type="text" name="numero" placeholder="numero">
<br>
......@@ -24,7 +25,7 @@
<input type="checkbox" name="substitutiva">
<br>
<label for="provaTrabalho">Prova?</label>
<input type="checkbox" name="provaTrabalho" required>
<input type="checkbox" name="provaTrabalho">
<br>
<input type="submit" value="Enviar" class="button normal">
</form>
......
......@@ -5,6 +5,7 @@
<% include partials/basic-header %>
<section class="margin page-wrap card">
<h1>Você acaba de enviar: </h1>
<div class="flex no-wrap space-around stretch">
<div class="half">
<img src="<%= arquivo.path %>" style="width:100%">
......@@ -13,8 +14,11 @@
<h3>Informações</h3>
<%= arquivo.materia %> - <%= arquivo.professor %>
<br>
<% if(arquivo.prova) { %> Prova <% } else { %> Trabalho <% } %>
<%= arquivo.tipo[0].toUpperCase() + arquivo.tipo.slice(1) %>
<%= arquivo.numero %> - <%= arquivo.ano %>/<%= arquivo.semestre %>
<h3>As informações estão corretas?</h3>
<a href="/" class="button normal">Confirmar</a>
<a href="/upload/cancel/<%= arquivo._id %>" class="button red">Cancelar</a>
</div>
</div>
</section>
......
......@@ -33,6 +33,9 @@ var fs = require('fs')
var libs = process.cwd() + '/libs/'
var VerificationToken = require(libs + 'model/verificationToken')
var Usuario = require(libs + 'model/usuario')
var Arquivo = require(libs + 'model/arquivo')
var Materia = require(libs + 'model/materia')
var Professor = require(libs + 'model/professor')
var role = require(libs + 'role')
router.get('/', function(req, res) {
......@@ -99,18 +102,55 @@ router.get('/conta', role.isLoggedIn(), function(req, res) {
})
router.get('/upload', role.isLoggedIn(), function(req, res) {
res.render('upload', {user: req.user})
Materia.find(function(err, materias) {
Professor.find(function(err, professores) {
res.render('upload', {user: req.user, materias: materias, professores: professores})
})
})
})
router.post('/upload', role.isLoggedIn(), role.isVerificado(), upload.array('arquivo', 1), function(req, res) {
var arquivo = req.files[0]
for (var attr in req.body) {
arquivo[attr] = req.body[attr]
/*
No momento é feito o upload de apenas 1 arquivo. Logo esse for é "inútil"
Mas, na verdade, este for está já está pensando quando vierem multiplas imagens
*/
for(var f in req.files) {
file = req.files[f]
var arquivo = new Arquivo({
nome: file.originalname,
tipo: (req.body.provaTrabalho === 'on') ? 'prova' : 'trabalho',
numero: req.body.numero || 0,
substitutiva: (req.body.substitutiva === 'on'),
ano: req.body.ano,
semestre: req.body.semestre,
arquivo: file.path,
status: req.body.status || 'pendente',
tipoArquivo: file.mimetype,
// TODO: aqui tem que converter o nome/código da máteria e do professor para o _id do mongo
materia: req.body.materia,
professor: req.body.professor,
usuario: req.user.userId
})
arquivo.save(function (err) {
if(!err) {
console.log(arquivo)
res.render('uploadDetails', {user: req.user, arquivo: arquivo})
} else {
if(err.name === 'ValidationError') {
res.statusCode = 400
res.json({error: 'Validation error'})
} else {
res.statusCode = 500
res.json({error:'Server error'})
}
console.log('Internal error(%d): %s', res.statusCode, err.message)
fs.unlink(file.path, function() {
if(err) console.log(err)
})
}
})
}
arquivo.provaTrabalho = (arquivo.provaTrabalho === 'on')
arquivo.substitutiva = (arquivo.substitutiva === 'on')
console.log(arquivo)
res.render('uploadDetails', {user: req.user, arquivo: arquivo})
})
module.exports = router
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