Attendee Check-In

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Attendee Check-In</title> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="HandheldFriendly" content="True"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" > <meta http-equiv="cleartype" content="on"> <style type="text/css"> .clear { clear: both; } body { margin: 0; position: relative; font-family: helvetica, arial, sans-serif; } #page-content { margin: 0; font-size: 16px; min-height: 400px; } #page-content header { padding: 0.7em 0; text-align: center; font: 16px/16px Arial, sans-serif; font-weight: bold; color: #ffffff; text-shadow: 0.04em 0.04em #707070; background: -moz-linear-gradient(top,#c75300 0%,#b33f00 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#c75300),color-stop(100%,#b33f00)); background: -webkit-linear-gradient(top,#c75300 0%,#b33f00 100%); background: -o-linear-gradient(top,#c75300 0%,#b33f00 100%); background: -ms-linear-gradient(top,#c75300 0%,#b33f00 100%); background: linear-gradient(to bottom,#c75300 0%,#b33f00 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@gradient-top', endColorstr='@gradient-bottom',GradientType=0 ); } #page-content header .main-menu-button { float: left; width: 60px; position: relative; height: 30px; } #page-content header .icon-checkin { position: absolute; top: -8px; left: 20px; width: 30px; cursor: pointer; font-size: 32px; } #page-content header span { display: inline-block; } #page-content .search-box { position: relative; border-bottom: 1px solid #ccc; background: #f2f2f2; } #page-content .search-box .search-elements { position: relative; height: 30px; padding: 5px 55px 5px 20px; } #page-content .search-box .search-elements input[type="text"] { height: 31px; width: 100%; padding: 5px 5px 5px 30px; border: 1px solid #ccc; border-right: none; box-shadow: inset 1px 1px 1px 0px #dddddd; font-size: 16px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #page-content .search-box .search-elements .search-button { position: absolute; right: 20px; top: 5px; width: 35px; height: 31px; background: #c75300; cursor: pointer; color: #fff; font-size: 20px; text-align: center; line-height: 31px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } #page-content .search-box .search-elements .search-button:active { background: #b35300; } #page-content .search-box .search-elements .icon-calendar, #page-content .search-box .search-elements .icon-user { position: absolute; top: 12px; left: 30px; color: #9F9F9F; } #page-content .attendees-search-box .search-elements { margin-right: 55px; } #page-content .attendees-search-box .register-attendee-button { position: absolute; right: -40px; top: 5px; width: 35px; height: 31px; background: #006599; cursor: pointer; color: #fff; font-size: 22px; text-align: center; line-height: 31px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #page-content .attendees-search-box .register-attendee-button:active { background: #b35300; } #page-content .title-box { padding: 10px 20px; border: 1px solid #fff; background: #c75300; color: #fff; font-weight: bold; font-size: 16px; position: relative; text-align: left; line-height: 30px; } #page-content .title-box .title-button { display: inline-block; width: 20px; position: relative; margin: 0 20px 0 0; } #page-content .title-box .title-button .icon-arrow-left, #page-content .title-box .title-button .icon-cancel-circle { position: absolute; left: 0; top: -18px; } #page-content .title-box .title-button .icon-arrow-left { cursor: pointer; font-size: 14px; color: #c75300; background: #fff; border: 1px solid #c75300; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; padding: 5px; margin-right: 20px; } #page-content .title-box .title-button .icon-cancel-circle { cursor: pointer; font-size: 24px; color: #fff; padding: 5px; margin-right: 20px; top: -23px; } #page-content .page-body { width: 100%; text-align: center; color: #333; } #page-content .page-body ul { list-style: none; margin: 0; padding: 0; text-align: left; } #page-content .page-body img.etouches-logo { margin: 20px 0; width: 203px; } #page-content .page-body p.help-text { margin: 0 20px; } #page-content .page-body .event-name { font-size: 25px; } #page-content .page-body .error-message { color: #f00; padding: 5px 20px; } #page-content .page-body .blue-button, #page-content .page-body .white-button { height: 30px; width: 100%; padding: 0 10px; display: block; line-height: 30px; border: none; font-size: 16px; font-weight: bold; text-shadow: none; color: #f7f7f7; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: -moz-linear-gradient(top,#09c 0%,#007BA5 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#09c),color-stop(100%,#007BA5)); background: -webkit-linear-gradient(top,#09c 0%,#007BA5 100%); background: -o-linear-gradient(top,#09c 0%,#007BA5 100%); background: -ms-linear-gradient(top,#09c 0%,#007BA5 100%); background: linear-gradient(to bottom,#09c 0%,#007BA5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@gradient-top', endColorstr='@gradient-bottom',GradientType=0 ); } #page-content .page-body .blue-button:hover, #page-content .page-body .white-button:hover { background: #069; color: #fff; cursor: pointer; } #page-content .page-body .blue-button:active, #page-content .page-body .white-button:active { position: relative; top: 1px; } #page-content .page-body .white-button { background: none; border: 1px solid #7E9FAE; color: #4381AA; } #page-content .page-body .white-button:hover { background: none; border-color: #069; color: #069; } #page-content .page-body input, #page-content .page-body textarea { width: 100%; padding: 5px; margin-bottom: 10px; border: 1px solid #ccc; box-shadow: inset 1px 1px 1px 0px #dddddd; font-size: 16px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #page-content .page-body form.login-from { margin: 20px; text-align: left; } #page-content .page-body form.login-from label { font-weight: bold; } #page-content .page-body ul.event-list { border-top: 1px solid #ccc; } #page-content .page-body ul.event-list li { position: relative; padding: 10px 0px 10px 20px; border-bottom: 1px solid #ccc; cursor: pointer; color: #c75300; } #page-content .page-body ul.event-list li .icon { font-size: 22px; padding-right: 20px; } #page-content .page-body ul.event-list li .icon-folder { color: #D8B012; } #page-content .page-body ul.event-list li .icon-calendar { color: #006696; } #page-content .page-body ul.event-list li .icon-arrow-right { color: #C6C6C6; font-size: 16px; float: right; padding-top: 5px; } #page-content .page-body ul.event-list li .event-id-label { display: block; color: #6A6A6A; font-size: 14px; margin-left: 45px; } #page-content .page-body ul.event-list li.event { background: #F5F5F5; } #page-content .page-body ul.event-list li.event-item .event-item-name { width: 35%; display: inline-block; } #page-content .page-body ul.event-list li.event-item .event-item-extra-info { border-top: 1px solid #c6c6c6; margin-left: 45px; margin-top: 7px; margin-right: 30px; padding-top: 5px; color: #000; font-size: 14px; } #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part { display: inline-block; padding-right: 2px; } #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part + :not(:empty) { border-left: 1px solid #c6c6c6; padding-left: 5px; } #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part:empty + :not(:empty), #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part:first-child { border-left: none; padding-left: 0; } #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part:empty + :not(:empty):not(:empty) + :empty ~:not(:empty):last-child, #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part:first-child:not(:empty) + :empty ~:not(:empty):last-child { border-left: 1px solid #c6c6c6; padding-left: 5px; margin-left: -5px; } #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part:empty + :not(:empty) { margin-left: -5px; } #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part:empty + :not(:empty):last-child { margin-left: -10px; } #page-content .page-body ul.event-list li:hover { background: #e0e0e0; } #page-content .page-body ul.event-data li { padding: 10px 20px; } #page-content .page-body ul.event-data li b { padding-right: 10px; } #page-content .page-body ul.menu li, #page-content .page-body ul.logout-confirmation li { padding: 10px 20px; } #page-content .page-body ul.menu .logout-name, #page-content .page-body ul.logout-confirmation .logout-name { font-weight: normal; font-style: italic; } #page-content .page-body ul.attendees-list li { cursor: pointer; position: relative; border-bottom: 1px solid #ccc; padding: 10px 0; } #page-content .page-body ul.attendees-list li table { width: 100%; border-collapse: collapse; table-layout: fixed; } #page-content .page-body ul.attendees-list li table td { position: relative; padding: 0 10px; vertical-align: top; word-wrap: break-word; } #page-content .page-body ul.attendees-list li table tr.info td { padding-top: 0; } #page-content .page-body ul.attendees-list li .checked-icon { width: 40px; padding: 0; } #page-content .page-body ul.attendees-list li .checked-icon .icon-user, #page-content .page-body ul.attendees-list li .checked-icon .icon-blankperson, #page-content .page-body ul.attendees-list li .checked-icon .icon-dashedperson { font-size: 26px; color: #016798; width: 30px; margin-left: 10px; } #page-content .page-body ul.attendees-list li .name { color: #c75300; text-align: left; } #page-content .page-body ul.attendees-list li .name .company { width: 100%; max-width: 100%; text-align: left; color: #838383; } #page-content .page-body ul.attendees-list li .email { color: #787878; font-size: 14px; } #page-content .page-body ul.attendees-list li .buttons { margin: 10px 0 0 0; } #page-content .page-body ul.attendees-list li .buttons button { width: auto; display: inline-block; margin-right: 10px; } #page-content .page-body ul.attendees-list li .buttons button i { margin-right: 10px; } #page-content .page-body ul.attendees-list li .buttons button.white-button { height: 32px; } #page-content .page-body ul.attendees-list li .company { width: 100px; max-width: 100px; text-align: right; color: #838383; padding-right: 10px; } #page-content .page-body ul.attendees-list li .info { display: none; } #page-content .page-body ul.attendees-list li:hover { background: #e0e0e0; } #page-content .page-body .register-attendee-header { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #006599; padding: 10px 10px 10px 60px; margin: 20px; color: #FFFFFF; text-align: left; font-size: 16px; font-weight: bold; position: relative; } #page-content .page-body .register-attendee-header i { font-size: 24px; position: absolute; top: 9px; left: 20px; } #page-content .page-body ul.register-attendee { margin-bottom: 0; } #page-content .page-body ul.register-attendee li { padding: 5px 20px; } #page-content .page-body ul.register-attendee li label { font-weight: bold; color: #2D2D2D; display: block; margin-bottom: 5px; } #page-content .attendees-filter { border-top: 1px solid #CFCFCF; border-bottom: 2px solid #c75300; } #page-content .attendees-filter table { width: 100%; } #page-content .attendees-filter table tr { list-style: none; padding: 0; margin: 0; background: #D9D9D9; height: 41px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; } #page-content .attendees-filter table tr td { width: 33%; text-align: center; vertical-align: center; color: #6E6E6E; font-weight: bold; cursor: pointer; border-left: 2px solid #F9F9F9; } #page-content .attendees-filter table tr td div { padding: 10px 0; } #page-content .attendees-filter table tr td:first-child div { border-left: none; } #page-content .attendees-filter table tr td.active { background: #c75300; color: #fff; } #page-content .attendees-filter table.with-pre-load tr td { width: 25%; } #page-content .help-info { position: absolute; bottom: 0; width: 100%; padding: 0 20px 20px 20px; text-align: center; font-weight: bold; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #page-content .help-info.left { text-align: left; } #page-content .help-info.left a span:last-child { margin-left: 15px; } #page-content .help-info a { color: #09c; text-decoration: none; cursor: pointer; position: relative; } #page-content .help-info a span.icon-arrow-right, #page-content .help-info a span.icon-arrow-left { position: absolute; top: 4px; font-size: 12px; } #page-content .help-info a span.icon-arrow-right { right: -15px; } #page-content .checkin-location-name { float: right; margin-right: 15px; color: #aaaaaa; } @media only screen and (min-device-width: 767px) and (max-device-width: 1025px),only screen and (min-device-height: 767px) and (max-device-height: 1025px) and (orientation: landscape),only screen and (min-device-width: 383px) and (max-device-width: 513px) and (-webkit-device-pixel-ratio: 2),only screen and (min-device-width: 511px) and (max-device-width: 683px) and (-webkit-device-pixel-ratio: 1.5) { #page-content .page-body .blue-button, #page-content .page-body .white-button { margin: 0 auto; } #page-content .page-body form.login-from, #page-content .page-body .logout-confirmation, #page-content .page-body .menu { margin: 20px auto; width: 30%; min-width: 250px; } #page-content .page-body .event-data .blue-button, #page-content .page-body .event-data .white-button { width: 30%; min-width: 250px; } #page-content .page-body .menu { margin: 20px auto; width: 30%; min-width: 250px; } #page-content .page-body ul.event-list li.event-item .event-item-extra-info { border-top: none; width: 50%; margin-left: 0; margin-top: 0; margin-right: 0; padding-top: 0; font-size: 16px; display: inline-block; } #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part { width: 30%; } #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part + :not(:empty) { border-left: none; padding-left: 0; } #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part:empty + :not(:empty), #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part:empty + :not(:empty):last-child, #page-content .page-body ul.event-list li.event-item .event-item-extra-info .event-item-part:first-child:not(:empty) + :empty ~:not(:empty):last-child { margin-left: 0; padding-left: 0; border-left: none; } #page-content .page-body ul.register-attendee { margin: 0 auto; width: 50%; } #page-content .page-body ul.register-attendee li { padding: 5px 0; } #page-content .page-body ul.register-attendee li.register-button { width: 60%; min-width: 170px; margin: 0 auto; } } </style> <link href="/application/themes/mobile-attendee/creator-icons.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="page-content"> </div> <script type="text/html" id="page-template"> <header> <div class="main-menu-button" data-bind="visible: showMenuButton"> <i class="icon-checkin" data-bind="click: onMainMenuClick"></i> </div> <span data-bind="text : headerText">Attendee Check-In</span> <span class="checkin-location-name" data-bind="text: checkinLocation"></span> </header> <div class="page-body"> <img class="etouches-logo" data-bind="visible: logoUrl, attr: { src: logoUrl }"> <p class="error-message" data-bind="visible : errorMessage, text:errorMessage"></p> <div class="search-box" data-bind="visible: showSearchPanel, css : customButtonsClass"> <div class="search-elements"> <i data-bind="visible: searchIcon, css : searchIcon"></i> <input type="text" data-bind="value: searchText, attr : { placeholder : searchPlaceholder }"/> <div class="search-button"> <i class="icon-search" data-bind="click: onSearchButtonClick"></i> </div> <div class="custom-buttons register-attendee-button" data-bind="visible: showCustomButtons"> <i class="icon-user-plus" data-bind="click: onRegisterAttendeeClick"></i> </div> </div> </div> <div class="title-box" data-bind="visible: showTitleBox"> <span class="title-button" data-bind="visible: titleButtonIcon"> <i data-bind="css: titleButtonIcon, click: onTitleBoxButtonClick"></i> </span> <i class="title-icon" data-bind="click: onTitleBoxButtonClick, visible: titleIcon, css: titleIcon"></i> <span class="title-text" data-bind="text: titleText"></span> </div> <div id="content"></div> </div> </script> <script type="text/html" id="login-page-template"> <form class="login-from" data-bind="submit: login"> <label>Username</label><br> <input type="text" class="email" data-bind="value: username"><br> <label>Password</label><br> <input type="password" class="password" data-bind="value: password"><br> <input class="blue-button" type="submit" value="Login"> </form> <div class="help-info"> <a data-bind="click: goToResetPasswordPage">Can't access your account? </a> </div> </script> <script type="text/html" id="login-by-link-page-template"> <p class="help-text event-name" data-bind="text: eventName"></p> <form class="login-from" data-bind="submit: login"> <label data-bind="visible: showPasswordField">Password</label><br> <input type="password" class="password" data-bind="visible: showPasswordField, value: password"><br> <input class="blue-button" type="submit" value="Login"> </form> </script> <script type="text/html" id="reset-password-page-template"> <p class="help-text">Enter your user name below and we will send you a password reset email.</p> <form class="login-from" data-bind="submit: send"> <label>User name:</label><br> <input type="text" class="email" data-bind="value: username"><br> <label>Captcha</label><br> <span style="display: block;height: 50px;"> <img id="refresh_captcha" src="/mobileadmin/loginAPI/generateCaptcha" style="width: 270px;display: inline-block;" /> <span><img src="../images/refresh.png" width="30" onclick="loadCaptcha()"></span> </span> <span style="display: block;"> <input id="captcha" type="text" data-bind="value: captcha" autocomplete="off" size="40" placeholder="Captcha"> </span> <input class="blue-button" type="submit" value="Send Password"> </form> <div class="help-info left"> <a data-bind="click: goToLoginPage"> <span class="icon-arrow-left"></span> <span>Login</span> </a> </div> </script> <script type="text/html" id="events-page-template"> <ul class="event-list" data-bind="foreach: events, visible: events"> <li class="event-item" data-bind="click: $parent.select, css : type"> <i class="icon" data-bind="css: cssClass"></i> <i class="icon icon-arrow-right"></i> <span class="event-item-name" data-bind="text: name"></span> <div class="event-item-extra-info" data-bind="visible: (startDate || location || programManager)"> <span class="event-item-part" data-bind="text: startDate"></span> <span class="event-item-part" data-bind="text: location"></span> <span class="event-item-part" data-bind="text: programManager"></span> </div> <span class="event-id-label" data-bind="visible: showId"> <b>event ID:</b> <span data-bind="text: id, visible: showId"></span> </span> </li> </ul> </script> <script type="text/html" id="event-page-template"> <ul class="event-data"> <li data-bind="with: eventData"> <b>event ID:</b><span data-bind="text: eventId"></span> </li> <li data-bind="with: eventData"> <b>start date:</b><span data-bind="text: startDate"></span> </li> <li data-bind="with: eventData"> <b>end date:</b><span data-bind="text: endDate"></span> </li> <li data-bind="with: eventData"> <b>event status:</b><span data-bind="text: status"></span> </li> <li data-bind="with: eventData, visible: showCheckinLocations || 0"> <b>Check-in Location:<b> <select id="checkin-location" data-bind="html: checkinLocations"> </select> </li> <li> <button class="blue-button" data-bind="click: startCheckingButtonClick">start checking attendees in</button> </li> <li data-bind="ifnot: isLoggedInByLink"> <button class="white-button" data-bind="click: onCloseButtonClick">close</button> </li> </ul> </script> <script type="text/html" id="menu-page-template"> <ul class="menu" data-bind="ifnot: showLogoutConfirmation"> <li data-bind="visible: showGoToEventsPageButton"> <button class="blue-button" data-bind="click: goToEventsPage">go to event browser</button> </li> <li> <button class="blue-button" data-bind="click: showLogoutConfirmationDialog">log out <span class="logout-name" data-bind="text: userName"></span></button> </li> <li> <button class="white-button" data-bind="click: cancel">cancel</button> </li> </ul> <ul class="logout-confirmation" data-bind="visible: showLogoutConfirmation"> <li> <p>Do you want to log out?</p> </li> <li> <button class="blue-button" data-bind="click: logout">Yes</button> </li> <li> <button class="white-button" data-bind="click: cancelLogout">No</button> </li> </ul> </script> <script type="text/html" id="attendees-page-template"> <div class="attendees-filter" data-bind="visible: showAttendeesFilter"> <table data-bind="css : { 'with-pre-load' : showPreLoadAttendees }"> <tr data-bind="foreach: filters"> <td data-bind="click: $parent.changeFilter, css : { active : id == $parent.filterType() }"> <span data-bind="text: name"></span> (<span data-bind="text: total"></span>) </td> </tr> </table> </div> <ul class="attendees-list" data-bind="foreach: attendees"> <li data-bind="click: $parent.select"> <table> <tbody> <tr> <td class="checked-icon"> <div data-bind="css : { 'icon-user' : isCheckedIn == true, 'icon-blankperson' : isCheckedIn == false, 'icon-dashedperson' : isCheckedIn == null }"></div> </td> <td class="name"> <span data-bind="text: lastName"></span>, <span data-bind="text: firstName"></span> <div class="company" data-bind="text: company"></div> <div class="info"> <div class="email" data-bind="text: email"></div> </div> </td> </tr> <tr class="info"> <td></td> <td> <div class="buttons"> <button class="blue-button check-in" data-bind="visible : isCheckedIn == false, click : $parent.checkInAttendee">Check-In</button> <button class="blue-button checked-in" data-bind="visible : isCheckedIn == true, click : $parent.unCheckAttendee"><i class="icon-checkmark"></i>Checked-In</button> <button class="blue-button register" data-bind="visible : isCheckedIn == null, click : $parent.registerPreLoadAttendee"><i class="icon-user-plus"></i>Register</button> <button class="white-button" data-bind="click: $parent.cancel">Cancel</button> <button class="blue-button no-show" data-bind="visible : noShow == false, click : $parent.noShowAttendee"> Mark as No Show </button> <button class="blue-button no-showed" data-bind="visible : noShow == true, click : $parent.undoNoShowAttendee"> <i class="icon-checkmark"></i>No Show </button> </div> </td> </tr> </tbody> </table> </li> </ul> </script> <script type="text/html" id="register-attendee-page-template"> <div class="register-attendee-header"> <i class="icon-user-plus "></i> Register new attendee </div> <ul class="register-attendee register-attendee-fields" data-bind="foreach: formFields"> <li> <label data-bind="text: name"></label> <input type="text" name="" data-bind="attr: { name: key, value: value }"> </li> </ul> <ul class="register-attendee register-attendee-buttons"> <li> <label for="notes">Notes</label> <textarea id="notes" data-bind="value: notes"></textarea> </li> <li class="register-button"> <input type="submit" class="blue-button" data-bind="click: register" value="register and check-in"> </li> <li class="register-button"> <button class="white-button" data-bind="click: cancel">cancel</button> </li> </ul> </script> <div id="overlay" style="display: none;"></div> <div id="alertWindow" style="display: none;"> <div id="alertText"></div> <div id="alertBtn"></div> </div> <script type="text/javascript" src="https://staticcdn.eventscloud.com/libs/js/jquery/3.6.4/jquery-3.6.4.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-3.4.0.js"></script> <script type="text/javascript" src="https://staticcdn.eventscloud.com/libs/js/knockout-3.5.1.js"></script>  <script type="text/javascript"> var _csrf = "d937d46de3c5252a644be2fe14e290fdcbf8057856fee62e5ff72a340437", _isLoggedIn = "", _isLoggedInByLink = "", _loginCode = "", _showPreLoadApplicants = "0", _eventData = null, _defaultLogoUrl = "/application/themes/mobile-attendee/img/logo.png", _logoUrl = (_eventData && _eventData.eventLogo) ? _eventData.eventLogo : _defaultLogoUrl, _errorMessage = "", _loggedUserName = "", _passwordRequired = "1"; var checkinLocation; function loadCaptcha() { document.getElementById('refresh_captcha').src = "/mobileadmin/loginAPI/generateCaptcha?t=" + new Date().getTime(); document.getElementById('captcha').value=""; } $(function () { var pageViewModel = new PageViewModel(); ko.renderTemplate($('#page-template').attr('id'), pageViewModel, { templateEngine: ko.nativeTemplateEngine.instance }, $('#page-content')[0]); if (_errorMessage) { pageViewModel.hideAllPageElements(); pageViewModel.logoUrl(_logoUrl); pageViewModel.errorMessage(_errorMessage); return false; } if (_isLoggedIn && _loginCode.length == 0) { var eventsViewModel = new EventsListViewModel(); pageViewModel.render(eventsViewModel, $('#events-page-template')); eventsViewModel.loadEventsList(0); } else if (_isLoggedIn && _loginCode.length != 0) { var eventViewModel = new EventViewModel(); pageViewModel.render(eventViewModel, $('#event-page-template')); eventViewModel.loadEventData(_eventData.eventId); } else if (_loginCode.length != 0) { var loginByLinkViewModel = new LoginByLinkViewModel(); loginByLinkViewModel.eventName(_eventData.eventName); loginByLinkViewModel.eventLogo(_logoUrl); pageViewModel.showMenuButton(false); pageViewModel.render(loginByLinkViewModel, $('#login-by-link-page-template')); } else { var loginViewModel = new LoginViewModel(); pageViewModel.showMenuButton(false); pageViewModel.render(loginViewModel, $('#login-page-template')); } }); /*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this); var PageViewModel = function() { var self = this; self.errorMessage = ko.observable(null); self.logoUrl = ko.observable(null); self.headerText = ko.observable(null); self.checkinLocation = ko.observable(null); self.showMenuButton = ko.observable(true); self.showSearchPanel = ko.observable(false); self.searchIcon = ko.observable(null); self.searchPlaceholder = ko.observable(null); self.searchText = ko.observable(null); self.showCustomButtons = ko.observable(false); self.customButtonsClass = ko.observable(null); self.showTitleBox = ko.observable(null); self.titleText = ko.observable(null); self.titleButtonIcon = ko.observable(false); self.titleIcon = ko.observable(false); self.model = null; self.template = null; self.onSearchButtonClickCallback = function() { return false; }; self.onTitleBoxButtonClickCallback = function() { return false; }; self.onRegisterAttendeeClickCallback = function() { return false; }; self.hideAllPageElements = function() { self.errorMessage(false); self.logoUrl(false); self.searchText(null); self.showSearchPanel(false); self.showCustomButtons(false); self.customButtonsClass(null); $('.attendees-search-box').removeClass('attendees-search-box'); self.showTitleBox(false); self.titleText(null); self.titleButtonIcon(null); self.titleIcon(null); self.headerText('Attendee Check-In'); self.onTitleBoxButtonClickCallback = function() { return false; }; self.onSearchButtonClickCallback = function() { return false; }; self.onRegisterAttendeeClickCallback = function() { return false; }; }; self.onMainMenuClick = function() { var menuViewModel = new MenuViewModel(); menuViewModel.previousModel = self.model; menuViewModel.previousTemplate = self.template; menuViewModel.userName(_loggedUserName); if (_isLoggedInByLink) { menuViewModel.showGoToEventsPageButton(false); } self.render(menuViewModel, $('#menu-page-template')); }; self.onTitleBoxButtonClick = function() { return self.onTitleBoxButtonClickCallback(); }; self.onSearchButtonClick = function() { var searchText = self.searchText(); if (!searchText) { self.showNotificationMessage('You must enter some text to search'); return false; } return self.onSearchButtonClickCallback(); }; self.onRegisterAttendeeClick = function() { return self.onRegisterAttendeeClickCallback(); }; self.render = function(model, template) { self.model = model; self.model.isLoggedInByLink = +_isLoggedInByLink; self.template = template; self.model.init(self); self.renderContent(model, template); }; self.renderContent = function(model, template) { ko.renderTemplate(template.attr('id'), model, { templateEngine: ko.nativeTemplateEngine.instance }, $('#content')[0]); }; self.startApiCall = function(url, params, callback) { $.post( url, { csrf: _csrf, params : ko.toJSON(params) }, function(response) { if (response.error) { self.showNotificationMessage(response.error); } else { callback(response); } }, 'json' ); }; self.showNotificationMessage = function(message) { alert(message); }; }; var MenuViewModel = function () { var self = this; self.pageModel; self.previousModel; self.previousTemplate; self.userName = ko.observable(null); self.showLogoutConfirmation = ko.observable(false); self.showGoToEventsPageButton = ko.observable(true); self.init = function(pageModel) { self.pageModel = pageModel; pageModel.hideAllPageElements(); pageModel.logoUrl(_logoUrl); }; self.goToEventsPage = function() { var eventsViewModel = new EventsListViewModel(); self.pageModel.render(eventsViewModel, $('#events-page-template')); eventsViewModel.loadEventsList(0); }; self.showLogoutConfirmationDialog = function() { self.showLogoutConfirmation(true); }; self.logout = function() { self.pageModel.startApiCall( '/mobileadmin/loginAPI/logout', {}, function(response) { _isLoggedIn = false; if (_isLoggedInByLink) { _isLoggedInByLink = false; var loginByLinkViewModel = new LoginByLinkViewModel(); loginByLinkViewModel.eventName(_eventData.eventName); loginByLinkViewModel.eventLogo(_logoUrl); self.pageModel.render(loginByLinkViewModel, $('#login-by-link-page-template')); self.pageModel.showMenuButton(false); } else { var loginViewModel = new LoginViewModel(); self.pageModel.render(loginViewModel, $('#login-page-template')); } } ); }; self.cancelLogout = function() { self.showLogoutConfirmation(false); }; self.cancel = function() { self.pageModel.render(self.previousModel, self.previousTemplate, false); }; }; var LoginViewModel = function () { var self = this; self.pageModel; self.username = ko.observable(null); self.password = ko.observable(null); self.init = function(pageModel) { self.pageModel = pageModel; self.pageModel.hideAllPageElements(); self.pageModel.showMenuButton(false); self.pageModel.logoUrl(_logoUrl); }; self.goToEventsPage = function () { var eventsViewModel = new EventsListViewModel(); self.pageModel.render(eventsViewModel, $('#events-page-template')); eventsViewModel.loadEventsList(0); }; self.login = function () { if (self.username() && self.password()) { self.username(self.username().toLowerCase()); self.pageModel.startApiCall( '/mobileadmin/loginAPI/login', { username: self.username(), password: self.password() }, function(response) { _isLoggedIn = true; _loggedUserName = response.loggedUserName; self.goToEventsPage(); self.pageModel.showMenuButton(true); } ); } else { self.pageModel.showNotificationMessage('You must specify all fields'); } }; self.goToResetPasswordPage = function () { self.pageModel.render(new ResetPasswordViewModel(), $('#reset-password-page-template')); }; }; var ResetPasswordViewModel = function () { var self = this; self.pageModel; self.username = ko.observable(null); self.captcha = ko.observable(null); self.logoUrl = ko.observable(_logoUrl); self.init = function(pageModel) { self.pageModel = pageModel; self.pageModel.hideAllPageElements(); self.pageModel.logoUrl(_logoUrl); } self.send = function () { if (self.username() && self.captcha()) { self.username(self.username()); self.captcha(self.captcha()); self.pageModel.startApiCall( '/mobileadmin/loginAPI/sendResetPasswordEmail', { username: self.username(), captcha: self.captcha(), }, function(response) { self.pageModel.showNotificationMessage('If that username exists you have been emailed your password.'); self.goToLoginPage(); } ); } else { self.pageModel.showNotificationMessage('You must specify all the fields'); } }; self.goToLoginPage = function () { var loginViewModel = new LoginViewModel(); self.pageModel.render(loginViewModel, $('#login-page-template')); }; }; var LoginByLinkViewModel = function () { var self = this; self.pageModel; self.password = ko.observable(null); self.eventLogo = ko.observable(null); self.eventName = ko.observable(null); self.init = function (pageModel) { self.pageModel = pageModel; self.pageModel.hideAllPageElements(); self.pageModel.logoUrl(_logoUrl); }; self.showPasswordField =_passwordRequired ; self.login = function () { if (self.showPasswordField && !self.password()) { self.pageModel.showNotificationMessage('You must specify password'); } else { self.pageModel.startApiCall( '/mobileadmin/loginAPI/loginByLink', { code: _loginCode, password: self.password() }, function(response) { self.pageModel.showMenuButton(true); _isLoggedIn = true; _isLoggedInByLink = true; self.goToEventPage(_eventData.eventId); } ); } }; self.goToEventPage = function(eventId) { var eventViewModel = new EventViewModel(); self.pageModel.render(eventViewModel, $('#event-page-template')); eventViewModel.loadEventData(eventId); }; }; var EventsListViewModel = function () { var self = this; self.pageModel; self.currentFolderName; self.events = ko.observableArray(null); self.eventId = ko.observable(null); self.titleText = ko.observable(null); self.backFolderId = ko.observable(null); self.eventData = ko.observable(null); self.searchText = ko.observable(null); self.titleIcon = ko.observable(null); self.init = function (pageModel) { self.pageModel = pageModel; pageModel.hideAllPageElements(); pageModel.showSearchPanel(true); pageModel.searchPlaceholder('search events by name or #'); pageModel.searchIcon('icon-calendar'); pageModel.showTitleBox(true); if (self.currentFolderName) { pageModel.titleText(self.currentFolderName); } pageModel.onTitleBoxButtonClickCallback = function() { self.pageModel.searchText(null); self.loadEventsList(self.backFolderId()); }; pageModel.onSearchButtonClickCallback = function() { self.backFolderId(0); self.searchText(self.pageModel.searchText()); self.pageModel.startApiCall( '/mobileadmin/eventAPI/searchEvents', { searchText: self.pageModel.searchText() }, function(response) { self.events(response.eventsList); self.pageModel.titleText('Results for: ' + self.pageModel.searchText()); self.pageModel.titleIcon('icon-search'); self.pageModel.titleButtonIcon('icon-cancel-circle'); } ); }; }; self.loadEventsList = function(parentFolderId) { self.pageModel.startApiCall( '/mobileadmin/eventAPI/loadEventsList', { parentFolderId: parentFolderId }, function(response) { self.events(response.eventsList); self.backFolderId(response.backFolderId); if (parentFolderId == 0) { self.pageModel.titleButtonIcon(false); self.pageModel.titleIcon(false); self.pageModel.titleText('My events and folders:'); } else { self.pageModel.titleButtonIcon('icon-arrow-left'); self.pageModel.titleIcon('icon-folder'); self.pageModel.titleText(response.currentFolderName); self.currentFolderName = response.currentFolderName; } } ); }; self.select = function (item) { if (item.type == 'folder') { self.loadEventsList(item.id); } else { var eventViewModel = new EventViewModel(); self.pageModel.render(eventViewModel, $('#event-page-template')); eventViewModel.loadEventData(item.id); } }; self.close = function(item, e) { self.searchText(null); self.titleText(null); self.titleIcon(null); self.loadEventsList(self.backFolderId()); e.preventDefault(); }; }; var EventViewModel = function () { var self = this; self.pageModel; self.eventData = ko.observable(null); self.showCheckinLocations = ko.observable(null); self.init = function (pageModel) { self.pageModel = pageModel; pageModel.hideAllPageElements(); if (!_isLoggedInByLink) { pageModel.showSearchPanel(true); pageModel.searchPlaceholder('search events by name or #'); pageModel.searchIcon('icon-calendar'); pageModel.showTitleBox(true); } else { pageModel.headerText(_eventData.eventName); pageModel.logoUrl(_logoUrl); } pageModel.onTitleBoxButtonClickCallback = function() { self.onCloseButtonClick(); }; pageModel.onSearchButtonClickCallback = function() { var searchText = self.pageModel.searchText(); var eventsViewModel = new EventsListViewModel(); self.pageModel.render(eventsViewModel, $('#events-page-template')); eventsViewModel.backFolderId(0); eventsViewModel.searchText(searchText); self.pageModel.startApiCall( '/mobileadmin/eventAPI/searchEvents', { searchText: searchText }, function(response) { eventsViewModel.events(response.eventsList); eventsViewModel.pageModel.titleText('Results for: ' + searchText); eventsViewModel.pageModel.titleIcon('icon-search'); eventsViewModel.pageModel.titleButtonIcon('icon-cancel-circle'); } ); }; }; self.loadEventData = function(eventId) { self.pageModel.startApiCall( '/mobileadmin/eventAPI/loadEventData', { eventId: eventId }, function(response) { self.eventData(response.eventData); self.pageModel.titleText(response.eventData.eventName); self.pageModel.titleIcon('icon-calendar'); self.pageModel.titleButtonIcon('icon-arrow-left'); self.showCheckinLocations(response.eventData.checkinLocations && response.eventData.checkinLocations.length > 0); self.pageModel.searchText(null); } ); }; self.onCloseButtonClick = function() { eventsListModel = new EventsListViewModel(); self.pageModel.render(eventsListModel, $('#events-page-template')); eventsListModel.loadEventsList(self.eventData().folderId); }; self.startCheckingButtonClick = function(item, e) { checkinLocation = $('#checkin-location:visible'); var attendeesViewModel = new AttendeesViewModel(); attendeesViewModel.checkinLocationsEnabled = checkinLocation.length > 0; if (attendeesViewModel.checkinLocationsEnabled) { attendeesViewModel.currentCheckinLocation = checkinLocation.val(); attendeesViewModel.currentCheclinLocationName = checkinLocation.find('option:selected').html(); if (!attendeesViewModel.currentCheckinLocation) { alert('Please select Check-in Location'); return; } } attendeesViewModel.eventData = item.eventData(); self.pageModel.render(attendeesViewModel, $('#attendees-page-template')); attendeesViewModel.loadAttendeesList(); }; }; var AttendeesViewModel = function () { var self = this; self.pageModel; self.eventData; self.attendees = ko.observableArray(null); self.filterType = ko.observable(1); self.showPreLoadAttendees = ko.observable(null); self.showAttendeesFilter = ko.observable(true); self.filters = ko.observableArray([ { id : 1, name: 'All Attendees', total: ko.observable(0) }, { id : 2, name: 'Not Checked In', total: ko.observable(0) }, { id : 3, name: 'Checked In', total: ko.observable(0) } ]); self.init = function (pageModel) { self.pageModel = pageModel; if ((_isLoggedInByLink && _showPreLoadApplicants) || self.eventData.isAllowedPreLoad) { self.filters.push( { id : 4, name: 'Pre-loaded', total: ko.observable(0) } ); self.showPreLoadAttendees(true); } pageModel.hideAllPageElements(); pageModel.showSearchPanel(true); pageModel.showCustomButtons(true); pageModel.customButtonsClass('attendees-search-box'); pageModel.searchPlaceholder('search attendees'); pageModel.searchIcon('icon-user'); pageModel.headerText(self.eventData.eventName); if (self.currentCheckinLocation) { pageModel.checkinLocation('Check-in Location: ' + self.currentCheclinLocationName); } else { pageModel.checkinLocation(''); } self.filterType = ko.observable(1); pageModel.onSearchButtonClickCallback = function() { self.pageModel.showTitleBox(true); self.showAttendeesFilter(false); self.pageModel.onTitleBoxButtonClickCallback = function() { self.pageModel.showTitleBox(false); self.showAttendeesFilter(true); self.pageModel.searchText(null); self.loadAttendeesList(); }; self.pageModel.startApiCall( '/mobileadmin/attendeeAPI/searchAttendees', { eventId : self.eventData.eventId, searchText: self.pageModel.searchText(), filterType: self.filterType() }, function(response) { self.attendees(response.attendeesList); self.pageModel.titleText('Results for: ' + self.pageModel.searchText()); self.pageModel.titleIcon('icon-search'); self.pageModel.titleButtonIcon('icon-cancel-circle'); } ); }; pageModel.onRegisterAttendeeClickCallback = function() { var registerAttendeeViewModel = new RegisterAttendeeViewModel(); registerAttendeeViewModel.eventData = self.eventData; self.pageModel.render(registerAttendeeViewModel, $('#register-attendee-page-template')); }; }; self.changeFilter = function(item) { self.filterType(item.id); self.loadAttendeesList(); }; self.loadAttendeesList = function() { self.pageModel.startApiCall( '/mobileadmin/attendeeAPI/loadAttendeesList', { eventId: self.eventData.eventId, filterType: self.filterType() }, function(response) { self.attendees(response.attendeesList); ko.utils.arrayMap(self.filters(), function(filter) { if (response.totalAttendeesList[filter.id] != undefined) { filter.total(response.totalAttendeesList[filter.id]); } }); } ); }; self.checkInAttendee = function(item, e) { self.pageModel.startApiCall( '/mobileadmin/attendeeAPI/checkInAttendee', { attendeeId: item.attendeeId, locationId: self.checkinLocationsEnabled ? self.currentCheckinLocation : 0 }, function(response) { var filters = self.filters(), checkInButton = $(e.currentTarget); filters[1].total(parseInt(filters[1].total()) - 1); filters[2].total(parseInt(filters[2].total()) + 1); item.isCheckedIn = true; checkInButton.closest('li').find('.checked-in').show(); checkInButton.hide(); checkInButton.closest('li').find('.icon-blankperson').removeClass('icon-blankperson').addClass('icon-user'); } ); }; self.unCheckAttendee = function(item, e) { self.pageModel.startApiCall( '/mobileadmin/attendeeAPI/checkInAttendee', { attendeeId: item.attendeeId, uncheck: true }, function(response) { var filters = self.filters(), checkInButton = $(e.currentTarget); filters[1].total(parseInt(filters[1].total()) + 1); filters[2].total(parseInt(filters[2].total()) - 1); item.isCheckedIn = false; checkInButton.closest('li').find('.check-in').show(); checkInButton.hide(); checkInButton.closest('li').find('.icon-user').removeClass('icon-user').addClass('icon-blankperson'); } ); }; self.noShowAttendee = function(item, e) { self.pageModel.startApiCall( '/mobileadmin/attendeeAPI/noShowAttendee', { attendeeId: item.attendeeId, noshow: 1 }, function(response) { $(e.currentTarget).closest('li').find('.no-show').hide(); $(e.currentTarget).closest('li').find('.no-showed').show(); e.stopPropagation(); } ); }; self.undoNoShowAttendee = function(item, e) { self.pageModel.startApiCall( '/mobileadmin/attendeeAPI/noShowAttendee', { attendeeId: item.attendeeId, noshow: 0 }, function(response) { $(e.currentTarget).closest('li').find('.no-showed').hide(); $(e.currentTarget).closest('li').find('.no-show').show(); e.stopPropagation(); } ); }; self.select = function(item, e) { $(e.currentTarget).find('.info').show(); }; self.cancel = function(item, e) { $(e.currentTarget).closest('li').find('.info').hide(); e.stopPropagation(); }; self.registerPreLoadAttendee = function(item, e) { var registerAttendeeViewModel = new RegisterAttendeeViewModel(); registerAttendeeViewModel.eventData = self.eventData; registerAttendeeViewModel.preLoadId = item.attendeeId; registerAttendeeViewModel.itemData = item; self.pageModel.render(registerAttendeeViewModel, $('#register-attendee-page-template')); e.stopPropagation(); }; }; var RegisterAttendeeViewModel = function () { var self = this; self.pageModel; self.eventData; self.preLoadId; self.itemData = null; self.formFields = ko.observableArray([]); self.notes = ko.observable(null); self.init = function(pageModel) { var formFields = [], i, j, fieldKey, fieldName, value, fields = self.getFields(); self.pageModel = pageModel; pageModel.hideAllPageElements(); pageModel.headerText(self.eventData.eventName); for (i in fields) { for (j in self.eventData.attendeeVisibleFields) { fieldKey = self.eventData.attendeeVisibleFields[j].fieldName; fieldName = self.eventData.attendeeVisibleFields[j].reportName; if (fieldKey != fields[i]) { continue; } formFields[i] = { key: fieldKey, name: fieldName, value: '' }; } } var fieldLength = (self.itemData != null ? Object.values(self.itemData).length : 0); for (var i = 1; i < fieldLength; i++) { if (formFields[i-1] != undefined) { formFields[i-1].value = Object.values(self.itemData)[i]; } } self.formFields(formFields); }; self.getFields = function() { var fieldKeys = [], attendeeVisibleFields = self.eventData.attendeeVisibleFields, i, customKeys = [], key; for (i in attendeeVisibleFields) { key = attendeeVisibleFields[i].fieldName; if (['fname', 'lname'].indexOf(key) == -1) { customKeys.push(key); } } for (i in attendeeVisibleFields) { switch (attendeeVisibleFields[i]['fieldName']) { case 'fname': fieldKeys[0] = 'fname'; break; case 'lname': fieldKeys[1] = 'lname'; break; } } for (i = 0; i < 4; i++) { if (fieldKeys[i] == undefined && customKeys.length != 0) { fieldKeys[i] = customKeys.shift(); } } return fieldKeys; }; self.register = function() { var values = {}, hasEmptyFields = false; $.each($('.register-attendee-fields input'), function(k, v) { var name = $(v).attr('name'), value = $(v).val(); values[name] = value; if (value.length == 0) { hasEmptyFields = true; } }); if (hasEmptyFields) { self.pageModel.showNotificationMessage('Please fill all fields'); } else { self.pageModel.startApiCall( '/mobileadmin/attendeeAPI/registerAttendee', { eventId : self.eventData.eventId, preLoadId : self.preLoadId, values : values, notes: self.notes(), locationId: (checkinLocation.length > 0 ? checkinLocation.val() : 0) }, function(response) { var name = []; if (values['fname'] != undefined) { name.push(values['fname']); } if (values['lname'] != undefined) { name.push(values['lname']); } if (name.length != 0) { name = name.join(' '); } else { name = 'attendee'; } self.pageModel.showNotificationMessage('Registration has been created for '+ name); self.cancel(); } ); } }; self.cancel = function() { var attendeesViewModel = new AttendeesViewModel(); attendeesViewModel.eventData = self.eventData; self.pageModel.render(attendeesViewModel, $('#attendees-page-template')); attendeesViewModel.loadAttendeesList(); }; }; </script>  </body> </html>

CINXE.COM

Attendee Check-In