templates/conference/Registration.html.ep

   1 <script>
   2
   3 if (typeof (console) === 'undefined') console = { debug: function() {} }; // mock console.debug
   4
   5 function Registration($resource){
   6         this.master = {
   7                 person: {
   8                         name: '', surname: '', inst: '', email: ''
   9                 },
  10                 type: 'participant',
  11                 work: {
  12                         title: '',
  13                         abstract: '',
  14                         authors:[ { name:'', surname:'', inst:'', email:'' } ]
  15                 },
  16                 symposium: { organizers: [ {name:'', surname:'', inst:'', email:'' } ], work_nr: 1 }
  17         };
  18         this.Registration = $resource( '/data/conference/Registration/:id', { id:'' } );
  19         this.Symposium = $resource( '/data/conference/Symposium/:id', { id:'' } );
  20         this.reset();
  21         this.$watch('$location.hashPath', this.hash_change);
  22 }
  23 Registration.$inject=['$resource'];
  24
  25 Registration.prototype = {
  26         hash_change: function() {
  27                 var id = this.$location.hashPath;
  28 console.debug( 'hash_change', id, this.registration.$id );
  29                 if ( id != this.registration.$id ) {
  30                         if (id) {
  31                                 var self = this;
  32                                 this.registration = this.Registration.get({ id: id }, function(registration) {
  33                                         self.last_saved = angular.copy(registration);
  34                                         if ( registration.type == 'symposium' ) {
  35                                                 var s_id = registration.symposium.$id || registration.$id;
  36                                                 // first registration doesn't have symposium.$id, but we used same $id
  37 console.debug( 'load symposium ', s_id );
  38                                                 self.symposium = self.Symposium.get({ id: s_id });
  39                                         }
  40                                 });
  41                         }
  42                         else this.reset();
  43                 }
  44         },
  45         reset: function() {
  46                 console.debug( this.Registration );
  47                 var last = this.registration;
  48                 if ( last && last.type == 'symposium' ) {
  49                         if ( last.$id ) last.symposium.work_nr++; // only if saved
  50                 }
  51                 this.registration = new this.Registration( this.master );
  52                 if ( last ) {
  53                         this.registration.type      = last.type;
  54                         this.registration.person    = last.person;
  55
  56                         if ( last.type == 'symposium' )
  57                         this.registration.symposium = last.symposium;
  58                 }
  59                 this.last_saved = angular.copy( this.registration ); // FIXME was: {};
  60 console.debug( 'reset', this.registration, this.$location.hashPath, last );
  61         },
  62         save: function(){
  63                 var self = this;
  64                 this.registration.$save(function(registration){
  65                         self.$location.hashPath = registration.$id;
  66
  67                         // save symposium to separate resource
  68                         if ( registration.type == 'symposium' ) {
  69                                 if ( ! self.symposium ) {
  70                                         self.registration.symposium.$id = registration.$id; // reuse $id of first work for symposium
  71                                         self.symposium = new self.Symposium( registration.symposium );
  72                                         self.symposium.works = [];
  73                                 }
  74                                 registration.work.$id = registration.$id; // preserve $id
  75                                 self.symposium.works[ registration.symposium.work_nr - 1 ] = registration.work;
  76 console.debug('save_symposium', self.symposium );
  77                                 self.symposium.$save();
  78                         }
  79
  80                         self.last_saved = angular.copy(registration);
  81                 });
  82         }
  83 };
  84
  85 angular.validator.max_length = function(input, len) {
  86         var ok = input.length <= len;
  87 console.debug( 'max_length', ok, input.length, len );
  88         return ok ? '' : 'must be shorter than '+len+' characters';
  89 }
  90
  91 </script>
  92
  93
  94 <style type="text/css">
  95
  96 body {
  97         background: #F6F6F6;
  98         margin: 40px;
  99         font-family: Arial;
 100         color: #374E5A;
 101         font-size: 14px;
 102         line-height: 16px;
 103 }
 104
 105
 106 label {
 107         display: block;
 108         color: #D74F25;
 109         color: #374E5A;
 110         color: #afafaf;
 111         margin-top: 10px;
 112         font-size: 14px;
 113         font-family: Arial;
 114 }
 115 h1 {
 116 /*      margin-bottom: 6px;     */
 117         padding-left: 20px;
 118         font: 18px arial;
 119         color: #0c1426;
 120         text-decoration: none;
 121         display: block;
 122         background: url(http://mjesec.ffzg.hr/drzb2011/images/kvadrat.gif) no-repeat left;
 123         border-bottom: 1px solid #CCC;
 124 }
 125 h2 {
 126         margin-top: 60px;
 127         font-size: 14px;
 128         padding: 2px 0;
 129         border-bottom: 2px solid #D74F25;
 130         border-bottom: 1px solid #46d0fe;
 131 }
 132
 133 a {
 134         color: #D74F25;
 135 }
 136
 137 label {
 138         color: #374E5A;
 139 }
 140
 141 .input {
 142         color: #afafaf;
 143         float: left;
 144         margin: 2px;
 145         padding: 0 6px;
 146 }
 147
 148 .input1 {
 149         width: 40.8em;
 150 }
 151
 152 .input2 {
 153         width: 8em;
 154 }
 155
 156 .input3 {
 157         width: 13em;
 158 }
 159 .input4 {
 160         width: 10em;
 161 }
 162
 163 .input5 {
 164         width: 21.4em;
 165 }
 166 .input6 {
 167         width: 6.3em;
 168 }
 169
 170 .clear {
 171         clear: both;
 172 }
 173
 174
 175 .authors {
 176         clear: both;
 177         margin-bottom: 6px;
 178 }
 179
 180 .addPerson {
 181         color: #D74F25;
 182         color: #EDC8BC;
 183         color: #EAB3A2;
 184         font-size: 90%;
 185 }
 186
 187 input, textarea, .gohome {
 188         font: 14px arial;
 189         color: #000000;
 190         border: solid 1px #dedede;
 191         padding: 6px;
 192         background: #f6f6f6;
 193 }
 194
 195 input:focus, textarea:focus
 196 {
 197
 198         background: #ffffff;
 199         font-family: arial;
 200         color: #000000;
 201 /*      border: 1px solid #46d0fe; */
 202 }
 203
 204 .ng-validation-error {
 205         border: 1px solid #FF6666;
 206         border: 1px solid #EDC8BC;
 207         border: 1px solid #FF9966;
 208         border: 1px solid #EAB3A2;
 209         border: 1px solid #D74F25;
 210         border: 1px solid #DC6844;
 211         border: 1px solid #DE7F61;
 212 }
 213
 214
 215
 216 #work, #submission {
 217         margin-bottom: 20px;
 218 }
 219
 220 .button {
 221         margin-top: 20px;
 222         width: 40.8em;
 223 }
 224
 225 .button input {
 226         margin-bottom: 10px;
 227         float: left;
 228         color: #ffffff;
 229         display: block;
 230         text-decoration: none;
 231         background: #d74f25;
 232 }
 233
 234 .button input:hover, .gohome:hover {
 235         background: #dc6844;
 236 }
 237
 238 .button2 input {
 239         background: #F6F6F6;
 240         color: #374E5A;
 241         border: 1px solid #d74f25;
 242         display: inline;
 243         float: none;
 244 }
 245
 246
 247 .gohome  {
 248         float: left;
 249         color: #ffffff;
 250         display: block;
 251         text-decoration: none;
 252         background: #d74f25;
 253         padding: 7px;
 254 }
 255
 256 .gohome a {
 257         color: #fff;
 258         text-decoration: none;
 259 }
 260
 261 .list {
 262         margin-top: 20px;
 263         font-weight: bold;
 264 }
 265
 266 .warrning {
 267         color: #FF6666;
 268 }
 269
 270 .sworks {
 271         margin-top: 20px;
 272 }
 273
 274
 275 .newWork {
 276         clear: left;
 277         margin-top: 50px;
 278 }
 279 .saved {
 280         margin-bottom: 20px;
 281         margin-top: 20px;
 282 }
 283 .saved2 {
 284         color: #374E5A;
 285         color: #d74f25;
 286         font-weight: bold;
 287         font-style: italic;
 288         display: block;
 289 }
 290 .saved3 {
 291         color: #374E5A;
 292         font-weight: normal;
 293         margin-top: 20px;
 294 }
 295 .footer {
 296         height: 10px;
 297 }
 298 hr {
 299         border: 1px solid #ccc;
 300 }
 301 </style>
 302
 303
 304
 305 <h1>Registration and Proposal Submission</h1>
 306
 307 <div>
 308 <p>Svi sudionici skupa, bez obzira na to jesu li izlagači, suautori ili slušači, trebaju prijaviti svoje sudjelovanje kroz sustav elektroničke prijave.</p>
 309
 310 <p>Sažetak izlaganja/postera prijavljuje samo prvi autor, odnosno onaj autor koji će rad izložiti. Ostali suautori prilikom prijave na skup ne trebaju prijaviti sažetak, nego se samo registrirati.</p>
 311
 312 <p>Organizatori simpozija/okruglog stola prijavljuju i sažetak simpozija i/ili okruglog stola,  i sažetak svakog pripadajućeg rada. Autori radova unutar simpozija ne prijavljuju pojedinačno svoje sažetke.</p>
 313
 314 <p>Duljina sažetka ne može prelaziti 2000 znakova.</p>
 315
 316 <p>Jedna osoba može biti autor u najviše tri rada, pri čemu na samo jednom može biti prvi ili jedini autor.</p>
 317
 318 </div>
 319
 320
 321 <div class="root" ng:controller="Registration" ng:init="$window.$root = this;">
 322
 323
 324 <div ng:show="last_saved.$id || symposium">
 325         <h2>{{registration.person.name}} {{registration.person.surname}}</h2>
 326 </div>
 327
 328
 329 <div id="participant" ng:show="! last_saved.$id && ! symposium">
 330         <h2>Contact Information</h2>
 331         <div class="labelTop">
 332                 <div class="input input4">First name</div>
 333                 <div class="input input4">Surname</div>
 334         </div>
 335         <div style="clear: both">
 336                 <input class="input4" name="registration.person.name" ng:required>
 337                 <input class="input4" name="registration.person.surname" ng:required>
 338         </div>
 339         <div class="labelTop">
 340                 <div class="input input5">Institution</div>
 341         </div>
 342         <div style="clear: both">
 343                 <input class="input5" name="registration.person.inst">
 344         </div>
 345         <div class="labelTop">
 346                 <div class="input input5">Address</div>
 347         </div>
 348         <div style="clear: both">
 349                 <input class="input5" name="registration.person.address1" ng:required>
 350         </div>
 351         <div class="labelTop">
 352                 <div class="input input6">City</div>
 353                 <div class="input input6">ZIP</div>
 354                 <div class="input input6">Country</div>
 355         </div>
 356         <div style="clear: both">
 357                 <input class="input6" name="registration.person.city" ng:required>
 358                 <input class="input6" name="registration.person.zip">
 359                 <input class="input6" name="registration.person.country">
 360         </div>
 361         <div class="labelTop">
 362                 <div class="input input4">E-mail</div>
 363                 <div class="input input4">Phone number</div>
 364         </div>
 365         <div style="clear: both">
 366                 <input class="input4" name="registration.person.email" ng:validate="email" ng:required>
 367                 <input class="input4" name="registration.person.phone">
 368         </div>
 369 </div>
 370
 371
 372 <div id="submission" ng:show="registration.type != 'symposium' && ! last_saved.$id">
 373         <div>
 374                 <h2>Registration Type</h2>
 375                 <label><input type="radio" name="registration.type" value="participant" ng:required>Attendance with no presentation</label>
 376                 <label><input type="radio" name="registration.type" value="sparticipant" ng:required>Symposium participant</label>
 377                 <label><input type="radio" name="registration.type" value="symposium" ng:required>Symposium organizer</label>
 378                 <label><input type="radio" name="registration.type" value="lecture" ng:required>Oral presentation</label>
 379                 <label><input type="radio" name="registration.type" value="poster" ng:required>Poster presentation</label>
 380                 <label><input type="radio" name="registration.type" value="round" ng:required>Round table discussion</label>
 381         </div>
 382 </div>
 383
 384         <!-- dodano za syposium participants -->
 385         <div ng:show="registration.type == 'sparticipant' && ! last_saved.$id">
 386                 <h2>Symposia</h2>
 387                 <label for="registration.sympattend">Topic:</label>
 388                 <input class="input1" name="registration.sympattend" ng:required>
 389         </div>
 390
 391
 392 <div id="work" ng:show="registration.type != 'participant' && registration.type != 'sparticipant'">
 393 <div ng:show="registration.type == 'symposium' && ! last_saved.$id && registration.symposium.work_nr < 2">
 394
 395         <h2>Symposia</h2>
 396         <label for="registration.symposium.title">Topic:</label>
 397                 <input class="input1" name="registration.symposium.title" ng:required>
 398         <label>Organizer:</label>
 399                 <div class="input input2">First name</div><div class="input input2">Surname</div><div class="input input3">Institution</div><div class="input input2">E-mail</div>
 400                 <div class="clear" ng:repeat="organizer in registration.symposium.organizers">
 401                 <input class="input2" name="organizer.name" ng:required>
 402                 <input class="input2" name="organizer.surname" ng:required>
 403                 <input class="input3" name="organizer.inst" >
 404                 <input class="input2" name="organizer.email" ng:required ng:validate="email">
 405                 <a href="" ng:click="registration.symposium.organizers.$remove(organizer)">X</a>
 406                 </div>
 407         <a class="addPerson" href="" ng:click="registration.symposium.organizers.$add()">Add another organizer</a>
 408         <label>Summary (2000 characters max.)</label>
 409                 <textarea class="input1" name="registration.symposium.abstract" rows="10" ng:validate="max_length:2000" ng:required></textarea>
 410 </div>
 411
 412
 413 <div ng:show="registration.type && ! last_saved.$id">
 414
 415                 <div ng:show="symposium">
 416                         <b>Symposium:</b> {{registration.symposium.title}}
 417                         <blockquote>
 418                         <label>Submitted papers for this symposium:</label>
 419                         <ol>
 420                         <li ng:repeat="w in symposium.works">
 421                         <a ng:show="registration.$id != w.$id" href="#{{w.$id}}" >{{w.title}}</a>
 422                         <b ng:show="registration.$id == w.$id">{{w.title}}</b>
 423                         </li>
 424                         </ol>
 425                         </blockquote>
 426                 </div>
 427 <h2 ng:show="registration.type == 'symposium'">Add Symposia Paper ({{registration.symposium.work_nr}})</h2>
 428 <h2 ng:show="registration.type == 'lecture'">Oral Presentation Sumbission</h2>
 429 <h2 ng:show="registration.type == 'poster'">Poster Presentation Sumbission</h2>
 430 <h2 ng:show="registration.type == 'round'">Round Table Disscussion Sumbission</h2>
 431
 432
 433 <label>Title:</label>
 434         <input class="input1" name="registration.work.title" ng:required>
 435 <label>Authors</label>
 436 <div>
 437         <div class="input input2">First name</div><div class="input input2">Surname</div><div class="input input3">Institution</div><div class="input input2">E-mail</div>
 438 </div>
 439 <div class="clear" ng:repeat="author in registration.work.authors">
 440         <input class="input2" name="author.name" ng:required>
 441         <input class="input2" name="author.surname" ng:required>
 442         <input class="input3" name="author.inst" >
 443         <input class="input2" name="author.email" ng:required ng:validate="email">
 444         <a href="" ng:click="registration.work.authors.$remove(author)">X</a>
 445 </div>
 446 <a class="addPerson" href="" ng:click="registration.work.authors.$add()">Add another author</a>
 447
 448
 449 <label>Abstract (2000 characters max.):</label>
 450         <textarea class="input1" name="registration.work.abstract" rows="10" ng:validate="max_length:2000" ng:required></textarea>
 451
 452
 453 </div> <!-- ng:show="registration.type" -->
 454 </div>
 455
 456 <div class="button" ng:show="! last_saved.$equals(registration) && $invalidWidgets.visible() == 0">
 457 <input type="submit" value="Save" ng:click="save();" ng:show="! last_saved.$equals(registration) && $invalidWidgets.visible() == 0">
 458 </div>
 459
 460 <div ng:show="$invalidWidgets.visible() &gt; 0" style="color:red; margin-top: 20px">Please fill all required fields correctly ({{$invalidWidgets.visible()}} fields left). Red colored fields call for your attention.
 461 </div>
 462
 463
 464
 465
 466 <div style="margin-bottom: 40px" ng:show="registration.$id && last_saved.$equals(registration)">
 467
 468 <div>
 469 <input type="checkbox" name="last_saved.$id"> Hide submitted registration
 470 </div>
 471
 472 <div class="saved" ng:show="registration.type == 'participant' || registration.type == 'sparticipant'">
 473                 <span class="saved2">Your registration has been submitted successfully!</span>
 474                 <br><br>
 475                 <span ng:show="registration.sympattend">You will participate in the symosium <b>"{{registration.sympattend}}"</b><br><br><br></span>
 476                 <span class="saved3">
 477                 Thank you. We look forward to seeing you at the conference<br><br>
 478                 .. Kotizacija upute ..
 479                 </span>
 480         </div>
 481
 482         <div class="saved" ng:show="registration.type != 'participant' && registration.type != 'sparticipant'">
 483                 <span class="saved2">You submitted the paper successfully! <br><br></span>
 484
 485                 <b>Paper title</b>: {{registration.work.title}} <br><br>
 486                 <div ng:show="symposium">
 487                         <b>Symposium:</b> {{registration.symposium.title}}
 488                         <blockquote>
 489                         <label>Already submitted papers for this symposium:</label>
 490                         <ol>
 491                         <li ng:repeat="w in symposium.works">
 492                         <!--
 493                         <a ng:show="registration.$id != w.$id" href="#{{w.$id}}" >{{w.title}}</a>
 494                         -->
 495                         <span ng:show="registration.$id != w.$id">{{w.title}}</span>
 496                         <b ng:show="registration.$id == w.$id">{{w.title}}</b>
 497                         </li>
 498                         </ol>
 499                         </blockquote>
 500                 </div>
 501         </div>
 502         <div class="button button2" ng:show="registration.$id && registration.type != 'participant' && registration.type != 'sparticipant' && last_saved.$equals(registration)">
 503                 You can <input type="reset" value="Submit another paper" ng:click="reset()"> or <a href="http://psihologija.ffzg.hr/drzb2011/">just leave</a> this page. <br><br> ... conference fee ... instructions ...<br><br>
 504         </div>
 505         <!--
 506         <div>
 507         Registration ID: {{registration.$id}}. You can bookmark this page and review it later.
 508         </div>
 509         -->
 510
 511         <!--
 512         <div class=""><a href="http://psihologija.ffzg.hr/drzb2011/">Go to conference home page</a></div>
 513         -->
 514 </div>
 515 <!--
 516 <div class="button2" ng:show="registration.$id && registration.type != 'participant' && registration.type != 'sparticipant' && last_saved.$equals(registration)">
 517         <input type="reset" value="Submit another paper" ng:click="reset()">
 518         <div class="gohome"><a href="http://psihologija.ffzg.hr/drzb2011/">Go to conference home page</a></div>
 519 </div>
 520 -->
 521
 522 <div class="footer"></div>
 523
 524 <!--
 525 <div ng:show="registration.$id">
 526 Permalink to <a href="#{{registration.$id}}">DRZB2011 registration</a> which you can bookmark
 527 </div>
 528 -->
 529
 530 <input type=checkbox name=debug style="float: right; clear: both">
 531 <pre ng:show="debug">
 532
 533 dirty={{! last_saved.$equals(registration)}} invalid={{$invalidWidgets.visible()}}
 534
 535 registration = {{registration}}
 536
 537 last_saved = {{last_saved}}
 538
 539 master = {{master}}
 540
 541 symposium = {{symposium}}
 542
 543 $id={{$id}}
 544 registration.$id={{registration.$id}}
 545 </pre>