| 1 | <?php |
|---|
| 2 | /** |
|---|
| 3 | * Tickets template (multiple). |
|---|
| 4 | * |
|---|
| 5 | * @category Core |
|---|
| 6 | * @package My Tickets |
|---|
| 7 | * @author Joe Dolson |
|---|
| 8 | * @license GPLv3 |
|---|
| 9 | * @link https://www.joedolson.com/my-tickets/ |
|---|
| 10 | */ |
|---|
| 11 | |
|---|
| 12 | ?> |
|---|
| 13 | <!DOCTYPE html> |
|---|
| 14 | <html <?php language_attributes(); ?>> |
|---|
| 15 | <head> |
|---|
| 16 | <title><?php bloginfo( 'blogname' ); ?> • <?php esc_html_e( 'Tickets', 'my-tickets' ); ?> • <?php esc_html_e( 'Bulk Ticket Check-in', 'my-tickets' ); ?></title> |
|---|
| 17 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|---|
| 18 | <style> |
|---|
| 19 | <?php echo mt_generate_css(); ?> |
|---|
| 20 | body { |
|---|
| 21 | font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif |
|---|
| 22 | } |
|---|
| 23 | |
|---|
| 24 | body * { |
|---|
| 25 | box-sizing: border-box; |
|---|
| 26 | } |
|---|
| 27 | .ticket.eticket { |
|---|
| 28 | height: calc( 100vh - 2rem ); |
|---|
| 29 | } |
|---|
| 30 | |
|---|
| 31 | .panel { |
|---|
| 32 | margin: 0 auto; |
|---|
| 33 | border: var(--mt-ticket-border); |
|---|
| 34 | background: var(--mt-ticket-background); |
|---|
| 35 | color: var(--mt-ticket-color); |
|---|
| 36 | } |
|---|
| 37 | |
|---|
| 38 | .panel * { |
|---|
| 39 | word-wrap: breakword; |
|---|
| 40 | line-height: 1.5; |
|---|
| 41 | } |
|---|
| 42 | |
|---|
| 43 | a.print { |
|---|
| 44 | display: block; |
|---|
| 45 | width: 100%; |
|---|
| 46 | text-align: center; |
|---|
| 47 | } |
|---|
| 48 | |
|---|
| 49 | .mt-verification div { |
|---|
| 50 | padding: .5em; |
|---|
| 51 | } |
|---|
| 52 | |
|---|
| 53 | .pending { |
|---|
| 54 | background: #f5e6ab; |
|---|
| 55 | border-left: 8px solid #755100; |
|---|
| 56 | } |
|---|
| 57 | |
|---|
| 58 | .completed { |
|---|
| 59 | background: #edfaef; |
|---|
| 60 | border-left: 8px solid #005c12; |
|---|
| 61 | font-weight: 700; |
|---|
| 62 | } |
|---|
| 63 | |
|---|
| 64 | .completed.used { |
|---|
| 65 | background: #facfd2; |
|---|
| 66 | border-left: 8px solid #8a2424; |
|---|
| 67 | font-weight: 700; |
|---|
| 68 | } |
|---|
| 69 | |
|---|
| 70 | .mt-verification { |
|---|
| 71 | font-size: 1.6em; |
|---|
| 72 | } |
|---|
| 73 | |
|---|
| 74 | @media print { |
|---|
| 75 | a.print { |
|---|
| 76 | display: none; |
|---|
| 77 | } |
|---|
| 78 | } |
|---|
| 79 | |
|---|
| 80 | h1 { |
|---|
| 81 | font-size: 1em; |
|---|
| 82 | font-weight: 400; |
|---|
| 83 | padding: 0; |
|---|
| 84 | margin: 0; |
|---|
| 85 | line-height: 1.2; |
|---|
| 86 | } |
|---|
| 87 | |
|---|
| 88 | .ticket.eticket .post-thumbnail { |
|---|
| 89 | margin: 0 auto; |
|---|
| 90 | width: 100%; |
|---|
| 91 | text-align: center; |
|---|
| 92 | } |
|---|
| 93 | |
|---|
| 94 | .bulk-checkin, |
|---|
| 95 | .ticket { |
|---|
| 96 | padding: 1rem; |
|---|
| 97 | width: 800px; |
|---|
| 98 | max-width: 100%; |
|---|
| 99 | } |
|---|
| 100 | |
|---|
| 101 | .eticket.ticket { |
|---|
| 102 | max-width: 480px; |
|---|
| 103 | width: 100%; |
|---|
| 104 | height: auto; |
|---|
| 105 | padding: 1rem; |
|---|
| 106 | } |
|---|
| 107 | |
|---|
| 108 | .ticket-data { |
|---|
| 109 | display: grid; |
|---|
| 110 | gap: 1.5rem; |
|---|
| 111 | } |
|---|
| 112 | |
|---|
| 113 | .ticket .inside { |
|---|
| 114 | position: relative; |
|---|
| 115 | width: 100%; |
|---|
| 116 | height: 100%; |
|---|
| 117 | display: grid; |
|---|
| 118 | align-items: center; |
|---|
| 119 | grid-template-columns: 25% 1fr 25%; |
|---|
| 120 | gap: 1rem; |
|---|
| 121 | } |
|---|
| 122 | |
|---|
| 123 | .eticket.ticket .inside { |
|---|
| 124 | grid-template-columns: 1fr; |
|---|
| 125 | } |
|---|
| 126 | |
|---|
| 127 | .ticket .post-thumbnail img { |
|---|
| 128 | width: 100%; |
|---|
| 129 | height: auto; |
|---|
| 130 | margin: 0 auto; |
|---|
| 131 | display: block; |
|---|
| 132 | } |
|---|
| 133 | .ticket.eticket .post-thumbnail img { |
|---|
| 134 | height: auto; |
|---|
| 135 | width: auto; |
|---|
| 136 | max-height: 240px; |
|---|
| 137 | max-width: 100%; |
|---|
| 138 | } |
|---|
| 139 | |
|---|
| 140 | .ticket_id, |
|---|
| 141 | .ticket-qrcode { |
|---|
| 142 | text-align: right; |
|---|
| 143 | } |
|---|
| 144 | |
|---|
| 145 | .ticket .post-content { |
|---|
| 146 | font-size: .8em; |
|---|
| 147 | font-style: italic; |
|---|
| 148 | } |
|---|
| 149 | |
|---|
| 150 | .ticket .post-content, |
|---|
| 151 | .ticket .ticket-price, |
|---|
| 152 | .ticket .event-date { |
|---|
| 153 | color: var(--mt-ticket-secondary-color); |
|---|
| 154 | } |
|---|
| 155 | |
|---|
| 156 | .eticket.ticket .post-content { |
|---|
| 157 | margin-left: 0; |
|---|
| 158 | font-size: .9em; |
|---|
| 159 | } |
|---|
| 160 | |
|---|
| 161 | .ticket .ticket_id { |
|---|
| 162 | font-size: .8em; |
|---|
| 163 | text-transform: uppercase; |
|---|
| 164 | } |
|---|
| 165 | |
|---|
| 166 | .eticket .ticket_id { |
|---|
| 167 | font-size: 1rem; |
|---|
| 168 | clear: both; |
|---|
| 169 | text-align: center; |
|---|
| 170 | } |
|---|
| 171 | |
|---|
| 172 | .ticket .event-date { |
|---|
| 173 | font-size: 1.2em; |
|---|
| 174 | } |
|---|
| 175 | |
|---|
| 176 | .ticket .event-title { |
|---|
| 177 | font-size: 1.2em; |
|---|
| 178 | font-weight: 700; |
|---|
| 179 | } |
|---|
| 180 | |
|---|
| 181 | .ticket .ticket-type { |
|---|
| 182 | font-size: 1.2em; |
|---|
| 183 | font-weight: 700; |
|---|
| 184 | } |
|---|
| 185 | |
|---|
| 186 | .ticket .ticket-price { |
|---|
| 187 | font-size: 1.2em; |
|---|
| 188 | } |
|---|
| 189 | |
|---|
| 190 | .ticket .map { |
|---|
| 191 | display: none; |
|---|
| 192 | } |
|---|
| 193 | |
|---|
| 194 | .ticket-qrcode img { |
|---|
| 195 | max-width: 120px; |
|---|
| 196 | } |
|---|
| 197 | |
|---|
| 198 | .eticket .ticket-qrcode img { |
|---|
| 199 | width: 100%; |
|---|
| 200 | height: auto; |
|---|
| 201 | max-width: 360px; |
|---|
| 202 | display: block; |
|---|
| 203 | margin: 0 auto; |
|---|
| 204 | } |
|---|
| 205 | |
|---|
| 206 | .ticket-venue { |
|---|
| 207 | font-size: .9em; |
|---|
| 208 | text-align: right; |
|---|
| 209 | } |
|---|
| 210 | |
|---|
| 211 | .eticket .ticket-venue, .eticket .ticket-id { |
|---|
| 212 | text-align: left; |
|---|
| 213 | font-size: 1em; |
|---|
| 214 | } |
|---|
| 215 | |
|---|
| 216 | /* Bulk display specific styles */ |
|---|
| 217 | .bulk-checkin { |
|---|
| 218 | margin: 0 auto; |
|---|
| 219 | height: auto; |
|---|
| 220 | display: grid; |
|---|
| 221 | grid-template-columns:180px 1fr; |
|---|
| 222 | align-items: center; |
|---|
| 223 | gap: 20px; |
|---|
| 224 | background: var(--mt-ticket-background); |
|---|
| 225 | margin-bottom: 2rem; |
|---|
| 226 | font-size: 1.5rem; |
|---|
| 227 | } |
|---|
| 228 | |
|---|
| 229 | .bulk-tickets .ticket { |
|---|
| 230 | margin-bottom: 2em; |
|---|
| 231 | } |
|---|
| 232 | |
|---|
| 233 | @media only screen and (max-width: 800px) { |
|---|
| 234 | .printable { |
|---|
| 235 | padding: 1em; |
|---|
| 236 | min-width: 320px; |
|---|
| 237 | } |
|---|
| 238 | |
|---|
| 239 | .ticket .inside { |
|---|
| 240 | display: block; |
|---|
| 241 | } |
|---|
| 242 | |
|---|
| 243 | .eticket.ticket { |
|---|
| 244 | width: 100%; |
|---|
| 245 | height: auto; |
|---|
| 246 | padding: 0; |
|---|
| 247 | border: none; |
|---|
| 248 | } |
|---|
| 249 | |
|---|
| 250 | .eticket.ticket .inside { |
|---|
| 251 | padding: 1em; |
|---|
| 252 | height: auto; |
|---|
| 253 | } |
|---|
| 254 | |
|---|
| 255 | .ticket .event-title { |
|---|
| 256 | clear: left; |
|---|
| 257 | padding-top: 1em; |
|---|
| 258 | } |
|---|
| 259 | |
|---|
| 260 | .ticket-venue { |
|---|
| 261 | position: static; |
|---|
| 262 | text-align: left; |
|---|
| 263 | margin-top: 2em; |
|---|
| 264 | } |
|---|
| 265 | |
|---|
| 266 | .ticket .post-content { |
|---|
| 267 | position: static; |
|---|
| 268 | } |
|---|
| 269 | |
|---|
| 270 | .ticket .ticket-qrcode img { |
|---|
| 271 | max-width: 200px; |
|---|
| 272 | } |
|---|
| 273 | |
|---|
| 274 | } |
|---|
| 275 | |
|---|
| 276 | @media print { |
|---|
| 277 | .bulk-tickets .ticket { |
|---|
| 278 | page-break-inside: avoid; |
|---|
| 279 | } |
|---|
| 280 | } |
|---|
| 281 | </style> |
|---|
| 282 | </head> |
|---|
| 283 | <body class="bulk-tickets my-tickets"> |
|---|
| 284 | <div class="bulk-checkin"> |
|---|
| 285 | <img src="<?php mt_purchase_qrcode(); ?>" alt="<?php esc_html_e( 'Check-in all tickets for this purchase', 'my-tickets' ); ?>" /> |
|---|
| 286 | <p><?php esc_html_e( 'Check-in all tickets on this purchase.', 'my-tickets' ); ?></p> |
|---|
| 287 | </div> |
|---|
| 288 | <?php |
|---|
| 289 | // load data from the Tickets Page. |
|---|
| 290 | if ( have_posts() ) { |
|---|
| 291 | while ( have_posts() ) { |
|---|
| 292 | the_post(); |
|---|
| 293 | // load ticket info. |
|---|
| 294 | $purchases = mt_get_payment_tickets(); |
|---|
| 295 | foreach ( $purchases as $ticket_id ) { |
|---|
| 296 | if ( ! mt_get_ticket_type( $ticket_id ) ) { |
|---|
| 297 | continue; |
|---|
| 298 | } |
|---|
| 299 | ?> |
|---|
| 300 | <div class='panel ticket <?php mt_ticket_method( $ticket_id ); ?>'> |
|---|
| 301 | <div class='inside'> |
|---|
| 302 | <?php |
|---|
| 303 | if ( 'eticket' !== mt_get_ticket_method( $ticket_id ) ) { |
|---|
| 304 | ?> |
|---|
| 305 | <div class='post-thumbnail'> |
|---|
| 306 | <?php mt_logo( array(), get_the_ID() ); ?> |
|---|
| 307 | </div> |
|---|
| 308 | <?php |
|---|
| 309 | } else { |
|---|
| 310 | ?> |
|---|
| 311 | <div class='ticket-qrcode'> |
|---|
| 312 | <img src="<?php mt_ticket_qrcode( $ticket_id ); ?>" alt="<?php __( 'QR Code Verification Link', 'my-tickets' ); ?>"/> |
|---|
| 313 | </div> |
|---|
| 314 | <?php |
|---|
| 315 | } |
|---|
| 316 | ?> |
|---|
| 317 | <div class="ticket-data"> |
|---|
| 318 | <div class="ticket-title-date"> |
|---|
| 319 | <h1 class='event-title'> |
|---|
| 320 | <?php mt_event_title( $ticket_id ); ?> |
|---|
| 321 | </h1> |
|---|
| 322 | <div class='event-date'> |
|---|
| 323 | <?php mt_event_date_time( $ticket_id ); ?> |
|---|
| 324 | </div> |
|---|
| 325 | </div> |
|---|
| 326 | <div class="ticket-type-price"> |
|---|
| 327 | <div class='ticket-type'> |
|---|
| 328 | <?php mt_ticket_type( $ticket_id ); ?> |
|---|
| 329 | </div> |
|---|
| 330 | <div class='ticket-price'> |
|---|
| 331 | <?php mt_ticket_price( $ticket_id ); ?> |
|---|
| 332 | </div> |
|---|
| 333 | </div> |
|---|
| 334 | <div class='post-content'> |
|---|
| 335 | <?php |
|---|
| 336 | $content = get_the_content(); |
|---|
| 337 | if ( '' === trim( strip_tags( $content ) ) ) { |
|---|
| 338 | $content = ( current_user_can( 'edit_pages' ) ) ? __( 'Add your custom text into the post content.', 'my-tickets' ) : ''; |
|---|
| 339 | } |
|---|
| 340 | echo wp_kses_post( $content ); |
|---|
| 341 | ?> |
|---|
| 342 | <?php edit_post_link(); ?> |
|---|
| 343 | </div> |
|---|
| 344 | <?php |
|---|
| 345 | if ( 'eticket' === mt_get_ticket_method( $ticket_id ) ) { |
|---|
| 346 | ?> |
|---|
| 347 | <div class='post-thumbnail'> |
|---|
| 348 | <?php |
|---|
| 349 | if ( has_post_thumbnail() ) { |
|---|
| 350 | the_post_thumbnail(); |
|---|
| 351 | } else { |
|---|
| 352 | mt_logo(); |
|---|
| 353 | } |
|---|
| 354 | ?> |
|---|
| 355 | </div> |
|---|
| 356 | <?php |
|---|
| 357 | } |
|---|
| 358 | $custom_fields = apply_filters( 'mt_custom_ticket', '', $ticket_id, mt_get_ticket_method( $ticket_id ) ); |
|---|
| 359 | echo wp_kses_post( $custom_fields ); |
|---|
| 360 | ?> |
|---|
| 361 | </div> |
|---|
| 362 | <div class="ticket-references"> |
|---|
| 363 | <div class='ticket-venue'> |
|---|
| 364 | <?php mt_ticket_venue( $ticket_id ); ?> |
|---|
| 365 | </div> |
|---|
| 366 | <?php |
|---|
| 367 | if ( 'eticket' !== mt_get_ticket_method( $ticket_id ) ) { |
|---|
| 368 | ?> |
|---|
| 369 | <div class='ticket-qrcode'> |
|---|
| 370 | <img src="<?php mt_ticket_qrcode( $ticket_id ); ?>" alt="QR Code Verification Link"/> |
|---|
| 371 | </div> |
|---|
| 372 | <?php |
|---|
| 373 | } |
|---|
| 374 | ?> |
|---|
| 375 | <div class='ticket_id'> |
|---|
| 376 | <?php echo $ticket_id; ?> |
|---|
| 377 | </div> |
|---|
| 378 | </div> |
|---|
| 379 | </div> |
|---|
| 380 | </div> |
|---|
| 381 | <?php |
|---|
| 382 | } |
|---|
| 383 | } |
|---|
| 384 | } |
|---|
| 385 | ?> |
|---|
| 386 | <a href="javascript:window.print()" class="print">Print</a> |
|---|
| 387 | </body> |
|---|
| 388 | </html> |
|---|