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