Add events section to hackathons (#7316)

zoek1 · thelostone-mc · web-flow · commit ad917f064240 · 2020-09-30T16:28:25.000+05:30
* Add events section to hackathons

* Include migration and unescape html for events

* Fix migration error

* update migration

Co-authored-by: Aditya Anand M C &lt;aditya.anandmc@gmail.com&gt;
diff --git a/app/app/settings.py b/app/app/settings.py
@@ -874,5 +874,7 @@ def callback(request):
 PHONE_SALT = env('PHONE_SALT', default='THIS_IS_INSECURE_CHANGE_THIS_PLEASE')
 
 HYPERCHARGE_BOUNTIES_PROFILE_HANDLE = env('HYPERCHARGE_BOUNTIES_PROFILE', default='gitcoinbot')
+ADDEVENT_CLIENT_ID = env('ADDEVENT_CLIENT_ID', default='')
+ADDEVENT_API_TOKEN = env('ADDEVENT_API_TOKEN', default='')
 
-BRIGHTID_PRIVATE_KEY = env('BRIGHTID_PRIVATE_KEY', default='wrong-private-key')
+BRIGHTID_PRIVATE_KEY = env('BRIGHTID_PRIVATE_KEY', default='wrong-private-key')
diff --git a/app/app/urls.py b/app/app/urls.py
@@ -293,6 +293,7 @@
     path('api/v0.1/hackathon/<str:hackathon>/save/', dashboard.views.save_hackathon, name='save_hackathon'),
     path('api/v1/hackathon/<str:hackathon>/prizes', dashboard.views.hackathon_prizes, name='hackathon_prizes_api'),
     path('api/v0.1/hackathon/<str:hackathon>/showcase/', dashboard.views.showcase, name='hackathon_showcase'),
+    path('api/v0.1/hackathon/<str:hackathon>/events/', dashboard.views.events, name='hackathon_events'),
     path('api/v0.1/projects/<int:project_id>', dashboard.views.get_project, name='project_context'),
     # action URLs
     url(r'^funder', retail.views.funder_bounties_redirect, name='funder_bounties_redirect'),
diff --git a/app/assets/v2/images/hackathon/check.svg b/app/assets/v2/images/hackathon/check.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="8" fill="#17E7DA"/>
+<path d="M51 22C35.536 22 23 34.536 23 50C23 65.464 35.536 78 51 78C66.464 78 79 65.464 79 50C79 34.536 66.464 22 51 22ZM51 27.4194C63.4794 27.4194 73.5806 37.5187 73.5806 50C73.5806 62.4794 63.4813 72.5806 51 72.5806C38.5206 72.5806 28.4194 62.4813 28.4194 50C28.4194 37.5206 38.5187 27.4194 51 27.4194ZM66.8295 42.1269L64.2851 39.562C63.7582 39.0308 62.9003 39.0273 62.3691 39.5543L46.41 55.3851L39.6593 48.5797C39.1324 48.0485 38.2746 48.045 37.7434 48.5719L35.1783 51.1163C34.6471 51.6432 34.6436 52.501 35.1706 53.0324L45.4201 63.3648C45.947 63.896 46.8049 63.8995 47.3361 63.3725L66.8219 44.043C67.353 43.516 67.3564 42.6581 66.8295 42.1269V42.1269Z" fill="white"/>
+</svg>
diff --git a/app/assets/v2/images/hackathon/demo.png b/app/assets/v2/images/hackathon/demo.png
diff --git a/app/assets/v2/images/hackathon/demo.svg b/app/assets/v2/images/hackathon/demo.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="8" fill="#8948FF"/>
+<path d="M76.35 27H23.65C21.0828 27 19 29.0996 19 31.6875V62.9375C19 65.5254 21.0828 67.625 23.65 67.625H47.3941V70.75H31.8941C30.1794 70.75 28.7941 72.1465 28.7941 73.875C28.7941 75.6035 30.1794 77 31.8941 77H69.0941C70.8087 77 72.1941 75.6035 72.1941 73.875C72.1941 72.1465 70.8087 70.75 69.0941 70.75H53.5941V67.625H76.35C78.9172 67.625 81 65.5254 81 62.9375V31.6875C81 29.0996 78.9172 27 76.35 27ZM74.8 61.375H25.2V33.25H74.8V61.375Z" fill="white"/>
+</svg>
diff --git a/app/assets/v2/images/hackathon/formation.svg b/app/assets/v2/images/hackathon/formation.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="8" fill="#25E899"/>
+<path d="M62.4559 30.4375C57.274 30.4375 52.6151 27.0625 45.3791 27.0625C42.0778 27.0625 39.2299 27.7461 36.8655 28.6622C37.0999 27.9588 37.177 27.2126 37.0915 26.4762C36.8157 24.0645 34.8223 22.1681 32.4001 22.0109C29.4513 21.8196 27 24.1548 27 27.0625C27 28.936 28.0185 30.5706 29.5312 31.446V74.3125C29.5312 75.2445 30.2867 76 31.2188 76H32.9062C33.8383 76 34.5938 75.2445 34.5938 74.3125V65.5118C38.5877 63.6896 42.1093 62.5 48.0754 62.5C53.2573 62.5 57.9162 65.875 65.1522 65.875C71.3199 65.875 75.907 63.4896 78.71 61.6582C80.14 60.724 81 59.1303 81 57.4222V32.1183C81 28.484 77.2808 26.0256 73.9437 27.4653C70.1571 29.099 66.1965 30.4375 62.4559 30.4375ZM75.9375 57.4375C73.6401 59.0629 69.5225 60.8125 65.1522 60.8125C58.8298 60.8125 54.3941 57.4375 48.0754 57.4375C43.5022 57.4375 37.9104 58.4292 34.5938 59.9687V35.5C36.8913 33.8745 41.0088 32.125 45.3791 32.125C51.7014 32.125 56.1371 35.5 62.4559 35.5C67.0196 35.5 72.6146 33.6684 75.9375 32.125V57.4375Z" fill="white"/>
+</svg>
diff --git a/app/assets/v2/images/hackathon/office.svg b/app/assets/v2/images/hackathon/office.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="8" fill="#0090FF"/>
+<path d="M51 20C34.4274 20 21 33.4274 21 50C21 66.5726 34.4274 80 51 80C67.5726 80 81 66.5726 81 50C81 33.4274 67.5726 20 51 20ZM51 74.1935C37.6331 74.1935 26.8065 63.3669 26.8065 50C26.8065 36.6331 37.6331 25.8065 51 25.8065C64.3669 25.8065 75.1935 36.6331 75.1935 50C75.1935 63.3669 64.3669 74.1935 51 74.1935ZM58.4758 61.5645L48.2056 54.1008C47.8306 53.8226 47.6129 53.3871 47.6129 52.9274V33.0645C47.6129 32.2661 48.2661 31.6129 49.0645 31.6129H52.9355C53.7339 31.6129 54.3871 32.2661 54.3871 33.0645V50.2056L62.4677 56.0847C63.121 56.5564 63.254 57.4637 62.7823 58.1169L60.5081 61.25C60.0363 61.8911 59.129 62.0363 58.4758 61.5645Z" fill="white"/>
+</svg>
diff --git a/app/assets/v2/images/hackathon/pitch.svg b/app/assets/v2/images/hackathon/pitch.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="8" fill="#FF00B8"/>
+<path d="M59.5455 69.1562V72.4375C59.5455 73.662 58.7484 74.7032 57.6364 75.0893V76.1875C57.6364 77.7408 56.3543 79 54.7727 79H45.2273C43.6457 79 42.3636 77.7408 42.3636 76.1875V75.0893C41.2516 74.7032 40.4545 73.662 40.4545 72.4375V69.1562C40.4545 68.3796 41.0956 67.75 41.8864 67.75H58.1136C58.9044 67.75 59.5455 68.3796 59.5455 69.1562ZM42.3636 39.625C42.3636 35.4895 45.7893 32.125 50 32.125C51.0544 32.125 51.9091 31.2855 51.9091 30.25C51.9091 29.2145 51.0544 28.375 50 28.375C43.6839 28.375 38.5455 33.4217 38.5455 39.625C38.5455 40.6605 39.4002 41.5 40.4545 41.5C41.5088 41.5 42.3636 40.6605 42.3636 39.625ZM50 24.625C58.4399 24.625 65.2727 31.3345 65.2727 39.625C65.2727 48.719 60.8123 46.7121 55.6103 58.375H44.3897C39.18 46.6949 34.7273 48.7503 34.7273 39.625C34.7273 31.3357 41.5587 24.625 50 24.625ZM50 19C38.4029 19 29 28.2347 29 39.625C29 51.5466 35.1684 50.3525 39.8002 62.204C40.2238 63.2879 41.2881 64 42.4701 64H57.5298C58.7118 64 59.7761 63.2877 60.1997 62.204C64.8316 50.3525 71 51.5466 71 39.625C71 28.2347 61.5971 19 50 19Z" fill="white"/>
+</svg>
diff --git a/app/assets/v2/images/hackathon/workshop.svg b/app/assets/v2/images/hackathon/workshop.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="8" fill="#FFCE08"/>
+<path d="M71.3891 30.0949L61.7776 20.5926C60.7461 19.5729 59.3472 19 57.8885 19H34.5C31.4624 19 29 21.4344 29 24.4375V71.5625C29 74.5656 31.4624 77 34.5 77H67.5C70.5376 77 73 74.5656 73 71.5625V33.9398C73 32.4976 72.4205 31.1146 71.3891 30.0949ZM67.0552 33.5H58.3333V24.8773L67.0552 33.5ZM34.5 71.5625V24.4375H52.8333V36.2188C52.8333 37.7203 54.0645 38.9375 55.5833 38.9375H67.5V71.5625H34.5ZM46.1505 58.5221L42.3895 55.25L46.1504 51.9779C46.2519 51.8897 46.3344 51.7822 46.393 51.6619C46.4516 51.5416 46.4852 51.4108 46.4916 51.2774C46.4981 51.1439 46.4774 51.0106 46.4306 50.8853C46.3839 50.7599 46.3122 50.6452 46.2197 50.5478L44.2256 48.4449C43.8379 48.0356 43.1985 48.03 42.8004 48.3994L36.1935 54.5227C35.7692 54.9163 35.7691 55.5838 36.1937 55.9773L42.8004 62.1007C42.9867 62.2744 43.2332 62.3709 43.4893 62.3704C43.6274 62.3709 43.7641 62.3431 43.8908 62.2889C44.0175 62.2347 44.1316 62.1551 44.2257 62.0553L46.2198 59.9524C46.3123 59.855 46.384 59.7402 46.4308 59.6149C46.4775 59.4895 46.4982 59.3562 46.4918 59.2228C46.4853 59.0893 46.4517 58.9585 46.3931 58.8382C46.3345 58.7178 46.252 58.6103 46.1505 58.5221ZM55.808 44.0391L53.0121 43.2366C52.8849 43.2001 52.7517 43.1886 52.6201 43.203C52.4884 43.2174 52.3609 43.2572 52.2449 43.3203C52.1288 43.3834 52.0265 43.4685 51.9437 43.5708C51.861 43.673 51.7994 43.7903 51.7626 43.9161L45.5046 65.2257C45.3496 65.7536 45.6579 66.3077 46.1919 66.461L48.988 67.2635C49.5243 67.417 50.0831 67.1101 50.2376 66.584L56.4952 45.2745C56.6503 44.7466 56.342 44.1924 55.808 44.0391ZM65.8063 54.5227L59.1997 48.3993C58.7957 48.0247 58.1571 48.0408 57.7744 48.4447L55.7803 50.5476C55.6878 50.645 55.6161 50.7597 55.5694 50.8851C55.5227 51.0104 55.5019 51.1438 55.5084 51.2772C55.5149 51.4106 55.5484 51.5414 55.607 51.6617C55.6657 51.7821 55.7482 51.8896 55.8496 51.9778L59.6105 55.25L55.8496 58.5221C55.7481 58.6103 55.6656 58.7178 55.607 58.8381C55.5484 58.9584 55.5148 59.0892 55.5084 59.2226C55.5019 59.3561 55.5226 59.4894 55.5694 59.6147C55.6161 59.7401 55.6878 59.8548 55.7803 59.9522L57.7744 62.0551C57.8649 62.1507 57.9736 62.2277 58.0943 62.2817C58.2149 62.3357 58.3452 62.3656 58.4775 62.3698C58.6099 62.3741 58.7418 62.3525 58.8657 62.3063C58.9896 62.26 59.1031 62.1902 59.1997 62.1006H59.1996L65.8065 55.9772C66.2308 55.5837 66.2308 54.9162 65.8063 54.5227Z" fill="white"/>
+</svg>
diff --git a/app/assets/v2/js/pages/dashboard-hackathon.js b/app/assets/v2/js/pages/dashboard-hackathon.js
@@ -911,6 +911,9 @@
             case 3:
               newPathName = 'participants';
               break;
+            case 4:
+              newPathName = 'events';
+              break;
             case 5:
               newPathName = 'showcase';
               break;
diff --git a/app/assets/v2/js/vue-components.js b/app/assets/v2/js/vue-components.js
@@ -402,6 +402,68 @@ Vue.component('project-directory', {
 });
 
 
+Vue.component('events', {
+  delimiters: [ '[[', ']]' ],
+  props: [],
+  data: function() {
+    return {
+      events: []
+    };
+  },
+  methods: {
+    nth: function(d) {
+      if (d > 3 && d < 21)
+        return 'th';
+      switch (d % 10) {
+        case 1: return 'st';
+        case 2: return 'nd';
+        case 3: return 'rd';
+        default: return 'th';
+      }
+    },
+    fetchEvents: async function() {
+      const response = await fetchData(`/api/v0.1/hackathon/${document.hackathonObj.id}/events/`, 'GET');
+
+      this.$set(this, 'events', response.events.events);
+    },
+    formatDate: function(event) {
+      const monthNames = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+      ];
+      const date = event.date_start.split('/');
+      const time = event.date_start_time;
+      const newDate = new Date(`${date[2]}-${date[0]}-${date[1]}T${time}`);
+      const month = monthNames[newDate.getMonth()];
+      const day = newDate.getDay();
+      const hours = newDate.getHours();
+      const ampm = event.date_start_ampm.toLowerCase();
+
+      return `${month} ${day}${this.nth(newDate.getDay())}, ${hours} ${ampm}  ET`;
+    },
+    eventTag: function(event) {
+      const text = event.eventname;
+
+      if (text.includes('formation')) {
+        return 'formation';
+      } else if (text.includes('pitch')) {
+        return 'pitch';
+      } else if (text.includes('check')) {
+        return 'check';
+      } else if (text.includes('office')) {
+        return 'office';
+      } else if (text.includes('demo')) {
+        return 'demo';
+      }
+
+      return 'workshop';
+    }
+  },
+  mounted() {
+    this.fetchEvents();
+  }
+});
+
 Vue.component('showcase', {
   delimiters: [ '[[', ']]' ],
   props: [],
diff --git a/app/dashboard/migrations/0151_hackathonevent_calendar_id.py b/app/dashboard/migrations/0151_hackathonevent_calendar_id.py
@@ -0,0 +1,18 @@
+# Generated by Django 2.2.4 on 2020-09-30 05:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('dashboard', '0150_auto_20200904_1505'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='hackathonevent',
+            name='calendar_id',
+            field=models.CharField(blank=True, max_length=255),
+        ),
+    ]
diff --git a/app/dashboard/models.py b/app/dashboard/models.py
@@ -4921,6 +4921,7 @@ class HackathonEvent(SuperModel):
     objects = HackathonEventQuerySet.as_manager()
     display_showcase = models.BooleanField(default=False)
     showcase = JSONField(default=dict, blank=True, null=True)
+    calendar_id = models.CharField(max_length=255, blank=True)
 
     def __str__(self):
         """String representation for HackathonEvent.
diff --git a/app/dashboard/templates/dashboard/index-vue.html b/app/dashboard/templates/dashboard/index-vue.html
@@ -622,6 +622,60 @@ <h6 class="font-weight-bold mb-3">Invite [[numUsers]] Users to the Bounty</h6>
                     </div>
                   </user-directory>
                 </b-tab>
+              <b-tab class="col-12" title-item-class="navigation">
+                <template v-slot:title>
+                    <div class="mt-4">
+                      {% trans "Events" %}
+                    </div>
+                </template>
+                <div id="events">
+                  <events inline-template>
+                    <div style="background-color: white; padding: 5%;" class="container">
+                      <div>
+                        <h1 class="font-bigger-4 font-weight-bold">Events Schedule</h1>
+                        {% if is_staff %}
+                          <button class="btn btn-lg gc-border-blue">Add event</button>
+                        {% endif %}
+                        <hr style="color: black; height: 3px">
+                         <div class="d-flex justify-content-between my-5" v-for="event in events">
+                           <div class="d-flex col-8">
+                             <div>
+                               <img src="{% static 'v2/images/hackathon/formation.svg' %}" alt="" v-if="eventTag(event) == 'formation'">
+                               <img src="{% static 'v2/images/hackathon/pitch.svg' %}" alt="" v-if="eventTag(event) == 'pitch'">
+                               <img src="{% static 'v2/images/hackathon/check.svg' %}" alt="" v-if="eventTag(event) == 'check'">
+                               <img src="{% static 'v2/images/hackathon/workshop.svg' %}" alt="" v-if="eventTag(event) == 'workshop'">
+                               <img src="{% static 'v2/images/hackathon/office.svg' %}" alt="" v-if="eventTag(event) == 'office'">
+                               <img src="{% static 'v2/images/hackathon/demo.svg' %}" alt="" v-if="eventTag(event) == 'demo'">
+                             </div>
+                             <div class="ml-4">
+                               <p class="m-0" v-if="eventTag(event) == 'formation'" style="color: #1BD389">Team formation</p>
+                               <p class="m-0" v-if="eventTag(event) == 'pitch'" style="color: #FF00B8">Pitch Day</p>
+                               <p class="m-0" v-if="eventTag(event) == 'check'" style="color: #00DACD">Mid hack Check-In</p>
+                               <p class="m-0" v-if="eventTag(event) == 'office'" style="color: #0090FF">Sponsor Office Hours</p>
+                               <p class="m-0" v-if="eventTag(event) == 'workshop'" style="color: #D9AE00">Workshop</p>
+                               <p class="m-0" v-if="eventTag(event) == 'demo'" style="color: #8948FF">Demo Day</p>
+                               <p class="m-0 font-weight-bold">[[formatDate(event)]]</p>
+                               <h3 class="font-title"><b>[[event.title]]</b> [[ event.organizer ? `with ${event.organizer}` : '']]</h3>
+                               <p class="m-0" v-html="event.description" class="font-body"></p>
+                             </div>
+                           </div>
+                           <div>
+                             <div title="Add to Calendar" class="addeventatc">
+                                Add to Calendar
+                                <span class="start">[[event.date_start]] [[event.date_start_time]]</span>
+                                <span class="end">[[event.date_end]] [[event.date_end_time]]</span>
+                                <span class="timezone">[[event.timezone]]</span>
+                                <span class="title">[[event.title]]</span>
+                                <span class="description">[[event.description]]</span>
+                                <span class="location">[[event.location]]</span>
+                            </div>
+                           </div>
+                         </div>
+                      </div>
+                    </div>
+                  </events>
+                </div>
+              </b-tab>
               <b-tab class="col-12" title-item-class="navigation" v-if="hackHasEnded">
                 <template v-slot:title>
                     <div class="mt-4">
@@ -823,6 +877,7 @@ <h4 class="font-bigger-1 font-weight-bold mb-3">[[hackathon.name]] Wall of Fame<
     {% include 'shared/analytics.html' %}
     {% include 'shared/footer_scripts.html' %}
     {% include 'shared/footer.html' %}
+    <script type="text/javascript" src="https://addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>
     <script type="text/x-template" id="select2-template">
       <select>
         <slot></slot>
diff --git a/app/dashboard/views.py b/app/dashboard/views.py
@@ -28,6 +28,7 @@
 from datetime import datetime, timedelta
 from decimal import Decimal
 
+import requests
 from django.conf import settings
 from django.contrib import messages
 from django.contrib.admin.views.decorators import staff_member_required
@@ -4102,9 +4103,9 @@ def hackathon(request, hackathon='', panel='prizes'):
         active_tab = 1
     elif panel == "projects":
         active_tab = 2
-    elif panel == "chat":
-        active_tab = 3
     elif panel == "participants":
+        active_tab = 3
+    elif panel == "events":
         active_tab = 4
     elif panel == "showcase":
         active_tab = 5
@@ -6075,3 +6076,43 @@ def showcase(request, hackathon):
     return JsonResponse({
         'success': True,
     })
+
+
+def events(request, hackathon):
+    hackathon_event = HackathonEvent.objects.filter(pk=hackathon).first()
+
+    if not hackathon_event:
+        return JsonResponse({
+            'error': True,
+            'msg': f'No exists Hackathon Event with id {hackathon}'
+        }, status=404)
+
+    calendar_unique = hackathon_event.calendar_id
+    token = settings.ADDEVENT_API_TOKEN
+    endpoint = f'https://www.addevent.com/api/v1/oe/events/list/'
+    calendar_endpoint = 'https://www.addevent.com/api/v1/me/calendars/list/'
+
+    calendar_response = requests.get(calendar_endpoint, {
+        'token': token,
+    })
+
+    calendars = calendar_response.json()["calendars"]
+    calendar_id = None
+
+    for calendar in calendars:
+        if calendar['uniquekey'] == calendar_unique:
+            calendar_id = calendar['id']
+            break
+
+    upcoming = hackathon_event.start_date.strftime('%Y-%m-%d %H:%M:%S')
+    response = requests.get(endpoint, {
+        'token': token,
+        'calendar_id': calendar_id,
+        'upcoming': upcoming
+    })
+
+    events = response.json()
+
+    return JsonResponse({
+        'events': events,
+    })
