ProVM/emails
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

UI

Browse Source
This commit is contained in:
Aldarien
2022-11-25 20:52:59 -03:00
parent efed50cd7f
commit 9d1a1cc0f2
18 changed files with 786 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ui/common/Controller/Emails.php Normal file
View File

@ -0,0 +1,18 @@
<?php
namespace ProVM\Common\Controller;
use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;
use Slim\Views\Blade as View;
class Emails
{
public function __invoke(ServerRequestInterface $request, ResponseInterface $response, View $view): ResponseInterface
{
return $view->render($response, 'emails.mailboxes');
}
public function messages(ServerRequestInterface $request, ResponseInterface $response, View $view, string $mailbox): ResponseInterface
{
return $view->render($response, 'emails.messages', ['mailbox_id' => $mailbox]);
}
}

14
ui/common/Controller/Home.php Normal file
View File

@ -0,0 +1,14 @@
<?php
namespace ProVM\Common\Controller;
use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;
use Slim\Views\Blade as View;
class Home
{
public function __invoke(ServerRequestInterface $request, ResponseInterface $response, View $view): ResponseInterface
{
return $view->render($response, 'home');
}
}

10
ui/resources/routes/01_emails.php Normal file
View File

@ -0,0 +1,10 @@
<?php
use ProVM\Common\Controller\Emails;
$app->group('/emails', function($app) {
$app->group('/mailbox/{mailbox}', function ($app) {
$app->get('[/]', [Emails::class, 'messages']);
});
$app->get('/mailboxes', Emails::class);
$app->get('[/]', Emails::class);
});

4
ui/resources/routes/99_home.php Normal file
View File

@ -0,0 +1,4 @@
<?php
use ProVM\Common\Controller\Home;
$app->get('[/]', Home::class);

14
ui/resources/views/emails/base.blade.php Normal file
View File

@ -0,0 +1,14 @@
@extends('layout.base')
@section('page_title')
Emails
@hasSection('emails_title')
-
@yield('emails_title')
@endif
@endsection
@section('page_content')
<h1>Emails</h1>
@yield('emails_content')
@endsection

156
ui/resources/views/emails/mailboxes.blade.php Normal file
View File

@ -0,0 +1,156 @@
@extends('emails.base')
@section('emails_content')
<h3>Mailboxes</h3>
<div id="mailboxes" class="ui list"></div>
@endsection
@push('page_scripts')
<script type="text/javascript">
class Mailbox {
id
name
registered
constructor(props) {
this.name = props.name
this.registered = props.registered
if (props.registered) {
this.id = props.id
}
}
draw() {
const name = $('<td></td>')
const register = $('<td></td>')
if (this.registered) {
name.append(
$('<a></a>').attr('href', '{{$urls->base}}/emails/mailbox/' + this.id).html(this.name)
)
register.append(
$('<a></a>').attr('href', '{{$urls->base}}/emails/mailbox/' + this.id).append(
$('<i></i>').addClass('ui big green check circle icon')
)
).append(
$('<button></button>').addClass('ui mini circular red icon button').append(
$('<i></i>').addClass('remove icon')
).click(() => {
this.unregister()
})
)
} else {
name.html(this.name)
register.append(
$('<button></button>').addClass('ui mini circular icon button').append(
$('<i></i>').addClass('save icon')
).click(() => {
this.register()
})
)
}
return $('<tr></tr>').append(name).append(register)
}
register() {
const uri = '/mailboxes/register'
const data = {
mailboxes: [this.name]
}
return Send.post({
uri,
data
}).then(response => {
response.mailboxes.forEach(mb => {
if (mb.name === this.name && mb.created) {
this.id = mb.id
this.registered = true
mailboxes.draw().table()
}
})
})
}
unregister() {
const uri = '/mailboxes/unregister'
const data = {
mailboxes: [this.id]
}
return Send.delete({
uri,
data
}).then(response => {
response.mailboxes.forEach(mb => {
if (mb.id === this.id && mb.removed) {
this.id = null
this.registered = false
mailboxes.draw().table()
}
})
})
}
}
const mailboxes = {
div_id: '',
mailboxes: [],
get: function() {
this.draw().loading()
return Send.get('/mailboxes').then(response => {
response.mailboxes.forEach(mb => {
this.mailboxes.push(new Mailbox(mb))
})
this.draw().table()
})
},
draw: function() {
return {
loading: () => {
const parent = $(this.div_id)
parent.html('')
parent.append(
$('<div></div>').addClass('ui segment').append(
$('<p></p>').html('&nbsp;')
).append(
$('<div></div>').addClass('ui active dimmer').append(
$('<div></div>').addClass('ui indeterminate elastic loader')
)
).append(
$('<p></p>').html('&nbsp;')
)
)
},
table: () => {
const parent = $(this.div_id)
parent.html('')
return parent.append(
$('<table></table>').addClass('ui table').append(
this.draw().head()
).append(
this.draw().body()
)
)
},
head: () => {
return $('<thead></thead>').append(
$('<tr></tr>').append(
$('<th></th>').html('Mailbox')
).append(
$('<th></th>').html('Registered')
)
)
},
body: () => {
const body = $('<tbody></tbody>')
this.mailboxes.forEach(mb => {
body.append(mb.draw())
})
return body
}
}
},
setup: function() {
this.get()
}
}
$().ready(() => {
mailboxes.div_id = '#mailboxes'
mailboxes.setup()
})
</script>
@endpush

428
ui/resources/views/emails/messages.blade.php Normal file
View File

@ -0,0 +1,428 @@
@extends('emails.base')
@section('emails_content')
<h3>Messages - <span id="name"></span><span id="count"></span></h3>
<div id="messages" class="ui basic segment"></div>
@endsection
@push('page_scripts')
<script type="text/javascript">
class Message
{
id
uid
subject
date
from
states = {
attachments: false,
valid: false,
downloaded: false
}
constructor({id, uid, subject, date_time, from, states}) {
this.set().id(id)
.set().uid(uid)
.set().subject(subject)
.set().date(date_time)
.set().from(from)
.set().states(states)
}
get() {
return {
id: () => {
return this.id
},
uid: () => {
return this.uid
},
subject: () => {
return this.subject
},
date: () => {
return this.date
},
from: () => {
return this.from
},
states: () => {
return this.states
}
}
}
set() {
return {
id: id => {
this.id = id
return this
},
uid: uid => {
this.uid = uid
return this
},
subject: subject => {
this.subject = subject
return this
},
date: date => {
this.date = date
return this
},
from: from => {
this.from = from
return this
},
states: states => {
const map_keys = {
has_attachments: 'attachments',
valid_attachments: 'valid',
downloaded_attachments: 'downloaded'
}
Object.keys(states).forEach(k => {
this.states[map_keys[k]] = states[k]
})
return this
}
}
}
has() {
return {
attachments: () => {
return this.states.attachments
},
valid: () => {
return this.states.valid
},
downloaded: () => {
return this.states.downloaded
}
}
}
doesHave() {
return {
attachments: () => {
this.states.attachments = true
return this
},
valid: () => {
this.states.valid = true
return this
},
downloaded: () => {
this.states.downloaded = true
return this
}
}
}
draw() {
const format = Intl.DateTimeFormat('es-CL', {dateStyle: 'full', timeStyle: 'short'})
let date = new Date()
try {
date = new Date(this.get().date())
} catch (e) {
console.debug(e)
}
return $('<tr></tr>').append(
$('<td></td>').html(this.get().subject())
).append(
$('<td></td>').html(format.format(date))
).append(
$('<td></td>').html(this.get().from())
).append(
$('<td></td>').html($('<i></i>').addClass(this.has().attachments() ? 'green check circle icon' : 'red times circle icon'))
).append(
$('<td></td>').html($('<i></i>').addClass(this.has().valid() ? 'green check circle icon' : 'red times circle icon'))
).append(
$('<td></td>').html($('<i></i>').addClass(this.has().downloaded() ? 'green check circle icon' : 'red times circle icon'))
).append(
$('<td></td>').append(
(this.has().attachments() && this.has().valid() && !this.has().downloaded()) ?
$('<button></button>').addClass('ui mini green circular icon button').append(
$('<i></i>').addClass('paperclip icon')
).click(() => {
this.download().attachments(this.get().uid())
}) : ''
)
)
}
download() {
return {
attachments: uid => {
const uri = '/emails/attachment'
const data = {
mailbox: '{{$mailbox_id}}',
messages: [
uid
],
extension: 'pdf'
}
return Send.post({
uri,
data
}).then(response => {
if (response.attachments_count > 0) {
alert('Grabbed Attachments')
}
})
}
}
}
}
const messages = {
id: {
results: '',
name: '',
count: ''
},
page: 1,
current: 0,
shown: 10,
total: null,
visible: [],
get: function() {
return {
mailbox: () => {
this.draw().loader()
const uri = '/mailbox/{{$mailbox_id}}'
return Send.get(uri).then(response => {
$(this.id.name).html(response.mailbox.name)
})
},
messages: () => {
const uri = '/messages/valid'
const data = {
mailboxes: ['{{$mailbox_id}}']
}
return Send.post({
uri,
data
}).then(response => {
if (this.total === null) {
$(this.id.count).html(' (' + response.total + ')')
this.total = response.total
}
this.visible = []
response.messages.forEach(m => {
this.visible.push(new Message(m))
})
if (this.total > 0) {
$(this.id.results).html('').append(
this.draw().table()
)
} else {
$(this.id.results).html('').append(
this.draw().empty()
)
}
})
}
}
},
draw: function() {
const columns = 8
return {
loader: () => {
$(this.id.results).html('').append(
$('<div></div>').addClass('ui segment').append(
$('<p></p>').html('&nbsp;')
).append(
$('<div></div>').addClass('ui active dimmer').append(
$('<div></div>').addClass('ui indeterminate elastic loader')
)
).append(
$('<p></p>').html('&nbsp;')
)
)
},
table: () => {
return $('<table></table>').addClass('ui table').append(
this.draw().head()
).append(
this.draw().body()
).append(
this.draw().footer()
)
},
head: () => {
const values = []
for (let i = 0; i < 10; i ++) {
const v = {
name: (i + 1) * 10,
value: (i + 1) * 10
}
if ((i + 1) * 10 === this.shown) {
v['selected'] = true
}
values.push(v)
}
const dropdown = $('<div></div>').addClass('ui scrolling dropdown').append(
$('<i></i>').addClass('dropdown icon')
).append(
$('<div></div>').addClass('text').html(this.shown)
).dropdown({
values,
onChange: (value, text, $choice) => {
if (value === this.shown) {
return
}
this.shown = parseInt(value)
// Trigger pending transition
$choice.parent().parent().dropdown('hide')
this.get()
}
})
return $('<thead></thead>').append(
$('<tr></tr>').append(
$('<th></th>').addClass('right aligned').attr('colspan', columns).append(
dropdown
).append(
$('<span></span>').addClass('ui basic label').html((this.current + 1) + ' - ' + Math.min(this.shown + this.current, this.total ?? 99999999))
).append(
$('<button></button>').addClass('ui mini circular icon button').append(
$('<i></i>').addClass('left chevron icon')
).click(() => {
this.prev()
})
).append(
$('<button></button>').addClass('ui mini circular icon button').append(
$('<i></i>').addClass('right chevron icon')
).click(() => {
this.next()
})
)
)
).append(
$('<tr></tr>').append(
$('<th></th>').html('#')
).append(
$('<th></th>').html('Subject')
).append(
$('<th></th>').html('Date')
).append(
$('<th></th>').html('From')
).append(
$('<th></th>').html('Has Attachments')
).append(
$('<th></th>').html('Valid Attachments')
).append(
$('<th></th>').html('Downloaded Attachments')
).append(
$('<th></th>')
)
)
},
body: () => {
const tbody = $('<tbody></tbody>')
this.visible.forEach((m, i) => {
const row = m.draw()
row.prepend(
$('<td></td>').html(i + this.current + 1)
)
tbody.append(row)
})
return tbody
},
footer: () => {
const pages = this.lastPage()
const paging = $('<div></div>').addClass('ui right floated pagination menu')
if (this.page !== 1) {
paging.append(
$('<a></a>').addClass('icon item').append(
$('<i></i>').addClass('step backward icon')
).click(() => {
this.first()
})
)
}
for (let i = 0; i < pages; i ++) {
const page = $('<a></a>').addClass('item').html(i + 1).click(() => {
this.goto(i + 1)
})
if (i + 1 === this.page) {
page.addClass('active')
}
paging.append(page)
}
if (this.page !== this.lastPage()) {
paging.append(
$('<a></a>').addClass('icon item').append(
$('<i></i>').addClass('step forward icon')
).click(() => {
this.last()
})
)
}
return $('<tfoot></tfoot>').append(
$('<tr></tr>').append(
$('<th></th>').attr('colspan', columns).append(paging)
)
)
},
empty: () => {
return $('<div></div>').addClass('ui message').html('No messages found.')
}
}
},
lastPage: function() {
let pages = Math.floor(this.total / this.shown)
if (this.total / this.shown > pages) {
pages ++
}
return pages
},
first: function() {
if (this.current === 0) {
return
}
this.page = 1
this.current = 0
this.get()
},
next: function() {
if (this.current + this.shown >= this.total) {
return
}
this.page ++
this.current += this.shown
this.get()
},
goto: function(page) {
if (this.page === page) {
return
}
this.page = page
this.current = (this.page - 1) * this.shown
this.get()
},
prev: function() {
if (this.current < this.shown) {
return
}
this.page --
this.current -= this.shown
this.get()
},
last: function() {
if (this.page === this.lastPage()) {
return
}
this.page = this.lastPage()
this.current = (this.page - 1) * this.shown
this.get()
},
setup: function() {
this.get().mailbox().then(() => {
this.get().messages()
})
}
}
$().ready(() => {
messages.id.results = '#messages'
messages.id.name = '#name'
messages.id.count = '#count'
messages.setup()
})
</script>
@endpush

57
ui/resources/views/home.blade.php Normal file
View File

@ -0,0 +1,57 @@
@extends('layout.base')
@section('page_content')
<h1>Registered Mailboxes</h1>
<div id="mailboxes"></div>
@endsection
@push('page_scripts')
<script type="text/javascript">
const mailboxes = {
div_id: '',
mailboxes: [],
get: function() {
const uri = '/mailboxes/registered'
this.draw().loading()
return Send.get(uri).then(response => {
this.mailboxes = response.mailboxes
this.draw().list()
})
},
draw: function() {
return {
loading: () => {
const parent = $(this.div_id)
parent.html('')
parent.append(
$('<div></div>').addClass('ui segment').append(
$('<p></p>').html('&nbsp;')
).append(
$('<div></div>').addClass('ui active dimmer').append(
$('<div></div>').addClass('ui indeterminate elastic loader')
)
).append(
$('<p></p>').html('&nbsp;')
)
)
},
list: () => {
const parent = $(this.div_id)
parent.html('')
const list = $('<div></div>').addClass('ui list')
this.mailboxes.forEach(mb => {
list.append(
$('<a></a>').addClass('item').attr('href', '{{$urls->base}}/emails/mailbox/' + mb.id).html(mb.name)
)
})
parent.append(list)
}
}
}
}
$().ready(() => {
mailboxes.div_id = '#mailboxes'
mailboxes.get()
})
</script>
@endpush

5
ui/resources/views/layout/base.blade.php Normal file
View File

@ -0,0 +1,5 @@
<!DOCTYPE html>
<html lang="es">
@include('layout.head')
@include('layout.body')
</html>

7
ui/resources/views/layout/body.blade.php Normal file
View File

@ -0,0 +1,7 @@
<body>
@include('layout.body.header')
<div class="ui container">
@yield('page_content')
</div>
@include('layout.body.footer')
</body>

4
ui/resources/views/layout/body/footer.blade.php Normal file
View File

@ -0,0 +1,4 @@
<footer>
</footer>
@include('layout.body.footer.scripts')

6
ui/resources/views/layout/body/footer/scripts.blade.php Normal file
View File

@ -0,0 +1,6 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.js" integrity="sha512-kcjXjSNAMuKRYv8VAk/rMsHzGC/M/thh4QRZAE3SM2HPAQs77N0aOVh35IpJAtLxFpzfHeYzFHf9upgnNFfQUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@include('layout.body.footer.scripts.main')
@stack('page_scripts')

38
ui/resources/views/layout/body/footer/scripts/main.blade.php Normal file
View File

@ -0,0 +1,38 @@
<script type="text/javascript">
const Send = {
base_url: '{{$urls->api}}',
base: function({method, uri, data = null, dataType = 'json', contentType = 'application/json'}) {
const url = this.base_url + '/' + uri.replace(/^\//g, '')
const options = {
method,
url,
crossDomain: true,
headers: {
'Authorization': [
'Bearer {{$api_key}}'
]
},
dataType
}
if (method.toLowerCase() !== 'get' && data !== null) {
if (!(typeof data === 'string' || data instanceof String)) {
options['data'] = JSON.stringify(data)
}
options['contentType'] = contentType
}
return $.ajax(options)
},
get: function(uri, dataType = 'json') {
return this.base({method: 'get', uri, dataType})
},
post: function({uri, data, dataType = 'json', contentType = 'application/json'}) {
return this.base({method: 'post', uri, data, dataType, contentType})
},
put: function({uri, data, dataType = 'json', contentType = 'application/json'}) {
return this.base({method: 'put', uri, data, dataType, contentType})
},
delete: function({uri, data, dataType = 'json', contentType = 'application/json'}) {
return this.base({method: 'delete', uri, data, dataType, contentType})
}
}
</script>

5
ui/resources/views/layout/body/header.blade.php Normal file
View File

@ -0,0 +1,5 @@
<header>
<div class="ui container">
@include('layout.body.header.navbar')
</div>
</header>

5
ui/resources/views/layout/body/header/navbar.blade.php Normal file
View File

@ -0,0 +1,5 @@
<nav class="ui menu">
<a class="item" href="{{$urls->base}}">Inicio</a>
<a class="item" href="{{$urls->base}}/emails/mailboxes">Register Mailboxes</a>
</nav>
<br />

11
ui/resources/views/layout/head.blade.php Normal file
View File

@ -0,0 +1,11 @@
<head>
<meta charset="utf-8" />
<title>
Emails
@hasSection('page_title')
-
@yield('page_title')
@endif
</title>
@include('layout.head.styles')
</head>

3
ui/resources/views/layout/head/styles.blade.php Normal file
View File

@ -0,0 +1,3 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.css" integrity="sha512-PwhgdrueUt7iVICnZMjYcbiLalCztrVfzUIYXekIK8hZu4DQP141GrKh6fUHmNERWi4bGdBXIZqtBZnsSzHEMg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@stack('page_styles')

2
ui/setup/settings/03_urls.php
View File

@ -1,7 +1,7 @@
<?php
return [
'urls' => function() {
$arr = ['base' => '/'];
$arr = ['base' => $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST']];
$arr['api'] = 'http://localhost:8080';
return (object) $arr;
}