visual upgrade
This commit is contained in:
msinkec
parent
a17c3d7133
commit
6174cf1c3e
21
app.py
21
app.py
|
|
@ -7,6 +7,8 @@ from pathlib import Path
|
|||
from flask import Flask, render_template, request
|
||||
from flask_dropzone import Dropzone
|
||||
|
||||
from smtplib import SMTP_SSL as SMTP
|
||||
|
||||
|
||||
enabled_filetypes = ['txt', 'csv', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']
|
||||
regex_email = re.compile('^[a-z0-9]+[\._]?[a-z0-9]+[@]\w+[.]\w{2,3}$')
|
||||
|
|
@ -19,7 +21,8 @@ app = Flask(__name__)
|
|||
|
||||
app.config.update(
|
||||
UPLOADED_PATH = upload_dir,
|
||||
MAX_CONTENT_LENGTH = 1000000000 # 1GB
|
||||
MAX_CONTENT_LENGTH = 1000000000, # 1GB
|
||||
TEMPLATES_AUTO_RELOAD = True
|
||||
)
|
||||
|
||||
dropzone = Dropzone(app)
|
||||
|
|
@ -50,6 +53,8 @@ def handle_upload():
|
|||
|
||||
store_metadata(request.form, file_hashes)
|
||||
store_datafiles(files, file_hashes)
|
||||
send_confirm_mail(request.form.get('email'))
|
||||
|
||||
return 'Uspešno ste oddali datotek(e). Št. datotek: {}'.format(len(files))
|
||||
|
||||
|
||||
|
|
@ -144,6 +149,20 @@ def store_datafiles(files, file_hashes):
|
|||
path.mkdir()
|
||||
f.save(path / f.filename)
|
||||
|
||||
def send_confirm_mail(email):
|
||||
#msg = MIMEText(content, text_subtype)
|
||||
#msg['Subject'] = "TEST"
|
||||
#msg['From'] = sender # some SMTP servers will do this automatically, not all
|
||||
|
||||
#conn = SMTP(SMTPserver)
|
||||
#conn.set_debuglevel(False)
|
||||
#conn.login(USERNAME, PASSWORD)
|
||||
#try:
|
||||
# conn.sendmail(sender, destination, msg.as_string())
|
||||
#finally:
|
||||
# conn.quit()
|
||||
pass
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True)
|
||||
|
|
|
|||
466
static/dropzone.css
Normal file
466
static/dropzone.css
Normal file
|
|
@ -0,0 +1,466 @@
|
|||
@-webkit-keyframes passing-through {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px);
|
||||
}
|
||||
30%,
|
||||
70% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-40px);
|
||||
-moz-transform: translateY(-40px);
|
||||
-ms-transform: translateY(-40px);
|
||||
-o-transform: translateY(-40px);
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes passing-through {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px);
|
||||
}
|
||||
30%,
|
||||
70% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-40px);
|
||||
-moz-transform: translateY(-40px);
|
||||
-ms-transform: translateY(-40px);
|
||||
-o-transform: translateY(-40px);
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
}
|
||||
@keyframes passing-through {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px);
|
||||
}
|
||||
30%,
|
||||
70% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-40px);
|
||||
-moz-transform: translateY(-40px);
|
||||
-ms-transform: translateY(-40px);
|
||||
-o-transform: translateY(-40px);
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes slide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
10% {
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
-o-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
10% {
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
-o-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
10% {
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
-o-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.dropzone,
|
||||
.dropzone * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dropzone {
|
||||
min-height: 150px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
background: white;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
.dropzone.dz-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.dropzone.dz-clickable * {
|
||||
cursor: default;
|
||||
}
|
||||
.dropzone.dz-clickable .dz-message,
|
||||
.dropzone.dz-clickable .dz-message * {
|
||||
cursor: pointer;
|
||||
}
|
||||
.dropzone.dz-started .dz-message {
|
||||
display: none;
|
||||
}
|
||||
.dropzone.dz-drag-hover {
|
||||
border-style: solid;
|
||||
}
|
||||
.dropzone.dz-drag-hover .dz-message {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.dropzone .dz-message {
|
||||
text-align: center;
|
||||
margin: 2em 0;
|
||||
}
|
||||
.dropzone .dz-preview {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 16px;
|
||||
min-height: 100px;
|
||||
}
|
||||
.dropzone .dz-preview:hover {
|
||||
z-index: 1000;
|
||||
}
|
||||
.dropzone .dz-preview:hover .dz-details {
|
||||
opacity: 1;
|
||||
}
|
||||
.dropzone .dz-preview.dz-file-preview .dz-image {
|
||||
border-radius: 20px;
|
||||
background: #999;
|
||||
background: linear-gradient(to bottom, #eee, #ddd);
|
||||
}
|
||||
.dropzone .dz-preview.dz-file-preview .dz-details {
|
||||
opacity: 1;
|
||||
}
|
||||
.dropzone .dz-preview.dz-image-preview {
|
||||
background: white;
|
||||
}
|
||||
.dropzone .dz-preview.dz-image-preview .dz-details {
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-ms-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.dropzone .dz-preview .dz-remove {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
.dropzone .dz-preview .dz-remove:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.dropzone .dz-preview:hover .dz-details {
|
||||
opacity: 1;
|
||||
}
|
||||
.dropzone .dz-preview .dz-details {
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
font-size: 13px;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 2em 1em;
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
line-height: 150%;
|
||||
}
|
||||
.dropzone .dz-preview .dz-details .dz-size {
|
||||
margin-bottom: 1em;
|
||||
font-size: 16px;
|
||||
}
|
||||
.dropzone .dz-preview .dz-details .dz-filename {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dropzone .dz-preview .dz-details .dz-filename:hover span {
|
||||
border: 1px solid rgba(200, 200, 200, 0.8);
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.dropzone .dz-preview .dz-details .dz-filename span,
|
||||
.dropzone .dz-preview .dz-details .dz-size span {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
padding: 0 0.4em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.dropzone .dz-preview:hover .dz-image img {
|
||||
-webkit-transform: scale(1.05, 1.05);
|
||||
-moz-transform: scale(1.05, 1.05);
|
||||
-ms-transform: scale(1.05, 1.05);
|
||||
-o-transform: scale(1.05, 1.05);
|
||||
transform: scale(1.05, 1.05);
|
||||
-webkit-filter: blur(8px);
|
||||
filter: blur(8px);
|
||||
}
|
||||
.dropzone .dz-preview .dz-image {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
}
|
||||
.dropzone .dz-preview .dz-image img {
|
||||
display: block;
|
||||
}
|
||||
.dropzone .dz-preview.dz-success .dz-success-mark {
|
||||
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
}
|
||||
.dropzone .dz-preview.dz-error .dz-error-mark {
|
||||
opacity: 1;
|
||||
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
}
|
||||
.dropzone .dz-preview .dz-success-mark,
|
||||
.dropzone .dz-preview .dz-error-mark {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: 500;
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -27px;
|
||||
margin-top: -27px;
|
||||
}
|
||||
.dropzone .dz-preview .dz-success-mark svg,
|
||||
.dropzone .dz-preview .dz-error-mark svg {
|
||||
display: block;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
}
|
||||
.dropzone .dz-preview.dz-processing .dz-progress {
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
-moz-transition: all 0.2s linear;
|
||||
-ms-transition: all 0.2s linear;
|
||||
-o-transition: all 0.2s linear;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
.dropzone .dz-preview.dz-complete .dz-progress {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.4s ease-in;
|
||||
-moz-transition: opacity 0.4s ease-in;
|
||||
-ms-transition: opacity 0.4s ease-in;
|
||||
-o-transition: opacity 0.4s ease-in;
|
||||
transition: opacity 0.4s ease-in;
|
||||
}
|
||||
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
|
||||
-webkit-animation: pulse 6s ease infinite;
|
||||
-moz-animation: pulse 6s ease infinite;
|
||||
-ms-animation: pulse 6s ease infinite;
|
||||
-o-animation: pulse 6s ease infinite;
|
||||
animation: pulse 6s ease infinite;
|
||||
}
|
||||
.dropzone .dz-preview .dz-progress {
|
||||
opacity: 1;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
width: 80px;
|
||||
margin-left: -40px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
-webkit-transform: scale(1);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dropzone .dz-preview .dz-progress .dz-upload {
|
||||
background: #333;
|
||||
background: linear-gradient(to bottom, #666, #444);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
-webkit-transition: width 300ms ease-in-out;
|
||||
-moz-transition: width 300ms ease-in-out;
|
||||
-ms-transition: width 300ms ease-in-out;
|
||||
-o-transition: width 300ms ease-in-out;
|
||||
transition: width 300ms ease-in-out;
|
||||
}
|
||||
.dropzone .dz-preview.dz-error .dz-error-message {
|
||||
display: block;
|
||||
}
|
||||
.dropzone .dz-preview.dz-error:hover .dz-error-message {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.dropzone .dz-preview .dz-error-message {
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
display: block;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s ease;
|
||||
-moz-transition: opacity 0.3s ease;
|
||||
-ms-transition: opacity 0.3s ease;
|
||||
-o-transition: opacity 0.3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
top: 130px;
|
||||
left: -10px;
|
||||
width: 140px;
|
||||
background: #be2626;
|
||||
background: linear-gradient(to bottom, #be2626, #a92222);
|
||||
padding: 0.5em 1.2em;
|
||||
color: white;
|
||||
}
|
||||
.dropzone .dz-preview .dz-error-message:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 64px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #be2626;
|
||||
}
|
||||
1982
static/dropzone.js
Normal file
1982
static/dropzone.js
Normal file
File diff suppressed because it is too large
Load Diff
BIN
static/image/bg.jpeg
Normal file
BIN
static/image/bg.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 951 KiB |
358
static/style.css
Normal file
358
static/style.css
Normal file
|
|
@ -0,0 +1,358 @@
|
|||
@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
|
||||
|
||||
label,
|
||||
input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.bg {
|
||||
background-image: url("image/bg.jpeg");
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#main-window {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -331px;
|
||||
margin-left: -388px;
|
||||
}
|
||||
|
||||
#izjava {
|
||||
float: left;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
margin-block-start: 0.4em;
|
||||
|
||||
color: #006cb7;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: uppercase;
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
#button-submit {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 40px;
|
||||
|
||||
position: absolute;
|
||||
width: 138px;
|
||||
height: 41px;
|
||||
background: #006cb7;
|
||||
border-radius: 29px;
|
||||
border: 0px;
|
||||
top: 430px;
|
||||
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #ffffff;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
.button-terms:enabled {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 40px;
|
||||
|
||||
width: 138px;
|
||||
height: 41px;
|
||||
background: #006cb7;
|
||||
border-radius: 29px;
|
||||
border: 0px;
|
||||
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #ffffff;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.button-terms:disabled {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 40px;
|
||||
|
||||
width: 138px;
|
||||
height: 41px;
|
||||
background: #a6a6a6;
|
||||
border-radius: 29px;
|
||||
border: 0px;
|
||||
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #ffffff;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #46535b;
|
||||
background: #f5f5f5;
|
||||
border: 0px;
|
||||
border-bottom: 2px solid #c4c4c4;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#izjava {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.scrollbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
min-height: 100px;
|
||||
max-height: 500px;
|
||||
top: -430px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#rect1 {
|
||||
position: relative;
|
||||
width: 388px;
|
||||
height: 531px;
|
||||
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 20px 0px 0px 20px;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 3px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-details {
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
font-size: 13px;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0em;
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview.dz-file-preview .dz-image {
|
||||
border-radius: 20px;
|
||||
background: #ffff;
|
||||
background: linear-gradient(to bottom, #fff, #fff);
|
||||
}
|
||||
|
||||
.dropzone .dz-message {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 60%;
|
||||
height: 40%;
|
||||
margin: 0 auto;
|
||||
padding-top: 90px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
right: 75px;
|
||||
top: 140px;
|
||||
|
||||
border: 2px dashed #ffffff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-image {
|
||||
border-radius: 10px !important;
|
||||
overflow: hidden;
|
||||
width: 320px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dz-size {
|
||||
float: right;
|
||||
margin-right: 90px;
|
||||
margin-top: 11px;
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-details .dz-size {
|
||||
margin-bottom: 1em;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dz-filename {
|
||||
float: left;
|
||||
margin-top: 11px;
|
||||
margin-left: 15px;
|
||||
max-width: 140px;
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #46535b;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-progress {
|
||||
opacity: 1;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
width: 75px;
|
||||
margin-left: 75px;
|
||||
background: rgba(240, 240, 240, 0.8);
|
||||
-webkit-transform: scale(1);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.corpus-type-selector {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 2px solid grey;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.corpus-type-button {
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
outline: 0px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
text-transform: uppercase;
|
||||
color: #848c91;
|
||||
}
|
||||
|
||||
.corpus-type-button.selected {
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
outline: 0px;
|
||||
color: #006cb7;
|
||||
border-bottom: 3px solid #006cb7;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
#popup-terms {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
bottom: 100px;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
padding: 5px 14px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background-color: #eee;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#popup-terms-text {
|
||||
height: 90%;
|
||||
border: 0px solid #ccc;
|
||||
overflow-y: scroll;
|
||||
text-align: left;
|
||||
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #46535b;
|
||||
}
|
||||
|
|
@ -3,133 +3,342 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Portal za oddajanje besedil za DS4 in DS1</title>
|
||||
{{ dropzone.load_css() }}
|
||||
<style>
|
||||
#info-fields {
|
||||
position: relative;
|
||||
top: -350px;
|
||||
}
|
||||
label, input {
|
||||
display: block;
|
||||
}
|
||||
input, select {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#izjava {
|
||||
float:left;
|
||||
}
|
||||
</style>
|
||||
<!--{{ dropzone.load_css() }}-->
|
||||
<link rel="stylesheet" href="static/dropzone.css" type="text/css">
|
||||
{{ dropzone.style('position: absolute;
|
||||
top: -0.5px;
|
||||
width: 388px;
|
||||
height: 532px;
|
||||
left: 385px;
|
||||
background: linear-gradient(198.62deg, rgba(255, 255, 255, 0.49) -1.62%, rgba(255, 255, 255, 0.73) -1.61%, rgba(255, 255, 255, 0.41) 79.34%);
|
||||
box-shadow: 20px 4px 40px rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 0px;
|
||||
border-radius: 0px 20px 20px 0px;') }}
|
||||
<link rel="stylesheet" href="static/style.css" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Portal za oddajanje besedil za DS4 in DS1</h1>
|
||||
<form id="my-dropzone" class="dropzone" style="margin-top: 350px;">
|
||||
<div id="info-fields">
|
||||
<label for="tip">Želim prispevati:</label>
|
||||
<select id="tip" name="tip" form="tip" required="required">
|
||||
<option value="enojez">Enojezična besedila</option>
|
||||
<option value="prevodi">Prevodi</option>
|
||||
</select>
|
||||
<div class="bg"></div>
|
||||
<div id="main-window">
|
||||
<div id="rect1">
|
||||
<form id="my-dropzone" class="dropzone">
|
||||
<div style="position: relative; right: 390px;">
|
||||
<h1 id="title">Portal za oddajanje besedil za DS4 in DS1</h1>
|
||||
|
||||
<label for="ime">*Ime:</label>
|
||||
<input type="text" id="ime" name="ime" required="required"/>
|
||||
<div class="corpus-type-selector">
|
||||
<button id="corpus-type-prevodi" class="corpus-type-button">PREVODI</button>
|
||||
<button id="corpus-type-gigafida" class="corpus-type-button">GIGAFIDA</button>
|
||||
<button id="corpus-type-solar" class="corpus-type-button">ŠOLAR</button>
|
||||
</div>
|
||||
|
||||
<label for="podjetje">Podjetje / institucija:</label>
|
||||
<input type="text" id="podjetje" name="podjetje"/>
|
||||
<select id="corpus-form-select" class="form-select" name="tip" form="tip" required="required" size="100">
|
||||
<option value="prevodi" selected="selected">Prevodi</option>
|
||||
<option value="gigafida">Gigafida</option>
|
||||
<option value="solar">Šolar</option>
|
||||
</select>
|
||||
|
||||
<label for="email">*Email:</label>
|
||||
<input type="text" id="email" name="email" required="required"/>
|
||||
<label for="ime">* Ime:</label>
|
||||
<input type="text" id="ime" name="ime" required="required"/>
|
||||
|
||||
<label for="telefon">Telefon:</label>
|
||||
<input type="text" id="telefon" name="telefon"/>
|
||||
<label for="podjetje">Podjetje / institucija:</label>
|
||||
<input type="text" id="podjetje" name="podjetje"/>
|
||||
|
||||
<input type="checkbox" id="izjava" name="izjava" value="izjava" required="required">
|
||||
<label for="izjava">*Izjavljam, da sem lastnik avtorskih pravic in dovoljujem, da se besedila vključijo v korpuse v skladu z ustrezno licenco korpusa.</label>
|
||||
<label for="email">* Email:</label>
|
||||
<input type="text" id="email" name="email" required="required"/>
|
||||
|
||||
<button type="submit">Oddaj</button>
|
||||
<label for="telefon">Telefon:</label>
|
||||
<input type="text" id="telefon" name="telefon"/>
|
||||
|
||||
<input type="checkbox" id="izjava" name="izjava" value="izjava" required="required">
|
||||
<label for="izjava">* Izjavljam, da sem lastnik avtorskih pravic in dovoljujem, da se besedila vključijo v korpuse v skladu z ustrezno licenco korpusa.</label>
|
||||
|
||||
<button id="button-submit" type="submit">Oddaj</button>
|
||||
</div>
|
||||
|
||||
<div class="dropzone-previews"></div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropzone-previews"></div>
|
||||
</form>
|
||||
{{ dropzone.load_js() }}
|
||||
<script>
|
||||
function isEmptyOrSpaces(str){
|
||||
return str == null || str.match(/^ *$/) !== null;
|
||||
}
|
||||
<div id="popup-terms" style="display: none">
|
||||
<div id="popup-terms-text">
|
||||
<h2>POGODBA O PRENOSU AVTORSKIH PRAVIC</h2>
|
||||
|
||||
const reEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
<h3>UVODNE DOLOČBE</h3>
|
||||
<h4><b>1. člen</b></h4>
|
||||
|
||||
Dropzone.options.myDropzone = { // The camelized version of the ID of the form element
|
||||
url: "/upload",
|
||||
autoProcessQueue: false,
|
||||
uploadMultiple: true,
|
||||
parallelUploads: 20,
|
||||
paramName: "file", // The name that will be used to transfer the file
|
||||
maxFilesize: 1000, // MB
|
||||
acceptedFiles: ".txt, .csv, .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx",
|
||||
maxFiles: 20,
|
||||
dictDefaultMessage: `Kliknite ali odložite datoteke sem.`,
|
||||
dictFallbackMessage: "Vaš brskalnik ne podpira izbiranje datotek z odlaganjem (\"drag & drop\").",
|
||||
dictInvalidFileType: "Datoteka je napačnega formata.",
|
||||
dictFileTooBig: "Datoteke je prevelika {{filesize}}. Največja dovoljena velikost: {{maxFilesize}}MiB.",
|
||||
dictResponseError: "Napaka strežnika: {{statusCode}}",
|
||||
dictMaxFilesExceeded: "Ne morete naložiti več datotek.",
|
||||
dictCancelUpload: "Prekini prenos",
|
||||
dictRemoveFile: "Odstrani datoteko",
|
||||
dictCancelUploadConfirmation: "Ali res želite odstraniti to datoteko?",
|
||||
dictUploadCanceled: "Prenos prekinjen",
|
||||
<p>1.1. Stranki uvodoma ugotavljata, da naročnik izvaja projekt Razvoj slovenščine v digitalnem
|
||||
okolju – RSDO (v nadaljevanju projekt RSDO), ki je bil na javnem razpisu Razvoj slovenščine v
|
||||
digitalnem okolju – jezikovni viri in tehnologije (JR-ESRR-Razvoj slovenščine v digitalnem
|
||||
okolju), objavljenem v Uradnem listu RS št. 70/19 dne 29. 11. 2019, sprejet v sofinanciranje
|
||||
in katerega vsebina je razvidna s spletnih strani https://slovenscina.eu.</p>
|
||||
|
||||
// The setting up of the dropzone
|
||||
init: function() {
|
||||
var dz = this;
|
||||
<p>1.2. Stranki uvodoma ugotavljata, da bo naročnik v okviru projekta RSDO:
|
||||
- izdelal osrednjo digitalno slovarsko bazo, ki združuje različne tipe jezikovnih podatkov o
|
||||
slovenščini v odprtem dostopu,
|
||||
- izdelal terminološki portal z integriranim iskalnikom po slovenskih terminoloških virih, zlasti
|
||||
terminoloških slovarjih,
|
||||
- izdelal korpus prevodov po različnih domenah za učenje strojnega prevajalnika za jezikovni
|
||||
par angleščina-slovenščina in slovenščina-angleščina.</p>
|
||||
<p>1.3. Stranki uvodoma ugotavljata, da bo naročnik pri projektu RSDO za vse zgoraj opisane
|
||||
namene zbiral in uporabil besedilne vire, ki so navedeni v prilogi k tej pogodbi in ki so lahko
|
||||
avtorska dela ali drugi predmeti varstva v skladu z Zakonom o avtorski in sorodnih pravicah
|
||||
(Uradni list RS, št. 16/07 – uradno prečiščeno besedilo, 68/08, 110/13, 56/15, 63/16 – ZKUASP
|
||||
in 59/19; ZASP) in na katerih ima imetnik pravic avtorske, avtorski sorodne ali druge pravice v
|
||||
skladu z ZASP (v nadaljevanju avtorska dela).</p>
|
||||
|
||||
// First change the button to actually tell Dropzone to process the queue.
|
||||
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
|
||||
|
||||
// Make sure that the form isn't actually being sent.
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
<p>1.4. Stranki ugotavljata, da bodo avtorska dela in vse njihove morebitne spremembe in
|
||||
predelave, ter zbirke podatkov, ki bodo med izvajanjem projekta RSDO nastale, javno
|
||||
dostopni pod pogoji prostih licenc (npr. CC BY-SA) in bodo na voljo za nekomercialen in
|
||||
komercialen razvoj tehnologij, za raziskave in za druge raziskovalne namene
|
||||
posameznikom, raziskovalnim in izobraževalnim institucijam, neprofitnim organizacijam,
|
||||
državnim organom, organizacijam z javnimi pooblastili in gospodarskim družbam v Sloveniji
|
||||
in tujini.</p>
|
||||
|
||||
// Check form validity.
|
||||
var form = document.forms["my-dropzone"];
|
||||
var ime = form["ime"].value;
|
||||
var email = form["email"].value;
|
||||
var podjetje = form["podjetje"].value;
|
||||
var telefon = form["telefon"].value;
|
||||
var izjava = form["izjava"].checked;
|
||||
if (isEmptyOrSpaces(ime) || isEmptyOrSpaces(email) || !izjava) {
|
||||
alert("Izpolnite vsa obvezna polja!");
|
||||
} else if (!reEmail.test(email.toLowerCase())) {
|
||||
alert("Email napačnega formata!");
|
||||
} else if (ime.length > 100 || email.length > 100 || podjetje.length > 100 || telefon.length > 100) {
|
||||
alert("Velikost polj je omejena na 100 znakov.");
|
||||
} else {
|
||||
dz.processQueue();
|
||||
<h3>PREDMET POGODBE</h3>
|
||||
<h4><b>2. člen</b></h4>
|
||||
|
||||
<p>2.1. Predmet pogodbe so vsa avtorska dela imetnika pravic, ki so navedena v prilogi k tej
|
||||
pogodbi.</p>
|
||||
|
||||
<p>2.2. S podpisom te pogodbe imetnik avtorskih pravic na naročnika prenaša avtorske pravice
|
||||
na avtorskih delih na način in v obsegu, kakor je navedeno v 3. členu te pogodbe.</p>
|
||||
|
||||
<h3>PRENOS AVTORSKIH PRAVIC</h3>
|
||||
<h4><b>3. člen</b></h4>
|
||||
|
||||
<p>3.1. S podpisom te pogodbe imetnik pravic na avtorskih delih, ki so predmet te pogodbe, na
|
||||
naročnika neizključno, brez časovnih in teritorialnih omejitev prenaša vse materialne avtorske
|
||||
pravice, avtorski sorodne pravice in druge pravice avtorja v skladu z ZASP, zlasti pravico
|
||||
reproduciranja (23. člen ZASP), distribuiranja (24. člena ZASP), dajanja v najem (25. člen ZASP),
|
||||
priobčitve javnosti (26. do 32.a člen ZASP), vključno s pravico dajanja na voljo javnosti (32.a
|
||||
člen ZASP) in pravico predelave (33. člen ZASP).</p>
|
||||
|
||||
<p>3.2. S podpisom te pogodbe imetnik pravic izrecno soglaša, da naročnik pravice iz točke 3.1.
|
||||
prenaša naprej na tretje osebe brez omejitev.</p>
|
||||
|
||||
<h3>JAMČEVANJE IMETNIKA PRAVIC</h3>
|
||||
|
||||
<h4><b>4. člen</b></h4>
|
||||
|
||||
<p>4.1. S podpisom te pogodbe imetnik pravic jamči, da je na avtorskih delih, ki so predmet te
|
||||
pogodbe, imetnik vseh avtorskih pravic, avtorski sorodnih pravic in drugih pravic avtorja v
|
||||
skladu z ZASP, ki so potrebne za prenos pravic po tej pogodbi, in da na avtorskih delih ne
|
||||
obstajajo pravice tretjih oseb, ki bi naročniku preprečevale njihovo uporabo.</p>
|
||||
|
||||
<p>4.2. Določbe te pogodbe ne vplivajo na prenos moralnih avtorskih pravic, ki so v skladu z
|
||||
določbami ZASP neprenosljive.</p>
|
||||
|
||||
<h3>OSEBNI PODATKI</h3>
|
||||
<h4><b>5. člen</b></h4>
|
||||
|
||||
<p>6.1. Stranki se zavezujeta, da bosta vse morebitne osebne podatke, ki jih bosta obdelovali za
|
||||
namene izvajanja te pogodbe, obdelovali na način, da bosta upoštevali vse veljavne predpise
|
||||
o varstvu osebnih podatkov in da bosta posameznikom, na katere se osebni podatki nanašajo,
|
||||
zagotovili vse potrebne informacije v skladu s predpisi o varstvu osebnih podatkov.<p>
|
||||
|
||||
<h3>KONTAKTNE OSEBE</h3>
|
||||
<h4><b>6. člen</b></h4>
|
||||
|
||||
<p>7.1 Kontaktna oseba za izvedbo te pogodbe na strani naročnika je [xxx].</p>
|
||||
<p>7.2. Kontaktna oseba za izvedbo te pogodbe na strani imetnika pravic je [xxx].</p>
|
||||
|
||||
<h3>KONČNE DOLOČBE</h3>
|
||||
<h4><b>7. člen</b></h4>
|
||||
|
||||
<p>8.1. Če je katerakoli določba te pogodbe nična, ostanejo druga določila te pogodbe v veljavi.</p>
|
||||
|
||||
<h4><b>8. člen</b></h4>
|
||||
|
||||
<p>9.1. Za razmerja v zvezi s to pogodbo se uporabljajo pravni predpisi Republike Slovenije.</p>
|
||||
<p>9.2. Spore iz te pogodbe bosta stranki reševali po mirni poti. V primeru, da mirna rešitev ne
|
||||
bo mogoča, je za vse spore v zvezi s to pogodbo pristojno sodišče v Ljubljani.</p>
|
||||
|
||||
<h4><b>9. člen</b></h4>
|
||||
|
||||
<p>10.1. Ta pogodba nadomešča vsa predhodna pogajanja, ponudbe in druge dogovore med
|
||||
strankama.</p>
|
||||
<p>10.2. Ta pogodba je sestavljena v [dveh] istovetnih izvodih, od katerih prejme vsaka stranka
|
||||
po enega.</p>
|
||||
<p>10.3. Pogodbeni stranki s podpisom potrjujeta veljavnost te pogodbe.</p>
|
||||
</div>
|
||||
<button id="button-submit-cancel" class="button-terms" style="background: #ff2d2d;">Prekliči</button>
|
||||
<button id="button-submit-final" class="button-terms">Oddaj</button>
|
||||
</div>
|
||||
|
||||
<!--{{ dropzone.load_js() }}-->
|
||||
<script src="static/dropzone.js"></script>
|
||||
<script>
|
||||
//////////////////////////////
|
||||
// Curpus type button logic //
|
||||
//////////////////////////////
|
||||
var formSelector = document.getElementById("corpus-form-select");
|
||||
var buttons = document.getElementsByClassName("corpus-type-button");
|
||||
|
||||
function performButtonClickLogic(clickedBtnId) {
|
||||
// Update buttons
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
var btn = buttons[i];
|
||||
if (btn.id == clickedBtnId) {
|
||||
// Set style class
|
||||
btn.disabled = true;
|
||||
btn.classList.add("selected");
|
||||
} else {
|
||||
btn.disabled = false;
|
||||
btn.classList.remove("selected");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
|
||||
// of the sending event because uploadMultiple is set to true.
|
||||
this.on("sendingmultiple", function() {
|
||||
// Gets triggered when the form is actually being sent.
|
||||
// Hide the success button or the complete form.
|
||||
});
|
||||
// Update (hidden) form selector
|
||||
if (clickedBtnId == "corpus-type-prevodi") {
|
||||
formSelector.value = "prevodi";
|
||||
} else if (clickedBtnId == "corpus-type-gigafida") {
|
||||
formSelector.value = "gigafida";
|
||||
} else if (clickedBtnId == "corpus-type-solar") {
|
||||
formSelector.value = "solar";
|
||||
}
|
||||
}
|
||||
|
||||
this.on("successmultiple", function(files, response) {
|
||||
// Gets triggered when the files have successfully been sent.
|
||||
// Redirect user or notify of success.
|
||||
alert("Odgovor strežnika: " + response);
|
||||
location.reload();
|
||||
});
|
||||
var corpusTypeBtnListener = function(event) {
|
||||
var clickedBtnId = event.target.id;
|
||||
performButtonClickLogic(clickedBtnId);
|
||||
};
|
||||
|
||||
this.on("errormultiple", function(files, response) {
|
||||
// Gets triggered when there was an error sending the files.
|
||||
// Maybe show form again, and notify user of error
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].addEventListener('click', corpusTypeBtnListener);
|
||||
}
|
||||
|
||||
// When loading page automatically select "prevodi" option
|
||||
performButtonClickLogic("corpus-type-prevodi");
|
||||
|
||||
/////////////////////////
|
||||
// Dropzone //
|
||||
/////////////////////////
|
||||
var btnSubmit = document.getElementById("button-submit");
|
||||
var btnSubmitFinal = document.getElementById("button-submit-final");
|
||||
var btnSubmitCancel = document.getElementById("button-submit-cancel");
|
||||
var elemTermsPopup = document.getElementById("popup-terms");
|
||||
var termsScrollbox = document.getElementById("popup-terms-text");
|
||||
var scrollboxTriggered = false;
|
||||
var form = document.forms["my-dropzone"];
|
||||
|
||||
function isEmptyOrSpaces(str){
|
||||
return str == null || str.match(/^ *$/) !== null;
|
||||
}
|
||||
|
||||
const reEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
Dropzone.options.myDropzone = { // The camelized version of the ID of the form element
|
||||
url: "/upload",
|
||||
autoProcessQueue: false,
|
||||
uploadMultiple: true,
|
||||
parallelUploads: 20,
|
||||
paramName: "file", // The name that will be used to transfer the file
|
||||
maxFilesize: 1000, // MB
|
||||
acceptedFiles: ".txt, .csv, .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx",
|
||||
maxFiles: 20,
|
||||
dictDefaultMessage: `Kliknite ali odložite datoteke sem.`,
|
||||
dictFallbackMessage: "Vaš brskalnik ne podpira izbiranje datotek z odlaganjem (\"drag & drop\").",
|
||||
dictInvalidFileType: "Datoteka je napačnega formata.",
|
||||
dictFileTooBig: "Datoteke je prevelika {{filesize}}. Največja dovoljena velikost: {{maxFilesize}}MiB.",
|
||||
dictResponseError: "Napaka strežnika: {{statusCode}}",
|
||||
dictMaxFilesExceeded: "Ne morete naložiti več datotek.",
|
||||
dictCancelUpload: "Prekini prenos",
|
||||
dictRemoveFile: "Odstrani datoteko",
|
||||
dictCancelUploadConfirmation: "Ali res želite odstraniti to datoteko?",
|
||||
dictUploadCanceled: "Prenos prekinjen",
|
||||
|
||||
// The setting up of the dropzone
|
||||
init: function() {
|
||||
var dz = this;
|
||||
|
||||
|
||||
btnSubmit.addEventListener("click", function(e) {
|
||||
// Make sure that the form isn't actually being sent.
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// Check form validity.
|
||||
var ime = form["ime"].value;
|
||||
var email = form["email"].value;
|
||||
var podjetje = form["podjetje"].value;
|
||||
var telefon = form["telefon"].value;
|
||||
var izjava = form["izjava"].checked;
|
||||
if (isEmptyOrSpaces(ime) || isEmptyOrSpaces(email) || !izjava) {
|
||||
alert("Izpolnite vsa obvezna polja!");
|
||||
} else if (!reEmail.test(email.toLowerCase())) {
|
||||
alert("Email napačnega formata!");
|
||||
} else if (ime.length > 100 || email.length > 100 || podjetje.length > 100 || telefon.length > 100) {
|
||||
alert("Velikost polj je omejena na 100 znakov.");
|
||||
} else {
|
||||
// Then make terms popup visible
|
||||
btnSubmit.disabled = true;
|
||||
btnSubmitFinal.disabled = true;
|
||||
elemTermsPopup.style.display = "inline";
|
||||
scrollboxTriggered = false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// First change the button to actually tell Dropzone to process the queue.
|
||||
btnSubmitFinal.addEventListener("click", function(e) {
|
||||
// Hand off data to dropzone
|
||||
dz.processQueue();
|
||||
|
||||
// Clear fields and hide popup agian
|
||||
btnSubmit.disabled = false;
|
||||
elemTermsPopup.style.display = "none";
|
||||
form.reset();
|
||||
scrollboxTriggered = false;
|
||||
});
|
||||
|
||||
btnSubmitCancel.addEventListener("click", function(e) {
|
||||
btnSubmit.disabled = false;
|
||||
scrollboxTriggered = false;
|
||||
elemTermsPopup.style.display = "none";
|
||||
});
|
||||
|
||||
// Enable final submit button only if user scrolls to the end of the terms.
|
||||
function checkScrollboxTrigger(event) {
|
||||
var element = event.target;
|
||||
if (!scrollboxTriggered
|
||||
&& element.scrollHeight - element.scrollTop <= element.clientHeight + 50
|
||||
) {
|
||||
scrollboxTriggered = true;
|
||||
btnSubmitFinal.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
termsScrollbox.addEventListener('scroll', function(event) {
|
||||
checkScrollboxTrigger(event);
|
||||
});
|
||||
|
||||
termsScrollbox.addEventListener("mouseenter", function(event) {
|
||||
checkScrollboxTrigger(event);
|
||||
});
|
||||
|
||||
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
|
||||
// of the sending event because uploadMultiple is set to true.
|
||||
this.on("sendingmultiple", function() {
|
||||
// Gets triggered when the form is actually being sent.
|
||||
// Hide the success button or the complete form.
|
||||
});
|
||||
|
||||
this.on("successmultiple", function(files, response) {
|
||||
// Gets triggered when the files have successfully been sent.
|
||||
// Redirect user or notify of success.
|
||||
alert("Odgovor strežnika: " + response);
|
||||
location.reload();
|
||||
});
|
||||
|
||||
this.on("errormultiple", function(files, response) {
|
||||
// Gets triggered when there was an error sending the files.
|
||||
// Maybe show form again, and notify user of error
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user