implement community basics

public/static/css/rvr.css

@@ -88,10 +88,14 @@ sub {
 }
 
 hr {
-    border: solid #bbbbbb 1px;
+    border: solid #bbbbcc 1px;
     margin: 10px 0;
 }
 
+.normal {
+    font-weight: 400;
+}
+
 .bold {
     font-weight: 700;
 }
@@ -418,13 +422,53 @@ div.buttonContainer>button {
 
 div.box {
     width: 576px;
-    background-color: #eeeeee;
+    background-color: #eeeef4;
     border-radius: 3px;
     margin: 10px auto;
     padding: 10px;
     box-sizing: border-box;
 }
 
+div.gridContainer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    grid-gap: 10px;
+}
+
+div.gridContainer > div {
+    background-color: #eeeef4;
+    border-radius: 3px;
+    padding: 5px 10px;
+}
+
+table {
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+table.fullWidth {
+    width: 100%;
+}
+
+table th {
+    font-weight: bold;
+}
+
+table th, table td {
+    padding: 2px 0;
+    vertical-align: middle;
+}
+
+.choices__inner {
+    box-sizing: border-box;
+}
+
+@media screen and (max-width: 424px) {
+    div.gridContainer {
+        grid-template-columns: auto;
+    }
+}
+
 @media screen and (max-width: 599px) {
     header h1 span {
         display: none;

public/static/js/communities/community_members.js

@@ -0,0 +1,62 @@
+(function () {
+    const element = document.getElementById('new_member_user_id');
+    const choices = new Choices(element, {
+        noResultsText: 'No users found',
+        noChoicesText: 'Start typing to search users'
+    });
+
+    element.addEventListener('search', RVR.debounce(async function (e) {
+        RVR.httpRequest('GET', searchUserUrl.replace('QUERY', encodeURIComponent(e.detail.value)), function () {
+            choices.setChoices(this.response.results, 'value', 'label', true);
+        });
+    }));
+
+    element.addEventListener('choice', function () {
+        choices.setChoices([], 'value', 'label', true);
+        document.getElementById('new_member_button').disabled = false;
+    });
+
+    document.getElementById('new_member_button').addEventListener('click', function () {
+        document.getElementById('loading').style.visibility = 'visible';
+
+        let data = new FormData();
+        data.append('user_id', document.getElementById('new_member_user_id').value);
+
+        RVR.httpRequest('POST', newMemberUrl, function () {
+            window.location.reload();
+        }, data);
+    });
+
+    const ownerCheckboxesButtons = document.getElementsByClassName('member_owner');
+    for (const ownerCheckboxesButton of ownerCheckboxesButtons) {
+        ownerCheckboxesButton.addEventListener('change', function () {
+            document.getElementById('loading').style.visibility = 'visible';
+
+            let data = new FormData();
+            data.append('community_member_id', this.dataset.id);
+            data.append('owner', this.checked ? 1 : 0);
+
+            RVR.httpRequest('POST', editMemberUrl, function () {
+                document.getElementById('loading').style.visibility = 'hidden';
+
+                if (!this.response.success) {
+                    ownerCheckboxesButton.checked = !ownerCheckboxesButton.checked;
+                }
+            }, data);
+        });
+    };
+
+    const deleteButtons = document.getElementsByClassName('delete_member');
+    for (const deleteButton of deleteButtons) {
+        deleteButton.addEventListener('click', function () {
+            document.getElementById('loading').style.visibility = 'visible';
+
+            let data = new FormData();
+            data.append('community_member_id', this.dataset.id);
+
+            RVR.httpRequest('POST', deleteMemberUrl, function () {
+                window.location.reload();
+            }, data);
+        });
+    };
+})();

public/static/js/rvr.js

@@ -193,6 +193,14 @@ var RVR = {
         form.onreset = function () {
             form.elements.submit.disabled = true;
         }
+    },
+
+    debounce: function(func, timeout = 300) {
+        let timer;
+        return (...args) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => { func.apply(this, args); }, timeout);
+        };
     }
 };
 

public/static/package-lock.json

@@ -0,0 +1,57 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@babel/runtime": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.11"
+      }
+    },
+    "choices.js": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/choices.js/-/choices.js-10.2.0.tgz",
+      "integrity": "sha512-8PKy6wq7BMjNwDTZwr3+Zry6G2+opJaAJDDA/j3yxvqSCnvkKe7ZIFfIyOhoc7htIWFhsfzF9tJpGUATcpUtPg==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "fuse.js": "^6.6.2",
+        "redux": "^4.2.0"
+      }
+    },
+    "deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
+    },
+    "fuse.js": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+      "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA=="
+    },
+    "leaflet": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
+      "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
+    },
+    "leaflet.markercluster": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA=="
+    },
+    "redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    }
+  }
+}

public/static/package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "leaflet": "^1.6.0",
-    "leaflet.markercluster": "^1.4.1"
+    "leaflet.markercluster": "^1.4.1",
+    "choices.js": "^10.2.0"
   }
 }