updates

js/dir_app.js

@@ -2056,39 +2056,39 @@ const ActivityInfoReport2 = Vue.component('activityinforeport2', {
     watch: { },
     template: `<div class="bg-white rounded-md shadow-md p-6 text-sm text-gray-800 space-y-4">
   <!-- Title -->
-  <table class="w-full border-collapse text-sm">
+  <table class="w-full border-collapse table-fixed text-sm">
     <tbody>
       <tr>
         <th class="text-left align-top pr-4 py-1 w-32">Title:</th>
-        <td class="py-1 font-semibold">{{ a.title }}</td>
+        <td class="py-1 font-semibold break-words break-all">{{ a.title }}</td>
       </tr>
       <tr>
         <th class="text-left align-top pr-4 py-1">Date:</th>
-        <td class="py-1">{{ $root.$dj(a.starttime).format('YYYY MMM DD dd h:mma') }}</td>
+        <td class="py-1 break-words break-all">{{ $root.$dj(a.starttime).format('YYYY MMM DD dd h:mma') }}</td>
       </tr>
       <tr>
         <th class="text-left align-top pr-4 py-1">Mode / Location:</th>
-        <td class="py-1">
+        <td class="py-1 break-words break-all">
           {{ mode_string(a) }}
-          <div v-if="a.location" class="text-gray-600">{{ a.location }}</div>
+          <div v-if="a.location" class="text-gray-600 break-words break-all">{{ a.location }}</div>
-          <div v-if="a.location_irl" class="text-gray-600">{{ a.location_irl }}</div>
+          <div v-if="a.location_irl" class="text-gray-600 break-words break-all">{{ a.location_irl }}</div>
         </td>
       </tr>
       <tr v-if="a.desc">
         <th class="text-left align-top pr-4 py-1">Description:</th>
-        <td class="py-1" v-html="a.desc"></td>
+        <td class="py-1 break-words break-all" v-html="a.desc"></td>
       </tr>
       <tr v-if="host">
         <th class="text-left align-top pr-4 py-1">Hosts:</th>
-        <td class="py-1">{{ host }}</td>
+        <td class="py-1 break-words break-all">{{ host }}</td>
       </tr>
       <tr>
         <th class="text-left align-top pr-4 py-1">Attendees:</th>
-        <td class="py-1">{{ user }}</td>
+        <td class="py-1 break-words break-all">{{ user }}</td>
       </tr>
       <tr v-if="survey">
         <th class="text-left align-top pr-4 py-1">Survey Results:</th>
-        <td class="py-1" v-html="survey"></td>
+        <td class="py-1 break-words break-all" v-html="survey"></td>
       </tr>
     </tbody>
   </table>
@@ -2102,39 +2102,39 @@ const ActivityInfoReportTable = Vue.component('activityinforeport_table', {
         mode_string: function(a) { return _.findWhere(this.$root.modes_menu, { 'id': a.mode })['string'] },
     },
     template: `<div class="bg-white rounded-md shadow-md p-4 text-sm text-gray-800 space-y-2">
-  <table class="w-full border-collapse">
+  <table class="w-full border-collapse table-fixed">
     <tbody>
       <tr>
         <th class="text-left align-top pr-4 py-1 w-28">Title:</th>
-        <td class="py-1 font-semibold">{{ a.title }}</td>
+        <td class="py-1 font-semibold break-words break-all">{{ a.title }}</td>
       </tr>
       <tr>
         <th class="text-left align-top pr-4 py-1">Date:</th>
-        <td class="py-1">{{ $root.$dj(a.starttime).format('YYYY MMM DD dd h:mma') }}</td>
+        <td class="py-1 break-words break-all">{{ $root.$dj(a.starttime).format('YYYY MMM DD dd h:mma') }}</td>
       </tr>
       <tr>
         <th class="text-left align-top pr-4 py-1">Mode / Location:</th>
-        <td class="py-1">
+        <td class="py-1 break-words break-all">
           {{ mode_string(a) }}
-          <div v-if="a.location">{{ a.location }}</div>
+          <div v-if="a.location" class="break-words break-all">{{ a.location }}</div>
-          <div v-if="a.location_irl">{{ a.location_irl }}</div>
+          <div v-if="a.location_irl" class="break-words break-all">{{ a.location_irl }}</div>
         </td>
       </tr>
       <tr v-if="a.desc">
         <th class="text-left align-top pr-4 py-1">Description:</th>
-        <td class="py-1" v-html="a.desc"></td>
+        <td class="py-1 break-words break-all" v-html="a.desc"></td>
       </tr>
       <tr v-if="host">
         <th class="text-left align-top pr-4 py-1">Hosts:</th>
-        <td class="py-1">{{ host }}</td>
+        <td class="py-1 break-words break-all">{{ host }}</td>
       </tr>
       <tr>
         <th class="text-left align-top pr-4 py-1">Attendees:</th>
-        <td class="py-1">{{ user }}</td>
+        <td class="py-1 break-words break-all">{{ user }}</td>
       </tr>
       <tr v-if="survey">
         <th class="text-left align-top pr-4 py-1">Survey Results:</th>
-        <td class="py-1" v-html="survey"></td>
+        <td class="py-1 break-words break-all" v-html="survey"></td>
       </tr>
     </tbody>
   </table>
@@ -2248,18 +2248,50 @@ const ActivityReport = Vue.component('activityreport', {
             var result = ""
             if (this.answers2[id]) {
                 _.each( this.answers2[id], function (qlist) {
-                    result += "<b class='survey_q'>" + qlist[0]['question'] + "</b><br />\n<ul>"
+                    // try to build numeric histogram 1–5
+                    var nums = []
                     _.each( qlist, function(qanswer) {
-                        result += "<li>" + qanswer['answer'] + "</li>\n"
+                        var v = parseInt(qanswer['answer'])
+                        if (!isNaN(v) && v>=1 && v<=5) { nums.push(v) }
                     })
-                    result += "</ul>\n"
+                    result += "<div style=\"margin:8px 0;\">"
+                    result += "<b class='survey_q'>" + qlist[0]['question'] + "</b><br/>"
+                    if (nums.length) {
+                        var counts = [0,0,0,0,0,0] // index 1..5
+                        var sum = 0
+                        _.each(nums, function(v){ counts[v]+=1; sum+=v })
+                        var maxc = _.max(counts.slice(1)) || 1
+                        var avg = (sum/nums.length).toFixed(2)
+                        // table-based bars with inline width; good for copy/paste
+                        result += "<table style=\"border-collapse:collapse; margin-top:4px;\">"
+                        for (var i=1;i<=5;i++) {
+                            var c = counts[i]
+                            var width = Math.round((c/maxc)*200) // px
+                            result += "<tr>"
+                                  + "<td style=\"padding:2px 6px 2px 0; font-weight:600; color:#374151;\">"+i+"</td>"
+                                  + "<td style=\"padding:2px 6px;\">"
+                                  +   "<div style=\"width:200px; height:10px; background:#e5e7eb; display:inline-block; vertical-align:middle;\">"
+                                  +     "<div style=\"height:10px; width:"+width+"px; background:#3b82f6;\"></div>"
+                                  +   "</div>"
+                                  +   "<span style=\"display:inline-block; min-width:28px; margin-left:6px; color:#374151;\">"+c+"</span>"
+                                  + "</td>"
+                                  + "</tr>"
+                        }
+                        result += "</table>"
+                        result += "<div style=\"font-size:12px; color:#6b7280; margin-top:2px;\">Responses: "+nums.length+", Average: "+avg+"</div>"
+                    } else {
+                        // fallback: list non-numeric answers
+                        result += "<ul>"
+                        _.each( qlist, function(qanswer) {
+                            result += "<li>" + (qanswer['answer']||'') + "</li>\n"
+                        })
+                        result += "</ul>\n"
+                    }
+                    result += "</div>"
                 })
                 return result
             }
             return "<i>no survey results?</i>"
-            var answers = _.find(this.activities, function(x) { return x.id == id } )
-            return "Surveys"
-            return _.reduce( self.hosts_by_sesid[id], function(mem,val) { if (val.name) { return mem + val.name + ", " } return mem }, '')
         },
     },
     computed: {

style.css

@@ -41,3 +41,21 @@ ol {
   list-style-type: decimal!important;
   list-style-position: inside!important;
 }
+
+/* Report page: prevent long URLs or tokens from causing horizontal scroll */
+.activityreport {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.activityreport table,
+.activityreport td,
+.activityreport th,
+.activityreport p,
+.activityreport li,
+.activityreport div,
+.activityreport span,
+.activityreport a,
+.activityreport code {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}