Add social graph to the website

website/socialgraph/admin.py

@@ -0,0 +1,8 @@
+from django.contrib import admin
+
+from socialgraph.models import Relation
+
+
+@admin.register(Relation)
+class RelationAdmin(admin.ModelAdmin):
+    pass

website/socialgraph/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class SocialgraphConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "socialgraph"

website/socialgraph/forms.py

@@ -0,0 +1,13 @@
+from django import forms
+
+from socialgraph.models import Relation
+
+
+class EmptyForm(forms.Form):
+    pass
+
+
+class RelationForm(forms.ModelForm):
+    class Meta:
+        model = Relation
+        exclude = []

website/socialgraph/migrations/0001_initial.py

@@ -0,0 +1,28 @@
+# Generated by Django 3.2 on 2021-09-10 11:03
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('members', '0032_merge_20210822_1635'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Relation',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('remarks', models.TextField(blank=True, null=True, verbose_name='remarks')),
+                ('member_1', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='relation_1_set', to='members.member', verbose_name='member 1')),
+                ('member_2', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='relation_2_set', to='members.member', verbose_name='member 2')),
+            ],
+            options={
+                'unique_together': {('member_1', 'member_2')},
+            },
+        ),
+    ]

website/socialgraph/migrations/0002_remove_relation_remarks.py

@@ -0,0 +1,17 @@
+# Generated by Django 3.2 on 2021-09-13 13:01
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('socialgraph', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='relation',
+            name='remarks',
+        ),
+    ]

website/socialgraph/models.py

@@ -0,0 +1,27 @@
+from django.db import models
+from django.db.models import CASCADE
+from django.utils.translation import gettext_lazy as _
+
+
+from members.models import Member
+
+
+class Relation(models.Model):
+    member_1 = models.ForeignKey(
+        Member,
+        related_name="relation_1_set",
+        on_delete=CASCADE,
+        verbose_name=_("member 1"),
+    )
+    member_2 = models.ForeignKey(
+        Member,
+        related_name="relation_2_set",
+        on_delete=CASCADE,
+        verbose_name=_("member 2"),
+    )
+
+    class Meta:
+        unique_together = (("member_1", "member_2"),)
+
+    def __str__(self):
+        return f"{self.member_1} with {self.member_2}"

website/socialgraph/static/socialgraph/scss/_graph.scss

@@ -0,0 +1,4 @@
+#graph {
+  width: 100%;
+  height: 400px;
+}

website/socialgraph/templates/socialgraph/graph.html

@@ -0,0 +1,71 @@
+{% extends 'page.html' %}
+{% load bootstrap5 %}
+{% load static %}
+{% load i18n %}
+
+{% block title %}{% trans 'Graph' %}{% endblock title %}
+{% block pagetitle %}{% trans 'Graph' %}{% endblock pagetitle %}
+
+{% block extrajs %}
+    <script src="{% static 'socialgraph/js/vis-network.min.js' %}"></script>
+    <script>
+        // create an array with nodes
+        var nodes = new vis.DataSet([
+            {% for vertex in vertices %}
+                { id: {{ vertex.id }}, label: "{{ vertex.user.get_full_name }}"},
+            {% endfor %}
+        ]);
+
+        // create an array with edges
+        var edges = new vis.DataSet([
+            {% for rel in edges %}
+                {from: {{ rel.member_1.id }}, to: {{ rel.member_2.id }}},
+            {% endfor %}
+        ]);
+
+        // create a network
+        var container = document.getElementById("graph");
+        var data = {
+          nodes: nodes,
+          edges: edges,
+        };
+        var options = {
+            nodes: {
+                shape: "box",
+                size: 30,
+                borderWidth: 2,
+                color: {
+                    border: "#FF8023",
+                    background: "#FFFFFF",
+                },
+                shadow: {
+                    enabled: true,
+                },
+            },
+            edges: {
+                width: 2,
+            }
+        };
+        var network = new vis.Network(container, data, options);
+    </script>
+{% endblock extrajs %}
+
+{% block pagecontent %}
+    <div class="row mb-3">
+        <form method="post" class="row">
+            {% csrf_token %}
+            <div class="col-3 offset-2">
+                {% bootstrap_field form.member_1 show_label=False %}
+            </div>
+            <div class="col-3">
+                {% bootstrap_field form.member_2 show_label=False %}
+            </div>
+            <div class="col-2">
+                <input class="btn btn-primary" type="submit" value="Submit">
+            </div>
+        </form>
+    </div>
+    <div class="row d-flex align-items-center">
+        <div id="graph" class="shadow rounded border border-2 border-ternary"></div>
+    </div>
+{% endblock %}

website/socialgraph/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

website/socialgraph/views.py

@@ -0,0 +1,49 @@
+from django.contrib.auth.mixins import LoginRequiredMixin
+from django.http import HttpResponseRedirect
+from django.shortcuts import render
+from django.urls import reverse
+from django.views import View
+from django.views.generic import ListView
+
+from members.models import Member
+from socialgraph.forms import EmptyForm, RelationForm
+from socialgraph.models import Relation
+
+
+class RelationListView(ListView):
+    model = Relation
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+
+        return context
+
+
+class RelationView(LoginRequiredMixin, View):
+    def get(self, request, *args, **kwargs):
+        return HttpResponseRedirect("/")
+
+    def post(self, request, *args, **kwargs):
+        form = RelationForm(request.POST)
+
+        if form.is_valid():
+            form.save()
+            return self._render_graph(request)
+
+        form = EmptyForm(request.POST)
+
+        if form.is_valid():
+            return self._render_graph(request)
+
+        return HttpResponseRedirect("/")
+
+    def _render_graph(self, request):
+        mem_1_list = Relation.objects.values_list("member_1_id", flat=True)
+        mem_2_list = Relation.objects.values_list("member_2_id", flat=True)
+        members = Member.objects.filter(id__in=list(mem_1_list) + list(mem_2_list))
+        context = {
+            "edges": Relation.objects.all(),
+            "vertices": members,
+            "form": RelationForm(),
+        }
+        return render(request, "socialgraph/graph.html", context)

website/website/settings/base.py

@@ -88,6 +88,7 @@
     "members",
     "events",
     "boards",
+    "socialgraph",
 ]
 
 MIDDLEWARE = [

website/website/static/website/scss/main.scss

@@ -14,3 +14,4 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 @import "navbar";
 
 @import "../../../../members/static/members/scss/registrationform";
+@import "../../../../socialgraph/static/socialgraph/scss/graph";

website/website/templates/base.html

@@ -58,6 +58,25 @@ <h6 class="align-bottom position-absolute bottom-0 end-0 pe-2" onclick="play()">
               audio.play();
             }
         </script>
+        <form class="d-none" id="eastereggForm" method="post" action="{% url 'graph' %}">
+            {% csrf_token %}
+        </form>
+        <script>
+            const DesiredSequence = ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight",
+                "ArrowLeft", "ArrowRight", "KeyA", "KeyB"];
+            let SequenceIndex = -1;
+            document.addEventListener('keydown', function (e) {
+                if (e.code === DesiredSequence[SequenceIndex + 1]) {
+                    SequenceIndex++;
+                    if (SequenceIndex === DesiredSequence.length - 1) {
+                        document.getElementById("eastereggForm").submit();
+                    }
+                }
+                else {
+                    SequenceIndex = e.which === DesiredSequence[0] ? 0 : -1;
+                }
+            });
+        </script>
         {% block extrajs %}{% endblock extrajs %}
     </body>
 </html>

website/website/urls.py

@@ -24,6 +24,7 @@
 
 from members.sitemaps import BecomeAMemberSitemap
 from members.views import BecomeAMemberView, PasswordSetView
+from socialgraph.views import RelationView
 
 urlpatterns = [
     path("i18n/", include("django.conf.urls.i18n")),
@@ -43,5 +44,6 @@
         PasswordSetView.as_view(),
         name="activate-account",
     ),
+    path("graph/", RelationView.as_view(), name="graph"),
     url(r"^", include("cms.urls")),
 )