activity: start stubbed out example card, beginning frontend code

completely broken, just need to commit so I can move between devices.

html/admin.html

@@ -768,40 +768,30 @@
                         <span class="col button ~info @low center unfocused max-w-[20%]" id="accounts-send-pwr">{{ .strings.sendPWR }}</span>
                         <span class="col button ~critical @low center max-w-[20%]" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
                     </div>
-                    <div class="card @low accounts-header table-responsive mt-2">
+                    <div class="flex flex-col md:flex-row gap-3">
-                        <table class="table text-base leading-4">
+                        <div class="card @low dark:~d_neutral col max-w-[20%]">
-                            <thead>
+                            <div class="flex-expand">
-                                <tr>
+                                <input type="search" class="field ~neutral @low input settings-section-button justify-between mb-2" id="settings-search" placeholder="{{ .strings.search }}">
-                                    <th><input type="checkbox" value="" id="accounts-select-all"></th>
+                                <button class="button ~neutral @low center -ml-10 rounded-s-none mb-2 settings-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></button>
-                                    <th class="table-inline my-2 grid gap-4 place-items-stretch accounts-header-username">{{ .strings.username }}</th>
+                            </div>
-                                    {{ if .jellyfinLogin }}
+                            <aside class="aside sm ~urge dark:~d_info mb-2 @low" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info dark:~d_warning">R</span> indicates changes require a restart.</aside> 
-                                    <th class="text-center-i grid gap-4 place-items-stretch accounts-header-access-jfa">{{ .strings.accessJFA }}</th>
+                            <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-2"></i></span></span>
-                                    {{ end }}
+                            <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-profiles"><span class="flex">{{ .strings.userProfiles }} <i class="ri-user-line ml-2"></i></span></span>
-                                    <th class="grid gap-4 place-items-stretch accounts-header-email">{{ .strings.emailAddress }}</th>
+                        </div>
-                                    {{ if .telegramEnabled }}
+                        <div class="card ~neutral @low col overflow">
-                                    <th class="text-center-i grid gap-4 place-items-stretch accounts-header-telegram">Telegram</th>
+                            <div class="card ~urge @low">
-                                    {{ end }}
+                                <div class="flex justify-between mb-2">
-                                    {{ if .matrixEnabled }}
+                                    <span class="heading text-2xl activity-title">Account Created: <a href="/fixme" class="activity-url">"hrfee"</a></span>
-                                    <th class="text-center-i grid gap-4 place-items-stretch accounts-header-matrix">Matrix</th>
+                                    <span class="text-sm font-medium activity-time">26/10/23 14:32</span>
-                                    {{ end }}
+                                </div>
-                                    {{ if .discordEnabled }}
+                                <div class="flex justify-between">
-                                    <th class="text-center-i grid gap-4 place-items-stretch accounts-header-discord">Discord</th>
+                                    <div>
-                                    {{ end }}
+                                        <span class="content supra mr-2 activity-source-type">From Invite</span><a href="fixme" class="activity-source">BdBmpGDzuJhHSsboAsYgrE</a>
-                                    {{ if .referralsEnabled }}
+                                    </div>
-                                    <th class="text-center-i grid gap-4 place-items-stretch accounts-header-referrals">{{ .strings.referrals }}</th>
+                                    <div>
-                                    {{ end }}
+                                        <span class="content supra mr-2">Referrer</span><a href="fixme" class="activity-referrer">username</a>
-                                    <th class="grid gap-4 place-items-stretch accounts-header-expiry">{{ .strings.expiry }}</th>
+                                    </div>
-                                    <th class="grid gap-4 place-items-stretch accounts-header-last-active">{{ .strings.lastActiveTime }}</th>
+                                </div>
-                                </tr>
-                            </thead>
-                            <tbody id="accounts-list"></tbody>
-                        </table>
-                        <div class="unfocused h-[100%] my-3" id="accounts-not-found">
-                            <div class="flex flex-col h-[100%] justify-center items-center">
-                                <span class="text-2xl font-medium italic mb-3">{{ .strings.noResultsFound }}</span>
-                                <button class="button ~neutral @low accounts-search-clear">
-                                    <span class="mr-2">{{ .strings.clearSearch }}</span><i class="ri-close-line"></i>
-                                </button>
                             </div>
                         </div>
                     </div>

lang/admin/en-us.json

@@ -130,7 +130,8 @@
         "userPagePage": "User Page: Page",
         "buildTime": "Build Time",  
         "builtBy": "Built By",
-        "loginNotAdmin": "Not an Admin?"
+        "loginNotAdmin": "Not an Admin?",
+        "referrer": "Referrer"
     },
     "notifications": {
         "changedEmailAddress": "Changed email address of {n}.",

ts/admin.ts

@@ -120,6 +120,10 @@ const tabs: { url: string, reloader: () => void }[] = [
         url: "accounts",
         reloader: accounts.reload
     },
+    {
+        url: "activity",
+        reloader: () => {console.log("FIXME: Reload Activity")}
+    },
     {
         url: "settings",
         reloader: settings.reload
@@ -179,6 +183,7 @@ login.onLogin = () => {
         case "settings":
             settings.reload();
             break;
+        // FIXME: Reload activity
     }
 }
 

ts/modules/activity.ts

@@ -0,0 +1,102 @@
+export interface activity {
+    id: string;
+    type: string;
+    user_id: string;
+    source_type: string;
+    source: string;
+    invite_code: string;
+    value: string;
+    time: number;
+}
+
+var activityTypeMoods = {
+    "creation": 1,
+    "deletion": -1,
+    "disabled": -1,
+    "enabled": 1,
+    "contactLinked": 1,
+    "contactUnlinked": -1,
+    "changePassword": 0,
+    "resetPassword": 0,
+    "createInvite": 1,
+    "deleteInvite": -1
+};
+
+var moodColours = ["~warning", "~neutral", "~urge"];
+
+export class Activity { // FIXME: Add "implements"
+    private _card: HTMLElement;
+    private _title: HTMLElement;
+    private _time: HTMLElement;
+    private _sourceType: HTMLElement;
+    private _source: HTMLElement;
+    private _referrer: HTMLElement;
+    private _act: activity;
+
+    get type(): string { return this._act.type; }
+    set type(v: string) {
+        this._act.type = v;
+
+        let mood = activityTypeMoods[v]; // 1 = positive, 0 = neutral, -1 = negative
+        
+        for (let i = 0; i < moodColours.length; i++) {
+            if (i-1 == mood) this._card.classList.add(moodColours[i]);
+            else this._card.classList.remove(moodColours[i]);
+        }
+    }
+
+    get source_type(): string { return this._act.source_type; }
+    set source_type(v: string) {
+        this._act.source_type = v;
+        if (v == "user") {
+            if (this.type == "creation") {
+                this._referrer.innerHTML = `<span class="supra mr-2">${window.lang.strings("referrer")}</span><a href="/accounts/${this._source}">FIXME</a>`;
+            } else if (this.type == "contactLinked" || this.type == "contactUnlinked" || this.type == "changePassword" || this.type == "resetPassword") {
+                // FIXME: Reflect in title
+            }
+        } else if (v == "admin") {
+            // FIXME: Handle contactLinked/Unlinked, creation/deletion, enable/disable, createInvite/deleteInvite
+        } else if (v == "anon") {
+            this._referrer.innerHTML = ``;
+        } else if (v == "daemon") {
+            // FIXME: Handle deleteInvite, disabled, deletion
+        }
+    }
+
+    constructor(act: activity) {
+        this._card = document.createElement("div");
+
+        this._card.classList.add("card", "@low");
+        this._card.innerHTML = `
+        <div class="flex justify-between mb-2">
+            <span class="heading text-2xl activity-title"></span>
+            <span class="text-sm font-medium activity-time" aria-label="${window.lang.strings("date")}"></span>
+        </div>
+        <div class="flex justify-between">
+            <div>
+                <span class="content supra mr-2 activity-source-type"></span><span class="activity-source"></span>
+            </div>
+            <div>
+                <span class="content activity-referrer"></span>
+            </div>
+        </div>
+        `;
+
+        this._title = this._card.querySelector(".activity-title");
+        this._time = this._card.querySelector(".activity-time");
+        this._sourceType = this._card.querySelector(".activity-source-type");
+        this._source = this._card.querySelector(".activity-source");
+        this._referrer = this._card.querySelector(".activity-referrer");
+
+        this.update(act);
+    }
+
+    update = (act: activity) => {
+        // FIXME
+        this._act = act;
+        this.type  = act.type;
+    }
+
+    asElement = () => { return this._card; };
+}
+