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: '', // just attending
  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.last_saved = {};
  19         this.Registration = $resource( '/data/conference/Registration/:id', { id:'' } );
  20         this.Symposium = $resource( '/data/conference/Symposium/:id', { id:'' } );
  21         this.reset();
  22         this.$watch('$location.hashPath', this.hash_change);
  23 }
  24 Registration.$inject=['$resource'];
  25
  26 Registration.prototype = {
  27         hash_change: function() {
  28                 var id = this.$location.hashPath;
  29 console.debug( 'hash_change', id, this.registration.$id );
  30                 if ( id != this.registration.$id ) {
  31                         if (id) {
  32                                 var self = this;
  33                                 this.registration = this.Registration.get({ id: id }, function(registration) {
  34                                         self.last_saved = angular.copy(registration);
  35                                         if ( registration.type == 'symposium' ) {
  36                                                 var s_id = registration.symposium.$id || registration.$id;
  37                                                 // first registration doesn't have symposium.$id, but we used same $id
  38 console.debug( 'load symposium ', s_id );
  39                                                 self.symposium = self.Symposium.get({ id: s_id });
  40                                         }
  41                                 });
  42                         }
  43                         else this.reset();
  44                 }
  45         },
  46         reset: function() {
  47                 console.debug( this.Registration );
  48                 var current_symposium = null;
  49                 var current_person = null;
  50                 if ( this.registration && this.registration.type == 'symposium' ) {
  51                         current_symposium = this.registration.symposium;
  52                         current_person = this.registration.person;
  53                         if ( this.registration.$id ) current_symposium.work_nr++; // only if saved
  54 console.debug( 'current_symposium', current_symposium, this.registration )
  55                 }
  56                 this.registration = new this.Registration( this.master );
  57                 if ( current_symposium ) {
  58                         this.registration.symposium = current_symposium;
  59                         this.registration.type = 'symposium';
  60                         this.registration.person = current_person;
  61                 }
  62                 this.last_saved = {};
  63 console.debug( 'reset', current_symposium, this.registration, this.$location.hashPath );
  64         },
  65         save: function(){
  66                 var self = this;
  67                 this.registration.$save(function(registration){
  68                         self.$location.hashPath = registration.$id;
  69
  70                         // save symposium to separate resource
  71                         if ( registration.type == 'symposium' ) {
  72                                 if ( ! self.symposium ) {
  73                                         self.registration.symposium.$id = registration.$id; // reuse $id of first work for symposium
  74                                         self.symposium = new self.Symposium( registration.symposium );
  75                                         self.symposium.works = [];
  76                                 }
  77                                 self.symposium.works[ work.symposium.work_nr - 1 ] = registration.work;
  78 console.debug('save_symposium', self.symposium );
  79                                 self.symposium.$save();
  80                         }
  81
  82                         self.last_saved = angular.copy(registration);
  83                 });
  84         },
  85 };
  86
  87
  88 </script>
  89
  90
  91 <style type="text/css">
  92
  93 body {
  94         background: #F6F6F6;
  95         margin: 40px;
  96         font-family: Arial;
  97         color: #374E5A;
  98         font-size: 14px;
  99         line-height: 16px;
 100 }
 101 label, h2 {
 102         display: block;
 103         color: #D74F25;
 104         color: #374E5A;
 105         color: #afafaf;
 106         margin-top: 10px;
 107         font-size: 14px;
 108         font-family: Arial;
 109         font-weight: normal;
 110 }
 111
 112 h2 {
 113         margin-top: 40px;
 114         color: #374E5A;
 115         color: #D74F25;
 116 }
 117
 118 a {
 119         color: #D74F25;
 120         font-size: 80%;
 121 }
 122
 123 .symposium, .work {
 124         width: 615px;
 125 }
 126
 127 label {
 128         color: #374E5A;
 129 }
 130
 131 .authors-label .name, .authors-label .surname, .authors-label .inst, .authors-label .email {
 132         color: #afafaf;
 133         float: left;
 134         margin: 2px;
 135         padding: 0 6px;
 136 }
 137
 138 .name, .surname, .email {
 139         width: 18%;
 140 }
 141
 142 .inst {
 143         width: 30%;
 144 }
 145
 146 .title, .summary {
 147         width: 93%;
 148 }
 149
 150 .authors {
 151         clear: both;
 152         margin-bottom: 6px;
 153 }
 154
 155 .authors-label {
 156         clear: right;
 157 }
 158
 159
 160
 161 .addNew {
 162         padding-right: 30px;
 163 }
 164
 165 input, textarea
 166 {
 167         font: 14px arial;
 168         color: #000000;
 169         border: solid 1px #dedede;
 170         padding: 6px;
 171         background: #f6f6f6;
 172 }
 173
 174 input:focus, textarea:focus
 175 {
 176
 177         background: #ffffff;
 178         font-family: arial;
 179         color: #000000;
 180         border: 1px solid #46d0fe;
 181 }
 182
 183 input.ng-validation-error {
 184         border: 1px solid #D74F25;
 185         border: 1px solid #FF6666;
 186         border: 1px solid #FF9966;
 187         border: 1px solid #EDC8BC;
 188 }
 189
 190 .warrning {
 191         color: #FF6666;
 192 }
 193
 194 .sworks {
 195         margin-top: 20px;
 196 }
 197
 198 .save {
 199         margin-top: 10px;
 200 }
 201
 202 .save input
 203 {
 204         float: left;
 205         color: #ffffff;
 206         display: block;
 207         text-decoration: none;
 208         background: #d74f25;
 209 }
 210
 211 .save input:hover
 212 {
 213         background: #dc6844;
 214 }
 215
 216 .newWork {
 217         clear: left;
 218         margin-top: 50px;
 219 }
 220 </style>
 221
 222
 223
 224 <h1>Registration and Proposal Submission</h1>
 225
 226 <div ng:controller="Registration" ng:init="$window.$root = this;">
 227
 228 <div id="registration">
 229
 230 <input class="name" name="registration.person.name" ng:required>
 231 <input class="name" name="registration.person.surname" ng:required>
 232
 233 <input name="registration.person.inst">
 234 <input name="registration.person.email" ng:validate="email">
 235
 236 </div>
 237
 238 <div id="submission">
 239
 240 <h2>Type of conference submission:</h2>
 241
 242 <input type="radio" name="registration.type" value="">Just attending conference<br/>
 243 <input type="radio" name="registration.type" value="symposium">Symposia<br/>
 244 <input type="radio" name="registration.type" value="lecture">Oral presentation<br/>
 245 <input type="radio" name="registration.type" value="poster">Poster presentation<br/>
 246 <input type="radio" name="registration.type" value="round">Round table discussion<br/>
 247
 248 <div id="submit_work" ng:show="registration.type">
 249
 250 <div ng:show="registration.type == 'symposium'" style="background:#f0f0f0">
 251
 252 <label>Topic of symposium: <input name="registration.symposium.title" size="60" ng:required></label><br/>
 253
 254 <label>Summary: <br/>
 255 <textarea name="registration.symposium.abstract" cols="50" rows="5"></textarea>
 256 </label>
 257 <br/>
 258
 259 Organizer:
 260 <div ng:repeat="organizer in registration.symposium.organizers">
 261 [<a href="" ng:click="registration.symposium.organizer.$remove(author)">X</a>]
 262 <input name="organizer.name" ng:required>
 263 <input name="organizer.surname" ng:required>
 264 <input name="organizer.inst" >
 265 <input name="organizer.email" ng:required>
 266 </div>
 267 [<a href="" ng:click="registration.symposium.organizer.$add()">Add another organizer</a>]
 268
 269 </div>
 270 <hr>
 271
 272 <div ng:show="symposium">
 273 Works which are part of this symposium:
 274 <ol>
 275 <li ng:repeat="w in symposium.works"><a href="#{{w.$id}}">{{w.title}}</a></li>
 276 </ol>
 277
 278 </div>
 279
 280 <h2>Autors<span ng:show="registration.type == 'symposium'"> of {{registration.symposium.work_nr}}. work </span></h2>
 281
 282 <div ng:repeat="author in registration.work.authors">
 283 [<a href="" ng:click="registration.work.authors.$remove(author)">X</a>]
 284 <input name="author.name" ng:required>
 285 <input name="author.surname" ng:required>
 286 <input name="author.inst" >
 287 <input name="author.email" ng:required>
 288 </div>
 289 [<a href="" ng:click="registration.work.authors.$add()">Add another author</a>]
 290
 291 <hr>
 292
 293 <label>Title: <input name="registration.work.title" size="60" ng:required></label><br/>
 294
 295 <label>Summary:<br>
 296 <textarea name="registration.work.abstract" cols="50" rows="5"></textarea>
 297 </label>
 298 <br/>
 299
 300 </div>
 301
 302 <div id="buttons">
 303
 304 <span ng:show="$invalidWidgets.visible() == 0">
 305 <input type="submit" value="Save" ng:click="save();" ng:show="! last_saved.$equals(registration)">
 306 <input type="reset" value="Add another work" ng:click="reset()" ng:show="registration && registration.$id">
 307 </span>
 308
 309 <b ng:show="$invalidWidgets.visible() &gt; 0" style="color:#800">{{$invalidWidgets.visible()}} errors to fix in submission form</b>
 310 </div>
 311
 312
 313 <div ng:show="registration.$id">
 314 Permalink to <a href="#{{registration.$id}}">DRZB2011 registration</a> which you can bookmark
 315 </div>
 316
 317 </div><!-- registration.type == just attending -->
 318
 319 <hr>
 320 Debug Information:
 321 {{$window.location.href}}
 322 <pre>
 323 registration = {{registration}}
 324
 325 dirty={{! last_saved.$equals(registration)}}
 326
 327 last_saved = {{last_saved}}
 328
 329 master = {{master}}
 330
 331 $id={{$id}}
 332 registration.$id={{registration.$id}}
 333 </pre>
 334
 335 </div>