From e8b020e28ca377868ff8aad8418372debc910ae6 Mon Sep 17 00:00:00 2001 From: User Content Date: Wed, 30 Oct 2019 01:11:47 +0000 Subject: Initial commit --- static/rater.css | 292 +++++++++++++++++++++++++++++++++++++++++++++++ static/rater.js | 337 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 629 insertions(+) create mode 100644 static/rater.css create mode 100644 static/rater.js (limited to 'static') diff --git a/static/rater.css b/static/rater.css new file mode 100644 index 0000000..ae54a13 --- /dev/null +++ b/static/rater.css @@ -0,0 +1,292 @@ +body { + font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:200; font-stretch:normal; +} + +.username-wrapper { + position: absolute; + right: 5px; +} + +.changed { + background-color: #00f000; + color: white; +} + +.clearfix { + clear: both; +} + +#event-list { + padding-left: 0em; + list-style-type: none; +} + +.main-button { + vertical-align: top; + text-align: center; + height: 40px; + width: 40px; + padding: 0; +} + +.mini-button { + margin-right: 0.2em; +} + +button { + background-color: #759ae9; + background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + border-top: 1px solid #1f58cc; + border-right: 1px solid #1b4db3; + border-bottom: 1px solid #174299; + border-left: 1px solid #1b4db3; + border-radius: 4px; + box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); + color: #fff; + text-shadow: 0 -1px 1px #1a5ad9; +} + +.event-list-item { + vertical-align: top; + background-color: #f6f6f6; + margin-bottom: 0.5em; + border: 1px solid silver; + border-radius: 10px; + padding: 0 0.5em 0.5em 0.5em; + box-sizing: border-box; +} + +.event-list-item[event_state='gone'] { + background-image: + repeating-linear-gradient( + 45deg, + #eee, + #eee 20px, + #ddd 20px, + #ddd 40px /* determines size */ + ); +} + +.event-list-item[event_type=meeting] .event-title:before { content: 'MEETING '; color: red; font-size: smaller; } +.event-list-item[event_type=workshop] .event-title:before { content: 'WORKSHOP '; color: red; font-size: smaller; } +.event-list-item[event_type=concert] .event-title:before { content: 'CONCERT '; color: red; font-size: smaller; } +.event-list-item[event_type=film] .event-title:before { content: 'FILM '; color: red; font-size: smaller; } +.event-list-item[event_type=other] .event-title:before { content: 'OTHER '; color: red; font-size: smaller; } +.event-list-item[event_type=podium] .event-title:before { content: 'PODIUM '; color: red; font-size: smaller; } +.event-list-item[event_type=performance] .event-title:before { content: 'PERFORMANCE '; color: red; font-size: smaller; } +.event-list-item[event_type=lightning_talk] .event-title:before { content: 'LIGHTNING '; color: red; font-size: smaller; } + +body.two-column .event-list-item { + display: inline-block; + width: 48%; + margin-right: 1%; +} + +body.three-column .event-list-item { + display: inline-block; + width: 32%; + margin-right: 1%; +} + +body.four-column .event-list-item { + display: inline-block; + width: 23.5%; + margin-right: 1%; +} + +.event-rating { + display: inline-block; + width: 15em; + margin: 1em 1em 0 0; + padding: 0.2em; + background-color: #f0f0f0; + border-radius: 10px; + vertical-align:top; + font-size: smaller; +} + +.event-title, +.event-subtitle { + display: inline; + font-weight: bold; +} + +.event-subtitle { + font-size: smaller; +} + +.event-rating-comment { + min-height: 3em; + margin-top: 0.1em; + background-color: white; +} + +#Filter, #Username { + font-size: x-large; + height: 40px; +} + +.label { + float: left; + min-width: 8em !important; + font-style: italic; +} + +.event-persons { + margin-top: 0.2em; + margin-bottom: 0.2em; +} + +.event-speaker, .event-coordinator { + display: inline; +} + +.event-coordinator { + margin-right: 0.5em; +} + +.slider { + display: inline; +} + +.event-notes, +.event-description, +.event-abstract { + height: 1.2em; + overflow: hidden; + cursor: zoom-in; + margin-bottom: 0.2em; + margin-right: 2em; + text-overflow: ellipsis; + white-space: nowrap; +} + +.event-notes.full, +.event-description.full, +.event-abstract.full { + cursor: zoom-out; + background: white; + overflow: visible; + height: auto !important; + white-space: initial; +} + +body.only-lectures .lectures-button, +body.only-todo .todo-button, +body.show-ratings .ratings-button, +body.two-column .two-columns, +body.three-column .three-columns, +body.four-column .four-columns, +.event-list-item.editing .edit-button, +.event-list-item[event_state='accepted'] .accept-button, +.event-list-item[event_state='rejected'] .reject-button, +.event-list-item.i-am-coordinator .take-button +{ + background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); + background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); +} + +output { + margin-left: 1em; +} + +#event-own-rating, +.event-ratings { + display: none; + visibility: hidden; +} + +body.show-ratings .event-ratings, +.event-list-item.editing #event-own-rating { + display: block; + visibility: initial; +} + +#event-own-rating textarea { + min-width: 10em; + max-width: 20em; + width: 80%; +} + +.event-meter-bar { + box-sizing: initial; + display: inline; + float: left; + width: 65px; + vertical-align: top; + margin: 0; + padding: 0; +} + +.has-own-rating .event-meter-bar { + height: 65px; +} +.has-own-rating .event-meter-bar:after { + color: #ff0000; + z-index: 1; + content: '✓'; + font-size: 5em; + line-height: 1; + text-align: center; + position: relative; + left: 0; top: -65px; + width: 65px; + height: 65px; + opacity: 0.2; +} + +body.safari meter { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +meter { + vertical-align: top; + width: 60px; + margin-top: 0.3em; + border-radius: 3px; + height: 8px; + + -moz-appearance: none; +} + +meter::-moz-meter-bar { + background: #ddd; +} + +:-moz-meter-optimum::-moz-meter-bar { + background: #afa; +} + +meter.meter-4::-moz-meter-bar { + background: #fdd; +} + +meter::-webkit-meter-bar { + background: #ddd; + box-shadow: 0 2px 3px rgba (0, 0, 0, 0.2) inset; + border-radius: 3px; +} + +meter.meter-4::-webkit-meter-bar { + background: #fdd; +} + +#status { + text-align: center; + font-size: xx-large; + font-weight: bold; + margin-top: 0.5em; + width: 100%; + clear: both; +} + +body.only-lectures .event-list-item:not([event_type="lecture"]), +body.only-todo .event-list-item.has-own-rating, +.filtered, +.hidden { + display: none !important; + visibility: hidden !important; +} diff --git a/static/rater.js b/static/rater.js new file mode 100644 index 0000000..ec1bcfe --- /dev/null +++ b/static/rater.js @@ -0,0 +1,337 @@ +function changed_name() { + var username = localStorage.getItem("c3-rating-user"); + var newname = document.getElementById('Username').value; + document.getElementById('Username').classList.toggle('changed', username != newname); +} + +function changed_filter() { + var filtertext = document.getElementById('Filter').value.toLowerCase(); + if (filtertext == '') { + document.querySelectorAll('.event-list-item.filtered').forEach(function(ev) { + ev.classList.remove("filtered"); + }); + return; + } + + if (!window.inner_texts) { + window.inner_texts = {}; + document.querySelectorAll('.event-list-item').forEach(function(ev) { + inner_texts[ev.getAttribute('id')] = ev.innerText.toLowerCase(); + }); + } + + Object.keys(window.inner_texts).forEach(function (eid) { + var elem = document.getElementById(eid); + elem.classList.toggle('filtered', window.inner_texts[eid].indexOf(filtertext) < 0); + }); +} + +function confirm_name() { + localStorage.setItem("c3-rating-user", document.getElementById('Username').value); + document.getElementById('Username').classList.remove("changed"); + update_status(); +} + +function toggleHidden(name) { + document.getElementById(name).classList.toggle("hidden"); +} + +function toggleEdit(eid) { + var username = document.getElementById('Username').value; + if (!username) { + alert( "Please set your name before rating."); + return; + } + + var ev = document.getElementById('event-'+eid); + if (ev.classList.contains('editing')) { + ev.classList.toggle('editing', false); + return; + } + + var other_in_edit = document.getElementsByClassName('editing'); + if (other_in_edit.length) + other_in_edit[0].classList.remove('editing'); + + ev.classList.toggle('editing', true); + + var own_rating = document.getElementById('event-own-rating'); + ev.appendChild(own_rating); + + var myrating = document.querySelectorAll('div#event-rating-'+eid+'[submitter="'+username+'"]'); + var mycomment = ''; + if (myrating.length) { + mycomment = myrating[0].getElementsByClassName('event-rating-comment')[0].innerHTML; + myrating[0].querySelectorAll('meter').forEach(function(meter) { + var category = meter.getAttribute('category'); + document.querySelectorAll('#event-own-rating .slider input[category='+category+']')[0].value = meter.value; + changeVal('event-'+category+'-output', meter.value); + }); + } else { + document.querySelectorAll('#event-own-rating .slider input').forEach(function(sl) { + sl.value = 0; + var category = sl.getAttribute('category'); + changeVal('event-'+category+'-output', '0'); + }); + } + document.getElementById('event-comment').value = mycomment; + own_rating.querySelectorAll('button.remove-rating')[0].classList.toggle('hidden', !myrating.length); +} + +function changeVal(el, value) { + document.getElementById(el).innerHTML = value.toString() + " %"; +} + +function twocol() { + document.body.classList.toggle('two-column'); + document.body.classList.remove('three-column'); + document.body.classList.remove('four-column'); +} +function threecol() { + document.body.classList.remove('two-column'); + document.body.classList.toggle('three-column'); + document.body.classList.remove('four-column'); +} +function fourcol() { + document.body.classList.remove('two-column'); + document.body.classList.remove('three-column'); + document.body.classList.toggle('four-column'); +} + +function invert_sort() { + var evl = document.getElementById('event-list'); + var nodes = Array.prototype.slice.call(evl.getElementsByClassName('event-list-item')).reverse().forEach(function(el) { + evl.appendChild(el); + }); +} + +function sort_by(order_function) { + var evl = document.getElementById('event-list'); + Array.prototype.slice.call(evl.getElementsByClassName('event-list-item')).sort(order_function).forEach(function(el) { + evl.appendChild(el); + }); +} + +function myrating_count_sort(elem1, elem2) { + var username = document.getElementById('Username').value; + return elem2.querySelectorAll('.event-rating[submitter="'+username+'"]').length - elem1.querySelectorAll('.event-rating[submitter="'+username+'"]').length; +} + +function random_sort(elem1, elem2) { return !!Math.floor(Math.random() * 2) ? -1 : 1; } +function rating_count_sort(elem1, elem2) { return elem2.querySelectorAll('.event-rating').length - elem1.querySelectorAll('.event-rating').length; } +function rating_1_sort(elem1, elem2) { return elem2.getElementsByClassName('meter-0')[0].getAttribute('value') - elem1.getElementsByClassName('meter-0')[0].getAttribute('value'); } +function rating_2_sort(elem1, elem2) { return elem2.getElementsByClassName('meter-1')[0].getAttribute('value') - elem1.getElementsByClassName('meter-1')[0].getAttribute('value'); } +function rating_3_sort(elem1, elem2) { return elem2.getElementsByClassName('meter-2')[0].getAttribute('value') - elem1.getElementsByClassName('meter-2')[0].getAttribute('value'); } +function rating_4_sort(elem1, elem2) { return elem2.getElementsByClassName('meter-3')[0].getAttribute('value') - elem1.getElementsByClassName('meter-3')[0].getAttribute('value'); } +function rating_5_sort(elem1, elem2) { return elem2.getElementsByClassName('meter-4')[0].getAttribute('value') - elem1.getElementsByClassName('meter-4')[0].getAttribute('value'); } +function coordinator_sort(elem1, elem2) { return get_coordinator(elem1).localeCompare(get_coordinator(elem2)); } +function state_sort(elem1, elem2) { return elem2.getAttribute('event_state').localeCompare(elem1.getAttribute('event_state')); } + +function get_coordinator(elem) { + var coordinator = elem.getElementsByClassName('event-coordinator'); + if (coordinator.length) + return coordinator[0].getAttribute('coordinator'); + return ''; +} + +function do_remove_rating() { + if (confirm('are you sure?') == false) + return; + + var in_edit = document.getElementsByClassName('editing'); + if (!in_edit.length) + return; + var eid = in_edit[0].getAttribute('id').replace(/^event-/, ''); + + var xhttp = new XMLHttpRequest(); + xhttp.open("POST", "api/remove_rating/"+eid, true); + xhttp.setRequestHeader("Content-type", "application/json"); + + var username = document.getElementById('Username').value; + + xhttp.onreadystatechange = function() { + if (xhttp.readyState == XMLHttpRequest.DONE && xhttp.status == 200) { + var myrating = document.querySelectorAll('div#event-rating-'+eid+'[submitter="'+username+'"]'); + if(myrating.length) + myrating[0].parentNode.removeChild(myrating[0]); + toggleEdit(eid); + update_status(); + } + } + xhttp.send( JSON.stringify( { 'author': username } ) ); +} + +function do_remove_event(eid) { + var ev = document.getElementById('event-'+eid); + var xhttp = new XMLHttpRequest(); + xhttp.open("POST", "api/remove_event/"+eid, true); + xhttp.setRequestHeader("Content-type", "application/json"); + xhttp.onreadystatechange = function() { + if (xhttp.readyState == XMLHttpRequest.DONE && xhttp.status == 200) { + ev.parentNode.removeChild(ev); + } + } + xhttp.send(); +} + +function do_rate() { + var in_edit = document.getElementsByClassName('editing'); + if (!in_edit.length) + return; + var eid = in_edit[0].getAttribute('id').replace(/^event-/, ''); + + var username = document.getElementById('Username').value; + if (!username) { + alert( "Please set your name before rating."); + return; + } + + var xhttp = new XMLHttpRequest(); + xhttp.open("POST", "api/add_rating/"+eid, true); + xhttp.setRequestHeader("Content-type", "application/json"); + + ratings = {}; + document.getElementById('event-own-rating').querySelectorAll('.category-slider input').forEach(function(ev) { + ratings[ev.getAttribute("category")] = ev.value; + }); + var comment = document.getElementById('event-comment').value; + + xhttp.onreadystatechange = function() { + if (xhttp.readyState == XMLHttpRequest.DONE && xhttp.status == 200) { + var myrating = document.querySelectorAll('div#event-rating-'+eid+'[submitter="'+username+'"]'); + if (myrating.length) { + myrating = myrating[0]; + } else { + myrating = document.getElementById('event-rating-new').cloneNode(true); + myrating.setAttribute('id', 'event-rating-'+eid); + myrating.classList.remove('hidden'); + myrating.setAttribute('submitter', username); + myrating.getElementsByClassName('event-rating-submitter')[0].innerHTML = username + ':'; + document.querySelectorAll('#event-'+eid+' .event-ratings')[0].append(myrating); + } + myrating.getElementsByClassName('event-rating-comment')[0].innerHTML = comment; + for (category in ratings) { + myrating.querySelectorAll('meter[category='+category+']')[0].value = ratings[category]; + myrating.querySelectorAll('.event-rating-category-output[category='+category+']')[0].innerHTML = ' ' + categories[category] + ' ' + ratings[category] + ' %'; + } + + toggleEdit(eid); + update_status(); + } + } + + xhttp.send( JSON.stringify( { + 'author': username, + 'comment': comment, + 'ratings': ratings + } ) ); +} + +function do_set_state(eid, state) { + if ( state == document.getElementById('event-'+eid).getAttribute('event_state')) + state = ''; + + var xhttp = new XMLHttpRequest(); + xhttp.open("POST", "api/set_event_state/"+eid, true); + xhttp.setRequestHeader("Content-type", "application/json"); + xhttp.onreadystatechange = function() { + if (xhttp.readyState == XMLHttpRequest.DONE && xhttp.status == 200) { + document.getElementById('event-'+eid).setAttribute('event_state', state); + update_status(); + } + } + xhttp.send( JSON.stringify( { 'state': state } ) ); +} + +function do_take(eid) { + var username = document.getElementById('Username').value; + if (!username) { + alert( "Please set your name before taking an event."); + return; + } + + var ev = document.getElementById('event-'+eid); + if (ev.classList.contains('i-am-coordinator')) + username = ''; + + var xhttp = new XMLHttpRequest(); + xhttp.open("POST", "api/set_event_coordinator/"+eid, true); + xhttp.setRequestHeader("Content-type", "application/json"); + xhttp.onreadystatechange = function() { + if (xhttp.readyState == XMLHttpRequest.DONE && xhttp.status == 200) { + var coor = ev.getElementsByClassName('event-coordinator'); + if (coor.length) { + if (username) { + coor[0].innerHTML = 'coordinator: '+username; + coor[0].setAttribute('coordinator', username); + } else + coor[0].parentNode.removeChild(coor[0]); + } else { + if (username) { + var pers = ev.getElementsByClassName('event-persons'); + coor = document.createElement('div'); + coor.classList.toggle('event-coordinator', true); + coor.setAttribute('coordinator', username); + coor.innerHTML = 'coordinator: '+username; + pers[0].insertBefore(coor, pers[0].firstChild); + } + } + update_status(); + } + } + xhttp.send( JSON.stringify( { 'coordinator': username } ) ); +} + +function update_status() { + var accepted_count = document.querySelectorAll('.event-list-item[event_state=accepted]').length; + var rejected_count = document.querySelectorAll('.event-list-item[event_state=rejected]').length; + var taken_count = document.querySelectorAll('.event-list-item .event-coordinator').length; + var total_count = document.getElementsByClassName('event-list-item').length; + var total_voted_count = document.querySelectorAll('.event-rating:first-child').length; + var username = document.getElementById('Username').value; + var own_voted_count = 0; + if (username) + own_voted_count = document.querySelectorAll('.event-rating[submitter="'+username+'"]').length; + document.getElementById('status').innerHTML = total_count + ' events. ' + accepted_count + ' accepted. ' + rejected_count + ' rejected. ' + (total_count - own_voted_count) + ' todo. ' + (total_count - total_voted_count) + ' unvoted. ' + (total_count - taken_count) + ' untaken.'; + + /* Do the math */ + document.querySelectorAll('.event-list-item').forEach(function(ev) { + if (username) { + ev.classList.toggle('has-own-rating', ev.querySelectorAll('.event-rating[submitter="'+username+'"]').length > 0); + ev.classList.toggle('i-am-coordinator', ev.querySelectorAll('.event-coordinator[coordinator="'+username+'"]').length > 0); + } + + var counts = {}; + var meters = ev.querySelectorAll('.event-rating meter'); + + if (!meters.length) { + ev.querySelectorAll('.top-meter').forEach(function(meter) { + meter.setAttribute('value', 0); + }); + return; + } + + meters.forEach(function(rat) { + var tmp = counts[rat.getAttribute('category')] || 0; + counts[rat.getAttribute('category')] = tmp + parseInt(rat.getAttribute('value')); + }); + var total = 0, i = 0, divisor = meters.length / Object.keys(counts).length; + for (category in counts) { + var dest_meter = ev.getElementsByClassName('meter-'+i)[0]; + dest_meter.setAttribute('value', counts[category] / divisor); + dest_meter.setAttribute('title', category + ': ' + counts[category] / divisor + ' %' ); + total += counts[category] / divisor; + i++; + } + ev.getElementsByClassName('meter-4')[0].setAttribute('value', total / Object.keys(counts).length); + }); +} + +document.addEventListener('DOMContentLoaded', function () { + var username = localStorage.getItem("c3-rating-user"); + if (username) + document.getElementById('Username').value = username; + if (window.safari !== undefined) + document.body.classList.add('safari'); + update_status(); +}); -- cgit v1.2.3