mirror of https://github.com/hrfee/jfa-go.git
activity: start stubbed out example card, beginning frontend code
completely broken, just need to commit so I can move between devices.
This commit is contained in:
parent
5a0677bac8
commit
274324557c
GPG Key ID:
BBC65952848FB1A2
|
|
@ -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">
|
||||
<table class="table text-base leading-4">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" value="" id="accounts-select-all"></th>
|
||||
<th class="table-inline my-2 grid gap-4 place-items-stretch accounts-header-username">{{ .strings.username }}</th>
|
||||
{{ if .jellyfinLogin }}
|
||||
<th class="text-center-i grid gap-4 place-items-stretch accounts-header-access-jfa">{{ .strings.accessJFA }}</th>
|
||||
{{ end }}
|
||||
<th class="grid gap-4 place-items-stretch accounts-header-email">{{ .strings.emailAddress }}</th>
|
||||
{{ if .telegramEnabled }}
|
||||
<th class="text-center-i grid gap-4 place-items-stretch accounts-header-telegram">Telegram</th>
|
||||
{{ end }}
|
||||
{{ if .matrixEnabled }}
|
||||
<th class="text-center-i grid gap-4 place-items-stretch accounts-header-matrix">Matrix</th>
|
||||
{{ end }}
|
||||
{{ if .discordEnabled }}
|
||||
<th class="text-center-i grid gap-4 place-items-stretch accounts-header-discord">Discord</th>
|
||||
{{ end }}
|
||||
{{ if .referralsEnabled }}
|
||||
<th class="text-center-i grid gap-4 place-items-stretch accounts-header-referrals">{{ .strings.referrals }}</th>
|
||||
{{ end }}
|
||||
<th class="grid gap-4 place-items-stretch accounts-header-expiry">{{ .strings.expiry }}</th>
|
||||
<th class="grid gap-4 place-items-stretch accounts-header-last-active">{{ .strings.lastActiveTime }}</th>
|
||||
</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 class="flex flex-col md:flex-row gap-3">
|
||||
<div class="card @low dark:~d_neutral col max-w-[20%]">
|
||||
<div class="flex-expand">
|
||||
<input type="search" class="field ~neutral @low input settings-section-button justify-between mb-2" id="settings-search" placeholder="{{ .strings.search }}">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="card ~neutral @low col overflow">
|
||||
<div class="card ~urge @low">
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="heading text-2xl activity-title">Account Created: <a href="/fixme" class="activity-url">"hrfee"</a></span>
|
||||
<span class="text-sm font-medium activity-time">26/10/23 14:32</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<span class="content supra mr-2 activity-source-type">From Invite</span><a href="fixme" class="activity-source">BdBmpGDzuJhHSsboAsYgrE</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="content supra mr-2">Referrer</span><a href="fixme" class="activity-referrer">username</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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}.",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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; };
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
