<!DOCTYPE html>
<html>
<head>
<title>Office Hours Queue</title>
<!--The following two links describe styling for the webpage. -->
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- The following script tags pull JavaScript files to power the app's functionality.
JQuery is a JavaScript library that makes it easy to find elements on the
webpage (e.g. uniqname and location text input boxes) and Bootstrap
is a JavaScript library that helps with layout of the webpage.
-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="index.css" />
<!-- The following CSS describes styling for the webpage. -->
<style type="text/css">
svg:not(:root).svg-inline--fa {
overflow: visible;
}
.svg-inline--fa {
display: inline-block;
font-size: inherit;
height: 1em;
overflow: visible;
vertical-align: -0.125em;
}
.svg-inline--fa.fa-lg {
vertical-align: -0.225em;
}
.svg-inline--fa.fa-w-1 {
width: 0.0625em;
}
.svg-inline--fa.fa-w-2 {
width: 0.125em;
}
.svg-inline--fa.fa-w-3 {
width: 0.1875em;
}
.svg-inline--fa.fa-w-4 {
width: 0.25em;
}
.svg-inline--fa.fa-w-5 {
width: 0.3125em;
}
.svg-inline--fa.fa-w-6 {
width: 0.375em;
}
.svg-inline--fa.fa-w-7 {
width: 0.4375em;
}
.svg-inline--fa.fa-w-8 {
width: 0.5em;
}
.svg-inline--fa.fa-w-9 {
width: 0.5625em;
}
.svg-inline--fa.fa-w-10 {
width: 0.625em;
}
.svg-inline--fa.fa-w-11 {
width: 0.6875em;
}
.svg-inline--fa.fa-w-12 {
width: 0.75em;
}
.svg-inline--fa.fa-w-13 {
width: 0.8125em;
}
.svg-inline--fa.fa-w-14 {
width: 0.875em;
}
.svg-inline--fa.fa-w-15 {
width: 0.9375em;
}
.svg-inline--fa.fa-w-16 {
width: 1em;
}
.svg-inline--fa.fa-w-17 {
width: 1.0625em;
}
.svg-inline--fa.fa-w-18 {
width: 1.125em;
}
.svg-inline--fa.fa-w-19 {
width: 1.1875em;
}
.svg-inline--fa.fa-w-20 {
width: 1.25em;
}
.svg-inline--fa.fa-pull-left {
margin-right: 0.3em;
width: auto;
}
.svg-inline--fa.fa-pull-right {
margin-left: 0.3em;
width: auto;
}
.svg-inline--fa.fa-border {
height: 1.5em;
}
.svg-inline--fa.fa-li {
width: 2em;
}
.svg-inline--fa.fa-fw {
width: 1.25em;
}
.fa-layers svg.svg-inline--fa {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.fa-layers {
display: inline-block;
height: 1em;
position: relative;
text-align: center;
vertical-align: -0.125em;
width: 1em;
}
.fa-layers svg.svg-inline--fa {
-webkit-transform-origin: center center;
transform-origin: center center;
}
.fa-layers-counter,
.fa-layers-text {
display: inline-block;
position: absolute;
text-align: center;
}
.fa-layers-text {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform-origin: center center;
transform-origin: center center;
}
.fa-layers-counter {
background-color: #ff253a;
border-radius: 1em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
height: 1.5em;
line-height: 1;
max-width: 5em;
min-width: 1.5em;
overflow: hidden;
padding: 0.25em;
right: 0;
text-overflow: ellipsis;
top: 0;
-webkit-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.fa-layers-bottom-right {
bottom: 0;
right: 0;
top: auto;
-webkit-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.fa-layers-bottom-left {
bottom: 0;
left: 0;
right: auto;
top: auto;
-webkit-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.fa-layers-top-right {
right: 0;
top: 0;
-webkit-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.fa-layers-top-left {
left: 0;
right: auto;
top: 0;
-webkit-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: top left;
transform-origin: top left;
}
.fa-lg {
font-size: 1.3333333333em;
line-height: 0.75em;
vertical-align: -0.0667em;
}
.fa-xs {
font-size: 0.75em;
}
.fa-sm {
font-size: 0.875em;
}
.fa-1x {
font-size: 1em;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}
.fa-6x {
font-size: 6em;
}
.fa-7x {
font-size: 7em;
}
.fa-8x {
font-size: 8em;
}
.fa-9x {
font-size: 9em;
}
.fa-10x {
font-size: 10em;
}
.fa-fw {
text-align: center;
width: 1.25em;
}
.fa-ul {
list-style-type: none;
margin-left: 2.5em;
padding-left: 0;
}
.fa-ul>li {
position: relative;
}
.fa-li {
left: -2em;
position: absolute;
text-align: center;
width: 2em;
line-height: inherit;
}
.fa-border {
border: solid 0.08em #eee;
border-radius: 0.1em;
padding: 0.2em 0.25em 0.15em;
}
.fa-pull-left {
float: left;
}
.fa-pull-right {
float: right;
}
.fa.fa-pull-left,
.fas.fa-pull-left,
.far.fa-pull-left,
.fal.fa-pull-left,
.fab.fa-pull-left {
margin-right: 0.3em;
}
.fa.fa-pull-right,
.fas.fa-pull-right,
.far.fa-pull-right,
.fal.fa-pull-right,
.fab.fa-pull-right {
margin-left: 0.3em;
}
.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.fa-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.fa-rotate-90 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.fa-rotate-180 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.fa-rotate-270 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.fa-flip-horizontal {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.fa-flip-vertical {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-webkit-transform: scale(1, -1);
transform: scale(1, -1);
}
.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-webkit-transform: scale(-1, -1);
transform: scale(-1, -1);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical,
:root .fa-flip-both {
-webkit-filter: none;
filter: none;
}
.fa-stack {
display: inline-block;
height: 2em;
position: relative;
width: 2.5em;
}
.fa-stack-1x,
.fa-stack-2x {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.svg-inline--fa.fa-stack-1x {
height: 1em;
width: 1.25em;
}
.svg-inline--fa.fa-stack-2x {
height: 2em;
width: 2.5em;
}
.fa-inverse {
color: #fff;
}
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.svg-inline--fa .fa-primary {
fill: var(--fa-primary-color, currentColor);
opacity: 1;
opacity: var(--fa-primary-opacity, 1);
}
.svg-inline--fa .fa-secondary {
fill: var(--fa-secondary-color, currentColor);
opacity: 0.4;
opacity: var(--fa-secondary-opacity, 0.4);
}
.svg-inline--fa.fa-swap-opacity .fa-primary {
opacity: 0.4;
opacity: var(--fa-secondary-opacity, 0.4);
}
.svg-inline--fa.fa-swap-opacity .fa-secondary {
opacity: 1;
opacity: var(--fa-primary-opacity, 1);
}
.svg-inline--fa mask .fa-primary,
.svg-inline--fa mask .fa-secondary {
fill: black;
}
.fad.fa-inverse {
color: #fff;
}
</style>
</head>
<body>
<div>
<nav class="navbar has-shadow is-spaced">
<div class="container">
<div class="navbar-brand">
<div class="navbar-item">
<h1 class="title"><a href="https://eecsoh.eecs.umich.edu/" class="no-link-color router-link-active">Office
Hours</a></h1>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item"><span class="is-left b-tooltip is-primary is-top is-medium">
<div class="tooltip-content" style="display: none;">Student View</div>
<div class="tooltip-trigger"><svg aria-hidden="true" focusable="false" data-prefix="fas"
data-icon="user-graduate" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="clickable-icon svg-inline--fa fa-user-graduate fa-w-14 fa-2x">
<path fill="currentColor"
d="M319.4 320.6L224 416l-95.4-95.4C57.1 323.7 0 382.2 0 454.4v9.6c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-9.6c0-72.2-57.1-130.7-128.6-133.8zM13.6 79.8l6.4 1.5v58.4c-7 4.2-12 11.5-12 20.3 0 8.4 4.6 15.4 11.1 19.7L3.5 242c-1.7 6.9 2.1 14 7.6 14h41.8c5.5 0 9.3-7.1 7.6-14l-15.6-62.3C51.4 175.4 56 168.4 56 160c0-8.8-5-16.1-12-20.3V87.1l66 15.9c-8.6 17.2-14 36.4-14 57 0 70.7 57.3 128 128 128s128-57.3 128-128c0-20.6-5.3-39.8-14-57l96.3-23.2c18.2-4.4 18.2-27.1 0-31.5l-190.4-46c-13-3.1-26.7-3.1-39.7 0L13.6 48.2c-18.1 4.4-18.1 27.2 0 31.6z"
class=""></path>
</svg></div>
</span></div>
<!---->
<div class="navbar-item"><a href="" class="no-link-color"><svg
aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-shield" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"
class="svg-inline--fa fa-user-shield fa-w-20 fa-2x">
<path fill="currentColor"
d="M622.3 271.1l-115.2-45c-4.1-1.6-12.6-3.7-22.2 0l-115.2 45c-10.7 4.2-17.7 14-17.7 24.9 0 111.6 68.7 188.8 132.9 213.9 9.6 3.7 18 1.6 22.2 0C558.4 489.9 640 420.5 640 296c0-10.9-7-20.7-17.7-24.9zM496 462.4V273.3l95.5 37.3c-5.6 87.1-60.9 135.4-95.5 151.8zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm96 40c0-2.5.8-4.8 1.1-7.2-2.5-.1-4.9-.8-7.5-.8h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c6.8 0 13.3-1.5 19.2-4-54-42.9-99.2-116.7-99.2-212z"
class=""></path>
</svg></a></div>
<div class="navbar-item"><a href="https://github.com/CarsonHoffman/office-hours-queue" target="_blank"
class="no-link-color"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"
class="svg-inline--fa fa-github fa-w-16 fa-2x">
<path fill="currentColor"
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
class=""></path>
</svg></a></div>
<div class="navbar-item"><a href=""><button
class="button is-danger"><span class="icon"><svg aria-hidden="true" focusable="false" data-prefix="fas"
data-icon="sign-out-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
class="svg-inline--fa fa-sign-out-alt fa-w-16">
<path fill="currentColor"
d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"
class=""></path>
</svg></span><span>Log out</span></button></a></div>
</div>
</div>
</nav>
<section class="section main-section">
<div class="container">
<div class="columns">
<div class="column is-one-fifth">
<div class="menu sticky">
<p class="menu-label">Courses</p>
<ul class="menu-list">
<div class="course">
<li class="course-item"><a class="is-active is-expanded">
<!----><span> EECS 280 </span>
</a>
<ul style="">
<li class="course-item"><a href=""
class="router-link-exact-active router-link-active is-active" aria-current="page">
<!----><span> 2 - 8pm Eastern OH </span>
</a>
<!---->
</li>
<li class="course-item"><a href=""
class="">
<!----><span> Alternate Time Zone OH </span>
</a>
<!---->
</li>
</ul>
</li><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="star" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
class="clickable-icon course-favorite svg-inline--fa fa-star fa-w-18 white-icon">
<path fill="currentColor"
d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
class=""></path>
</svg>
</div>
</ul>
</div>
</div>
<div class="column is-four-fifths">
<div data-v-24687982="" class="box">
<section data-v-24687982="" class="section">
<h1 data-v-24687982="" class="title">Announcements</h1>
<div data-v-24687982="" class="block">
<div data-v-5c16d93c="" data-v-24687982="" class="notification is-warning"><button data-v-5c16d93c=""
class="delete"></button>
<p data-v-5c16d93c="" class="announcement">Please make sure you have a working meeting link. If you
are using Zoom, please monitor your waiting room if enabled! If you are unresponsive when it is
your turn, you will be popped off the queue without being helped.</p>
</div>
</div>
</section>
<section data-v-24687982="" class="section">
<div data-v-080604b5="" data-v-24687982="" class="columns">
<div data-v-080604b5="" class="column is-6">
<div data-v-080604b5="" class="entries">
<h1 data-v-080604b5="" class="title">Queue</h1>
<div data-v-080604b5="">
<div data-v-080604b5="" id="queueEntry">
<!--As entries are added to the queue, HTML code is inserted here-->
</div>
</div>
</div>
</div>
<div data-v-080604b5="" class="column is-5 is-offset-1">
<div data-v-080604b5="" class="entries">
<div data-v-080604b5="" class="level block">
<div data-v-080604b5="" class="level-left" >
<p data-v-080604b5="" class="level-item"><svg data-v-080604b5="" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="user-graduate" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fixed-size=""
class="svg-inline--fa fa-user-graduate fa-w-14">
<path data-v-080604b5="" fill="currentColor"
d="M319.4 320.6L224 416l-95.4-95.4C57.1 323.7 0 382.2 0 454.4v9.6c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-9.6c0-72.2-57.1-130.7-128.6-133.8zM13.6 79.8l6.4 1.5v58.4c-7 4.2-12 11.5-12 20.3 0 8.4 4.6 15.4 11.1 19.7L3.5 242c-1.7 6.9 2.1 14 7.6 14h41.8c5.5 0 9.3-7.1 7.6-14l-15.6-62.3C51.4 175.4 56 168.4 56 160c0-8.8-5-16.1-12-20.3V87.1l66 15.9c-8.6 17.2-14 36.4-14 57 0 70.7 57.3 128 128 128s128-57.3 128-128c0-20.6-5.3-39.8-14-57l96.3-23.2c18.2-4.4 18.2-27.1 0-31.5l-190.4-46c-13-3.1-26.7-3.1-39.7 0L13.6 48.2c-18.1 4.4-18.1 27.2 0 31.6z"
class=""></path>
<!-- TODO: NUMBER OF PPL ON THE QUEUE-->
</svg><div id="queueLength"></div></p>
<p data-v-080604b5="" class="level-item"> The queue is open until 8:00 PM. </p>
</div>
</div>
<div data-v-080604b5="" class="buttons block">
<button data-v-080604b5="" class="button is-danger" onClick="deleteQueueHead()">
<span data-v-080604b5="" class="icon"><svg data-v-080604b5=""
aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eraser" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
class="svg-inline--fa fa-eraser fa-w-16">
<path data-v-080604b5="" fill="currentColor"
d="M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z"
class=""></path>
</svg></span><span data-v-080604b5="">Remove Top</span></button>
<button data-v-080604b5="" class="button is-primary" onClick="getQueue()">
<span data-v-080604b5="" class="icon"><svg data-v-080604b5=""
aria-hidden="true" focusable="false" data-prefix="fas" data-icon="calendar-alt" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-calendar-alt fa-w-14">
<path data-v-080604b5="" fill="currentColor"
d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
class=""></path>
</svg></span><span data-v-080604b5="">Refresh Queue</span></button>
</div>
<div data-v-080604b5="" class="block">
<h1 data-v-080604b5="" class="title">Sign Up</h1>
<div data-v-080604b5="">
<div class="field"><label class="label" for="adduniqname">Uniqname</label>
<div class="control has-icons-left">
<!--The below input element takes in the uniqname of a student.-->
<input type="text" class="input" id="adduniqname" required="required"
maxlength="30" placeholder="Nice to meet you!" ><span
class="icon is-small is-left"><svg aria-hidden="true" focusable="false"
data-prefix="fas" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" class="svg-inline--fa fa-link fa-w-16">
<path fill="currentColor"
d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"
class=""></path>
</svg></span></div>
</div>
<div class="field"><label class="label">Description</label>
<div class="control has-icons-left">
<!--The below input element takes in the description of a student's problem.-->
<input type="text"
placeholder="Help us help you - please be descriptive!" class="input">
<span
class="icon is-small is-left"><svg aria-hidden="true" focusable="false"
data-prefix="fas" data-icon="question" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512" class="svg-inline--fa fa-question fa-w-12">
<path fill="currentColor"
d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"
class=""></path>
</svg></span></div>
</div>
<div class="field"><label class="label" for="addlocation">Meeting Link</label>
<div class="control has-icons-left">
<!--The below input element takes in the meeting link of a student.-->
<input type="text" class="input" id="addlocation" required="required"><span
class="icon is-small is-left"><svg aria-hidden="true" focusable="false"
data-prefix="fas" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" class="svg-inline--fa fa-link fa-w-16">
<path fill="currentColor"
d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"
class=""></path>
</svg></span></div>
</div>
<div class="field">
<div class="control level-left">
<!--When clicked, this button triggers the putQueueTail() function to add this student to the queue.-->
<button class="button is-success level-item"
onClick="putQueueTail()"><span class="icon">
<svg aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="user-plus" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"
class="svg-inline--fa fa-user-plus fa-w-20">
<path fill="currentColor"
d="M624 208h-64v-64c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v64h-64c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h64v64c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-64h64c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm-400 48c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"
class=""></path>
</svg></span><span>Sign Up</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</section>
</div>
<script>
function getQueue () {
// Return queue data fetched from REST API.
fetch('/api/queue/')
.then((response) => {
if (!response.ok) handleBadResponse(response);
return response.json();
})
.then((data) => {
showQueue(data);
})
.catch(error => console.log(error));
}
function putQueueTail() {
const uniqname = document.getElementById('adduniqname').value;
const location = document.getElementById('addlocation').value;
// POST request to /api/queue/tail/
fetch('/api/queue/tail/', {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=utf-8',
},
body: JSON.stringify({uniqname, location}),
})
.then((response) => {
if (!response.ok) handleBadResponse(response);
return response.json();
})
.then((data) => {
getQueue();
})
.catch(error => console.log(error));
}
function deleteQueueHead() {
// DELETE request to /api/queue/head/
fetch('/api/queue/head/', {
method: 'DELETE',
})
.then((response) => {
if (!response.ok) handleBadResponse(response);
//return response.json();
})
.then((data) => {
getQueue();
})
.catch((error) => {
// NOTE: we get a bad request error because the backend returns
// a 204 response that contains Content-Type and Content-Length 0.
// Technically this is not allowed in HTTP.
getQueue();
console.log(error);
});
}
function showQueue(queueData) {
// Display JSON queue data in page's HTML
// Get a reference to the DOM node that we should modify and clear data
const entry = document.getElementById('queueEntry');
while (entry.firstChild) {
entry.removeChild(entry.firstChild);
}
// Get a reference to the queue length node that we should modify and clear data
const queueLengthEntry = document.getElementById('queueLength');
while (queueLengthEntry.firstChild) {
queueLengthEntry.removeChild(queueLengthEntry.firstChild);
}
// Empty queue
if (!queueData || !queueData['results']) {
// Update queue length to 0 if empty
const item = document.createElement('div');
item.innerHTML = `<strong data-v-080604b5="">0</strong>`
queueLengthEntry.append(item);
entry.innerHTML = "The queue is empty"
return;
}
// List the users on the queue
queueData['results'].forEach((i) => {
const queueItem = document.createElement('div');
queueItem.className = "block entries-group-item";
queueItem.innerHTML = `<div data-v-18039288="" data-v-080604b5="" class="box entry">
<article data-v-18039288="" class="media">
<div data-v-18039288="" class="media-content">
<div data-v-18039288="" class="content">
<div data-v-18039288="" class="level icon-row is-mobile">
<div data-v-18039288="" class="level-left"><svg data-v-18039288=""
aria-hidden="true" focusable="false" data-prefix="Sfas" data-icon="user"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="mr-2 level-item svg-inline--fa fa-user fa-w-14 fa-fw">
<path data-v-18039288="" fill="currentColor"
d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"
class=""></path>
</svg><span data-v-18039288="" class="level-item stay-in-container"><strong
data-v-18039288="">Student #${i.position}</strong></span></div>
</div><span data-v-18039288="">
<div data-v-18039288="" class="level icon-row is-mobile">
<div data-v-18039288="" class="level-left"><svg data-v-18039288=""
aria-hidden="true" focusable="false" data-prefix="fas" data-icon="at"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
class="mr-2 level-item svg-inline--fa fa-at fa-w-16 fa-fw">
<path data-v-18039288="" fill="currentColor"
d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"
class=""></path>
</svg><span data-v-18039288=""
class="level-item stay-in-container">${i.uniqname}@umich.edu</span></div>
</div>
<div data-v-18039288="" class="level icon-row is-mobile">
<div data-v-18039288="" class="level-left"><svg data-v-18039288=""
aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
class="mr-2 level-item svg-inline--fa fa-link fa-w-16 fa-fw">
<path data-v-18039288="" fill="currentColor"
d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"
class=""></path>
</svg>
<p data-v-18039288="" class="level-item link-in-container"><a
href="${i.location}" class="linkified"
target="_blank">${i.location}</a></p>
</div>
</div>
<div data-v-18039288="" class="level icon-row is-mobile">
<div data-v-18039288="" class="level-left"><svg data-v-18039288=""
aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
class="mr-2 level-item svg-inline--fa fa-link fa-w-16 fa-fw">
<path d="m448 106.839844h-64.8125l21.398438-79.808594c3.050781-11.371094-3.691407-23.082031-15.082032-26.132812-11.390625-3.050782-23.105468 3.710937-26.132812 15.082031l-24.339844 90.859375h-151.511719l21.398438-79.808594c3.050781-11.371094-3.691407-23.082031-15.082031-26.132812-11.394532-3.027344-23.082032 3.710937-26.113282 15.082031l-24.363281 90.859375h-79.359375c-11.777344 0-21.332031 9.535156-21.332031 21.332031 0 11.800781 9.554687 21.335937 21.332031 21.335937h67.902344l-34.324219 128h-76.246094c-11.773437 0-21.332031 9.535157-21.332031 21.332032s9.558594 21.332031 21.332031 21.332031h64.8125l-21.398437 79.808594c-3.050782 11.371093 3.691406 23.082031 15.082031 26.132812 1.835937.492188 3.691406.726563 5.503906.726563 9.410157 0 18.050781-6.273438 20.589844-15.808594l24.382813-90.859375h151.507812l-21.398438 79.808594c-3.046874 11.371093 3.691407 23.082031 15.085938 26.132812 1.832031.492188 3.6875.726563 5.523438.726563 9.410156 0 18.046874-6.273438 20.585937-15.808594l24.363281-90.859375h79.359375c11.777344 0 21.335938-9.535156 21.335938-21.332031s-9.558594-21.332032-21.335938-21.332032h-67.902343l34.324218-128h76.246094c11.777344 0 21.332031-9.535156 21.332031-21.335937 0-11.796875-9.554687-21.332031-21.332031-21.332031zm-154.753906 170.667968h-151.507813l34.324219-128h151.511719zm0 0"></path>
</svg>
<p data-v-18039288="" class="level-item stay-in-container">${i.position}</p>
</div>
</div>
</span>
<!---->
</div>
</div>
</article>
</div>`
entry.appendChild(queueItem);
});
// The following code updates the number in the top right describing how long the queue is.
const item = document.createElement('div');
item.innerHTML = `<strong data-v-080604b5="">${queueData['results'].length}</strong>`
queueLengthEntry.append(item);
}
function handleBadResponse(response) {
if (response.status === 400 && response.statusText === "Bad Request") {
$("#errorDialog").modal("show");
}
throw Error(response.statusText);
}
// Initial UI update
getQueue();
</script>
<div id="errorDialog" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Bad Request</h4>
</div>
<div class="modal-body" style="text-align: center">
<p>Your REST API responded with 400 Bad Request!</p>
</div>
</div>
</div>
</div>
</body>
</html>