Reworked housing page
This commit is contained in:
Godwin
@@ -1,4 +1,97 @@
|
||||
(function() {
|
||||
function closeGuestSelector() {
|
||||
document.getElementById('guest-selector').classList.remove('open');
|
||||
}
|
||||
function _post(form, params, f) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
if (request.status == 200) {
|
||||
f(request.responseText);
|
||||
}
|
||||
}
|
||||
}
|
||||
request.open('POST', form.getAttribute('action'), true);
|
||||
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
||||
params['authenticity_token'] = form.querySelector('[name="authenticity_token"]').value;
|
||||
var data = [];
|
||||
for (var key in params) {
|
||||
//data.push(key + '=' + encodeURI(params[key]));
|
||||
data.push(key + '=' + params[key]);
|
||||
}
|
||||
request.send(data.join('&'));
|
||||
}
|
||||
|
||||
function initHostTable(table) {
|
||||
forEachElement('.select-guest', function(button) {
|
||||
button.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
document.getElementById('guest-selector').classList.add('open');
|
||||
var table = document.getElementById('table');
|
||||
table.classList.add('loading');
|
||||
_post(
|
||||
document.getElementById('housing-table-form'),
|
||||
{
|
||||
host: button.getAttribute('data-host'),
|
||||
space: button.getAttribute('data-space'),
|
||||
button: 'get-guest-list'
|
||||
},
|
||||
function (response) {
|
||||
var table = document.getElementById('table');
|
||||
table.innerHTML = response;
|
||||
table.classList.remove('loading');
|
||||
forEachElement('tr.selectable', function(row) {
|
||||
row.addEventListener('click', function(event) {
|
||||
var table = document.getElementById('housing-table');
|
||||
table.classList.add('loading');
|
||||
closeGuestSelector();
|
||||
_post(
|
||||
document.getElementById('guest-list-table'),
|
||||
{
|
||||
host: row.getAttribute('data-host'),
|
||||
guest: row.getAttribute('data-guest'),
|
||||
space: row.getAttribute('data-space'),
|
||||
button: 'set-guest'
|
||||
},
|
||||
function(response) {
|
||||
table.innerHTML = response;
|
||||
table.classList.remove('loading');
|
||||
initHostTable(table);
|
||||
}
|
||||
)
|
||||
});
|
||||
}, table);
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
forEachElement('.remove-guest', function(button) {
|
||||
button.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
var table = document.getElementById('housing-table');
|
||||
table.classList.add('loading');
|
||||
_post(
|
||||
document.getElementById('housing-table-form'),
|
||||
{
|
||||
guest: button.getAttribute('data-guest'),
|
||||
button: 'remove-guest'
|
||||
},
|
||||
function (response) {
|
||||
table.innerHTML = response;
|
||||
table.classList.remove('loading');
|
||||
initHostTable(table);
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
initHostTable(document.getElementById('housing-table'));
|
||||
document.getElementById('guest-selector').addEventListener('click', function(event) {
|
||||
if (event.target.id == 'guest-selector') {
|
||||
closeGuestSelector();
|
||||
}
|
||||
});
|
||||
function closeOnTop() {
|
||||
document.documentElement.removeAttribute('data-ontop');
|
||||
document.getElementById('guest_id').value = '';
|
||||
|
||||
@@ -1490,6 +1490,43 @@ ul.warnings li,
|
||||
}
|
||||
|
||||
#admin-housing {
|
||||
.guests-housed {
|
||||
margin-bottom: 1em;
|
||||
text-align: right;
|
||||
|
||||
h5 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: inline-block;
|
||||
font-size: 1.125em;
|
||||
}
|
||||
}
|
||||
|
||||
#housing-table {
|
||||
@include _(transition, opacity 1s ease-in-out);
|
||||
|
||||
&.loading {
|
||||
@include _(opacity, 0.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
tr.host {
|
||||
th {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-top: 1em;
|
||||
text-align: right;
|
||||
@include font-family(primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.host-table {
|
||||
tr.place-guest {
|
||||
td {
|
||||
@@ -1498,6 +1535,14 @@ ul.warnings li,
|
||||
&:hover {
|
||||
background-color: $colour-1;
|
||||
}
|
||||
|
||||
&.full {
|
||||
background-color: #E8E8E8;
|
||||
|
||||
&:hover {
|
||||
background-color: #CCC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -1512,6 +1557,7 @@ ul.warnings li,
|
||||
}
|
||||
}
|
||||
|
||||
.remove-guest,
|
||||
button, .button {
|
||||
float: right;
|
||||
}
|
||||
@@ -1535,13 +1581,15 @@ ul.warnings li,
|
||||
top: 0;
|
||||
background-color: $white;
|
||||
border: 0.1em solid #CCC;
|
||||
padding: 0.25em 0.75em;
|
||||
padding: 0.25em 0.75em 0.25em 1.5em;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
list-style-type: square;
|
||||
@include default-box-shadow(top, 2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
li {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -1554,12 +1602,19 @@ ul.warnings li,
|
||||
}
|
||||
|
||||
#guest-selector {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba($black, 0.5);
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
|
||||
&.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.guest-dlg {
|
||||
position: absolute;
|
||||
@@ -1569,12 +1624,144 @@ ul.warnings li,
|
||||
left: 0;
|
||||
background-color: $white;
|
||||
width: 80%;
|
||||
max-width: 25em;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
height: 80%;
|
||||
cursor: default;
|
||||
@include default-box-shadow(top, 2);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(whiten) {
|
||||
to { background-color: $white; }
|
||||
}
|
||||
|
||||
#table {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
height: 80%;
|
||||
height: calc(100% - 4em);
|
||||
background-color: $white;
|
||||
@include _(transition, background-color 250ms ease-in-out);
|
||||
|
||||
&.loading {
|
||||
background-color: #CCC;
|
||||
@include _(animation, whiten ease-in-out 1s infinite alternate both);
|
||||
|
||||
.host-field, table, .legend {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 100em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.plain-value {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-top: 0;
|
||||
font-size: 0.85em;
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tr.selectable {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
th {
|
||||
background-color: $colour-2;
|
||||
}
|
||||
}
|
||||
|
||||
&.other-host, &.other-space, &.bad-match {
|
||||
td, th {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected-space, &.other-space {
|
||||
td {
|
||||
background-color: lighten($colour-5, 35);
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: $colour-5;
|
||||
}
|
||||
}
|
||||
|
||||
&.other-host {
|
||||
td {
|
||||
background-color: lighten($colour-1, 40%);
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: $colour-1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
td {
|
||||
opacity: 1;
|
||||
background-color: lighten($colour-2, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.legend ul {
|
||||
@include _-(display, flex);
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
@include _(flex, 1);
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0.125em 0.5em;
|
||||
margin: 0.1em;
|
||||
border: 0.1em solid #EEE;
|
||||
background-color: #F8F8F8;
|
||||
@include font-family(secondary);
|
||||
|
||||
&.other-host, &.other-space, &.bad-match {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.selected-space, &.other-space {
|
||||
background-color: $colour-5;
|
||||
}
|
||||
|
||||
&.other-host {
|
||||
background-color: $colour-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p {
|
||||
max-height: 4em;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#admin-housing {
|
||||
#hosts {
|
||||
background-color: $white;
|
||||
@@ -1862,9 +2049,9 @@ table.schedule {
|
||||
}
|
||||
|
||||
.event-dlg {
|
||||
@include _-(flex, 0);
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
@include _-(flex, 0);
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
background-color: $white;
|
||||
text-align: left;
|
||||
padding: 2em 2em 0.5em;
|
||||
|
||||
Reference in New Issue
Block a user