Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

More refactoring, stuff kindoff works

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-12 02:58:32 +02:00
parent 62f471df1e
commit 3943100e54
52 changed files with 635 additions and 1010 deletions
Download patch file Download diff file Expand all files Collapse all files

215
UI/BigComponents/UserBadge.ts
View file

@ -1,10 +1,7 @@
/**
* Handles and updates the user badge
*/
import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import {VariableUiElement} from "../Base/VariableUIElement";
import UserDetails from "../../Logic/Osm/OsmConnection";
import Svg from "../../Svg";
import State from "../../State";
import Combine from "../Base/Combine";
@ -12,133 +9,127 @@ import {FixedUiElement} from "../Base/FixedUiElement";
import LanguagePicker from "../LanguagePicker";
import Translations from "../i18n/Translations";
import Link from "../Base/Link";
import Toggle from "../Input/Toggle";
import Img from "../Base/Img";
export default class UserBadge extends UIElement {
private _userDetails: UIEventSource<UserDetails>;
private _logout: UIElement;
private _homeButton: UIElement;
private _languagePicker: UIElement;
private _loginButton: UIElement;
export default class UserBadge extends Toggle {
constructor() {
super(State.state.osmConnection.userDetails);
this._userDetails = State.state.osmConnection.userDetails;
this._languagePicker = (LanguagePicker.CreateLanguagePicker(State.state.layoutToUse.data.language) ?? new FixedUiElement(""))
.SetStyle("width:min-content;");
this._loginButton = Translations.t.general.loginWithOpenStreetMap
const userDetails = State.state.osmConnection.userDetails;
const loginButton = Translations.t.general.loginWithOpenStreetMap
.Clone()
.SetClass("userbadge-login pt-3 w-full")
.onClick(() => State.state.osmConnection.AttemptLogin());
this._logout =
const logout =
Svg.logout_svg()
.onClick(() => {
State.state.osmConnection.LogOut();
});
this._userDetails.addCallback(function () {
const profilePic = document.getElementById("profile-pic");
if (profilePic) {
profilePic.onload = function () {
profilePic.style.opacity = "1"
};
}
});
const userBadge = userDetails.map(user => {
{
const homeButton = new VariableUiElement(
userDetails.map((userinfo) => {
if (userinfo.home) {
return Svg.home_ui();
}
return " ";
})
).onClick(() => {
const home = State.state.osmConnection.userDetails.data?.home;
if (home === undefined) {
return;
}
State.state.leafletMap.data.setView([home.lat, home.lon], 16);
});
this._homeButton = new VariableUiElement(
this._userDetails.map((userinfo) => {
if (userinfo.home) {
return Svg.home_ui().Render();
const linkStyle = "flex items-baseline"
const languagePicker = (LanguagePicker.CreateLanguagePicker(State.state.layoutToUse.data.language) ?? new FixedUiElement(""))
.SetStyle("width:min-content;");
let messageSpan =
new Link(
new Combine([Svg.envelope, "" + user.totalMessages]).SetClass(linkStyle),
'https://www.openstreetmap.org/messages/inbox',
true
)
const csCount =
new Link(
new Combine([Svg.star, "" + user.csCount]).SetClass(linkStyle),
`https://www.openstreetmap.org/user/${user.name}/history`,
true);
if (user.unreadMessages > 0) {
messageSpan = new Link(
new Combine([Svg.envelope, "" + user.unreadMessages]),
'https://www.openstreetmap.org/messages/inbox',
true
).SetClass("alert")
}
return " ";
})
).onClick(() => {
const home = State.state.osmConnection.userDetails.data?.home;
if (home === undefined) {
return;
let dryrun = new FixedUiElement("");
if (user.dryRun) {
dryrun = new FixedUiElement("TESTING").SetClass("alert");
}
const settings =
new Link(Svg.gear_svg(),
`https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}/account`,
true)
const userIcon = new Link(
new Img(user.img)
.SetClass("rounded-full opacity-0 m-0 p-0 duration-500 w-16 h16 float-left")
,
`https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}`,
true
);
const userName = new Link(
new FixedUiElement(user.name),
`https://www.openstreetmap.org/user/${user.name}`,
true);
const userStats = new Combine([
homeButton,
settings,
messageSpan,
csCount,
languagePicker,
logout
])
.SetClass("userstats")
const usertext = new Combine([
userName,
dryrun,
userStats
]).SetClass("usertext")
return new Combine([
userIcon,
usertext,
]).SetClass("h-16")
}
State.state.leafletMap.data.setView([home.lat, home.lon], 16);
});
}
InnerRender(): UIElement {
const user = this._userDetails.data;
if (!user.loggedIn) {
return this._loginButton;
}
const linkStyle = "flex items-baseline"
let messageSpan: UIElement =
new Link(
new Combine([Svg.envelope, "" + user.totalMessages]).SetClass(linkStyle),
'https://www.openstreetmap.org/messages/inbox',
true
)
const csCount =
new Link(
new Combine([Svg.star, "" + user.csCount]).SetClass(linkStyle),
`https://www.openstreetmap.org/user/${user.name}/history`,
true);
if (user.unreadMessages > 0) {
messageSpan = new Link(
new Combine([Svg.envelope, "" + user.unreadMessages]),
'https://www.openstreetmap.org/messages/inbox',
true
).SetClass("alert")
}
let dryrun: UIElement = new FixedUiElement("");
if (user.dryRun) {
dryrun = new FixedUiElement("TESTING").SetClass("alert");
}
const settings =
new Link(Svg.gear_svg(),
`https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}/account`,
true)
const userIcon = new Link(
new FixedUiElement(`<img id='profile-pic' src='${user.img}' alt='profile-pic'/>`),
`https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}`,
true
);
const userName = new Link(
new FixedUiElement(user.name),
`https://www.openstreetmap.org/user/${user.name}`,
true);
const userStats = new Combine([
this._homeButton,
settings,
messageSpan,
csCount,
this._languagePicker,
this._logout
])
.SetClass("userstats")
const usertext = new Combine([
userName,
dryrun,
userStats
]).SetClass("usertext")
return new Combine([
userIcon,
usertext,
])
super(
new VariableUiElement(userBadge),
loginButton,
State.state.osmConnection.isLoggedIn
)
}