166 lines
6.2 KiB
PHP
166 lines
6.2 KiB
PHP
@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(tr) {
|
|
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(e => {
|
|
this.unregister($(e.currentTarget))
|
|
})
|
|
)
|
|
} else {
|
|
name.html(this.name)
|
|
register.append(
|
|
$('<button></button>').addClass('ui mini circular icon button').append(
|
|
$('<i></i>').addClass('save icon')
|
|
).click(e => {
|
|
this.register($(e.currentTarget))
|
|
})
|
|
)
|
|
}
|
|
return tr.append(name).append(register)
|
|
}
|
|
register(button) {
|
|
const uri = '/mailboxes/register'
|
|
const data = {
|
|
mailboxes: [this.name]
|
|
}
|
|
button.html('').append(
|
|
$('<i></i>').addClass('redo loading icon')
|
|
)
|
|
return Send.post({
|
|
uri,
|
|
data
|
|
}).then(response => {
|
|
response.registered.mailboxes.forEach(mb => {
|
|
if (mb.name === this.name && mb.registered) {
|
|
this.id = mb.id
|
|
this.registered = true
|
|
const tr = button.parent().parent()
|
|
tr.html('')
|
|
this.draw(tr)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
unregister(button) {
|
|
const uri = '/mailboxes/unregister'
|
|
const data = {
|
|
mailboxes: [this.id]
|
|
}
|
|
button.html('').append(
|
|
$('<i></i>').addClass('redo loading icon')
|
|
)
|
|
return Send.delete({
|
|
uri,
|
|
data
|
|
}).then(response => {
|
|
response.unregistered.mailboxes.forEach(mb => {
|
|
if (mb.id === this.id && mb.unregistered) {
|
|
this.id = null
|
|
this.registered = false
|
|
const tr = button.parent().parent()
|
|
tr.html('')
|
|
this.draw(tr)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
const mailboxes = {
|
|
div_id: '',
|
|
mailboxes: [],
|
|
get: function() {
|
|
this.draw().loading()
|
|
return Send.get('/mailboxes').then((response, status, jqXHR) => {
|
|
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(' ')
|
|
).append(
|
|
$('<div></div>').addClass('ui active dimmer').append(
|
|
$('<div></div>').addClass('ui indeterminate elastic loader')
|
|
)
|
|
).append(
|
|
$('<p></p>').html(' ')
|
|
)
|
|
)
|
|
},
|
|
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($('<tr></tr>')))
|
|
})
|
|
return body
|
|
}
|
|
}
|
|
},
|
|
setup: function() {
|
|
this.get()
|
|
}
|
|
}
|
|
$().ready(() => {
|
|
mailboxes.div_id = '#mailboxes'
|
|
mailboxes.setup()
|
|
})
|
|
</script>
|
|
@endpush |