contrib/opportunity/src/templates/meetup.nit

   1 # This file is part of NIT ( http://www.nitlanguage.org ).
   2 #
   3 # Licensed under the Apache License, Version 2.0 (the "License");
   4 # you may not use this file except in compliance with the License.
   5 # You may obtain a copy of the License at
   6 #
   7 #     http://www.apache.org/licenses/LICENSE-2.0
   8 #
   9 # Unless required by applicable law or agreed to in writing, software
  10 # distributed under the License is distributed on an "AS IS" BASIS,
  11 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12 # See the License for the specific language governing permissions and
  13 # limitations under the License
  14
  15 # Shows a meetup and allows to modify its participants
  16 module meetup
  17
  18 import opportunity_model
  19 import boilerplate
  20 import welcome
  21 import template
  22
  23 # Shows a meetup and allows to modify its participants
  24 class OpportunityMeetupPage
  25         super OpportunityPage
  26
  27         # Meetup the page is supposed to show
  28         var meetup: nullable Meetup = null
  29
  30         init from_id(id: String) do
  31                 var db = new OpportunityDB.open("opportunity")
  32                 meetup = db.find_meetup_by_id(id)
  33                 db.close
  34         end
  35
  36         init do
  37                 header.page_js = """
  38                 function change_answer(ele, id){
  39                         // modify only the currently selected entry
  40                         if (in_modification_id != id) return;
  41
  42                         var e = document.getElementById(ele.id);
  43                         var i = e.innerHTML;
  44                         var ans = true;
  45                         if(i === "<center>✔</center>"){
  46                                 ans = false;
  47                                 e.innerHTML = "<center>✘</center>"
  48                                 e.style.color = "red";
  49                         }else{
  50                                 e.innerHTML = "<center>✔</center>";
  51                                 e.style.color = "green";
  52                         }
  53                         var a = ele.id.split('_')
  54                         var pid = a[1]
  55                         var aid = a[2]
  56                         $.ajax({
  57                                 type: "POST",
  58                                 url: "./rest/answer",
  59                                 data: {
  60                                         answer_id: aid,
  61                                         pers_id: pid,
  62                                         answer: ans
  63                                 }
  64                         });
  65                 }
  66                 function change_temp_answer(ele){
  67                         var e = document.getElementById(ele.id);
  68                         var i = e.innerHTML;
  69                         var ans = true;
  70                         if(i === "<center>✔</center>"){
  71                                 ans = false;
  72                                 e.innerHTML = "<center>✘</center>";
  73                                 e.style.color = "red";
  74                         }else{
  75                                 e.innerHTML = "<center>✔</center>";
  76                                 e.style.color = "green";
  77                         }
  78                 }
  79                 function add_part(ele){
  80                         var e = document.getElementById(ele.id);
  81                         var pname = document.getElementById("new_name").value;
  82                         var arr = e.id.split("_");
  83                         var mid = arr[1];
  84                         var ans = $('#' + ele.id).parent().parent().parent().children(".answer");
  85                         ansmap = {};
  86                         for(i=0;i<ans.length;i++){
  87                                 var curr = ans.eq(i)
  88                                 if(curr[0].innerHTML === "<center>✔</center>"){
  89                                         ansmap[curr.attr('id')] = true
  90                                 }else{
  91                                         ansmap[curr.attr('id')] = false
  92                                 }
  93                         }
  94                         $.ajax({
  95                                 type: "POST",
  96                                 url: "./rest/meetup/new_pers",
  97                                 data: {
  98                                         meetup_id: mid,
  99                                         persname: pname,
 100                                         answers: $.param(ansmap)
 101                                 }
 102                                 })
 103                                 .done(function(data){
 104                                         location.reload();
 105                                 })
 106                                 .fail(function(data){
 107                                         //TODO: Notify of failure
 108                                 });
 109                 }
 110                 function remove_people(ele){
 111                         var arr = ele.id.split("_")
 112                         var pid = arr[1]
 113                         $('#' + ele.id).parent().parent().parent().remove();
 114                         $.ajax({
 115                                 type: "POST",
 116                                 url: "./rest/people",
 117                                 data: {
 118                                         method: "DELETE",
 119                                         p_id: pid
 120                                 }
 121                         });
 122                 }
 123
 124                 // ID of line currently open for modification
 125                 var in_modification_id = null;
 126                 function modify_people(ele, id){
 127                         if (in_modification_id != null) {
 128                                 // reset to normal values
 129                                 $('#modify_'+in_modification_id).text("Modify or delete");
 130                                 $('#modify_'+in_modification_id).attr("class", "btn btn-xs btn-warning");
 131                                 $('#line_'+in_modification_id).css("background-color", "");
 132                                 $('#delete_'+in_modification_id).css("display", "none");
 133                         }
 134                         if (in_modification_id != id) {
 135                                 // activate modifiable mode
 136                                 $('#modify_'+id).text("Done");
 137                                 $('#modify_'+id).attr("class", "btn btn-xs btn-success");
 138                                 $('#line_'+id).css("background-color", "LightYellow");
 139                                 $('#delete_'+id).show();
 140
 141                                 in_modification_id = id;
 142                         } else {
 143                                 in_modification_id = null;
 144                         }
 145                 }
 146                 """
 147         end
 148
 149         redef fun rendering do
 150                 if meetup == null then
 151                         add((new OpportunityHomePage).write_to_string)
 152                         return
 153                 end
 154                 add header
 155                 var db = new OpportunityDB.open("opportunity")
 156                 add meetup.to_html(db)
 157                 db.close
 158                 add footer
 159         end
 160 end
 161
 162 redef class Meetup
 163         # Build the HTML for `self`
 164         fun to_html(db: OpportunityDB): Streamable do
 165                 var t = new Template
 166                 t.add """
 167 <div class="container">
 168 <div class="page-header">
 169         <center><h1>{{{name}}}</h1></center>
 170 """
 171                 if not date.is_empty then t.add """
 172         <center><h4>When: {{{date}}}</h4></center>"""
 173
 174                 if not place.is_empty then t.add """
 175         <center><h4>Where: {{{place}}}</h4></center>"""
 176
 177                 t.add """
 178 </div>
 179 <table class="table">
 180 """
 181                 t.add "<th>Participant name</th>"
 182                 for i in answers(db) do
 183                         t.add "<th class=\"text-center\">"
 184                         t.add i.to_s
 185                         t.add "</th>"
 186                 end
 187                 t.add "<th></th>"
 188                 t.add "</tr>"
 189                 for i in participants(db) do
 190                         i.load_answers(db, self)
 191                         t.add "<tr id=\"line_{i.id}\">"
 192                         t.add "<td>"
 193                         t.add i.to_s
 194                         t.add "</td>"
 195                         for j,k in i.answers do
 196                                 var color
 197                                 if k then
 198                                         color = "green"
 199                                 else color = "red"
 200
 201                                 t.add """<td class="answer" onclick="change_answer(this, {{{i.id}}})" id="answer_{{{j.id}}}_{{{i.id}}}" style="color:{{{color}}}">"""
 202                                 t.add "<center>"
 203                                 if k then
 204                                         t.add "✔"
 205                                 else
 206                                         t.add "✘"
 207                                 end
 208                                 t.add "</center></td>"
 209                         end
 210                         t.add """<td class="opportunity-action"><center><button class="btn btn-xs btn-warning" type="button" onclick="modify_people(this, {{{i.id}}})" id="modify_{{{i.id}}}">Modify or delete</button>&nbsp;"""
 211                         t.add """<button class="btn btn-xs btn-danger" type="button" onclick="remove_people(this)" id="delete_{{{i.id}}}" style="display: none;">Delete</button></center></td>"""
 212                         t.add "</tr>"
 213                 end
 214                 t.add """
 215 <tr id="newrow" style="background-color: LightYellow">
 216         <td><input id="new_name" type="text" placeholder="Your name" class="input-large"></td>
 217                 """
 218                 for i in answers(db) do
 219                         t.add "<td class=\"answer\" id=\"newans_{i.id}\" onclick=\"change_temp_answer(this)\" style=\"color:red;\"><center>✘</center></td>"
 220                 end
 221                 t.add """
 222         <td><center><span id="add_{{{id}}}" onclick="add_part(this)" style="color:green;" class="action"><button class="btn btn-xs btn-success" type="button">Done</button></span></center></td>"""
 223                 t.add "</tr>"
 224                 t.add "</table>"
 225                 t.add "</div>"
 226                 return t
 227         end
 228 end