midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

More fixes to the refactored code

Browse source
This commit is contained in:
pietervdvn 2021-06-15 16:18:58 +02:00
parent 42d13f564c
commit 94f9a0de56
15 changed files with 78 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Logic/Web/ImgurUploader.ts
View file

@ -26,7 +26,7 @@ export default class ImgurUploader {
function (url) {
console.log("File saved at", url);
self.success.setData([...self.success.data, url]);
this. handleSuccessUrl(url);
self._handleSuccessUrl(url);
},
function () {
console.log("All uploads completed");

54
UI/Image/DeleteImage.ts
View file

@ -9,49 +9,47 @@ import {Tag} from "../../Logic/Tags/Tag";
import BaseUIElement from "../BaseUIElement";
export default class DeleteImage extends UIElement {
private readonly key: string;
private readonly tags: UIEventSource<any>;
private readonly isDeletedBadge: BaseUIElement;
private readonly deleteDialog: BaseUIElement;
export default class DeleteImage extends Toggle {
constructor(key: string, tags: UIEventSource<any>) {
super(tags);
this.tags = tags;
this.key = key;
this.isDeletedBadge = Translations.t.image.isDeleted;
const oldValue = tags.data[key]
const isDeletedBadge = Translations.t.image.isDeleted.Clone()
.SetClass("rounded-full p-1")
.SetStyle("color:white;background:#ff8c8c")
.onClick(() => {
State.state?.changes?.addTag(tags.data.id, new Tag(key, oldValue), tags);
});
const deleteButton = Translations.t.image.doDelete.Clone()
.SetClass("block w-full pl-4 pr-4")
.SetStyle("color:white;background:#ff8c8c; border-top-left-radius:30rem; border-top-right-radius: 30rem;")
.onClick(() => {
State.state?.changes.addTag(tags.data.id, new Tag(key, ""));
State.state?.changes?.addTag(tags.data.id, new Tag(key, ""), tags);
});
const cancelButton = Translations.t.general.cancel.SetClass("bg-white pl-4 pr-4").SetStyle( "border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;");
this.deleteDialog = new Toggle(
const cancelButton = Translations.t.general.cancel.Clone().SetClass("bg-white pl-4 pr-4").SetStyle("border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;");
const openDelete = Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
const deleteDialog = new Toggle(
new Combine([
deleteButton,
cancelButton
]).SetClass("flex flex-col background-black"),
Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
).ToggleOnClick()
openDelete
)
}
cancelButton.onClick(() => deleteDialog.isEnabled.setData(false))
openDelete.onClick(() => deleteDialog.isEnabled.setData(true))
InnerRender() {
if(! State.state?.featureSwitchUserbadge?.data){
return "";
}
const value = this.tags.data[this.key];
if (value === undefined || value === "") {
return this.isDeletedBadge;
}
return this.deleteDialog;
super(
new Toggle(
deleteDialog,
isDeletedBadge,
tags.map(tags => (tags[key] ?? "") !== "")
),
undefined /*Login (and thus editing) is disabled*/,
State.state?.featureSwitchUserbadge ?? new UIEventSource<boolean>(true)
)
this.SetClass("cursor-pointer")
}
}

4
UI/Image/ImageUploadFlow.ts
View file

@ -28,7 +28,7 @@ export class ImageUploadFlow extends Toggle {
key = imagePrefix + ":" + freeIndex;
}
console.log("Adding image:" + key, url);
State.state.changes.addTag(tags.id, new Tag(key, url));
State.state.changes.addTag(tags.id, new Tag(key, url), tagsSource);
})
@ -47,7 +47,7 @@ export class ImageUploadFlow extends Toggle {
}
console.log("Received images from the user, starting upload")
const license = licensePicker.GetValue().data ?? "CC0"
const license = licensePicker.GetValue()?.data ?? "CC0"
const tags = tagsSource.data;

19
UI/Image/SlideShow.ts
View file

@ -1,6 +1,5 @@
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import $ from "jquery"
export class SlideShow extends BaseUIElement {
@ -15,15 +14,29 @@ export class SlideShow extends BaseUIElement {
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("div")
el.classList.add("slic-carousel")
el.style.overflowX = "auto"
el.style.width = "min-content"
el.style.minWidth = "min-content"
el.style.display = "flex"
this.embeddedElements.addCallbackAndRun(elements => {
while (el.firstChild) {
el.removeChild(el.lastChild)
}
for (const element of elements ?? []) {
element.SetClass("slick-carousel-content")
element.SetClass("block ml-1")
.SetStyle("width: 300px; max-height: var(--image-carousel-height); height: var(--image-carousel-height)")
el.appendChild(element.ConstructElement())
}
});
return el;
const wrapper = document.createElement("div")
wrapper.style.maxWidth = "100%"
wrapper.style.overflowX = "auto"
wrapper.appendChild(el)
return wrapper;
}
}

4
UI/Input/DropDown.ts
View file

@ -21,6 +21,8 @@ export class DropDown<T> extends InputElement<T> {
}
) {
super();
value = value ?? new UIEventSource<T>(undefined)
this._value = value
this._values = values;
if (values.length <= 1) {
return;
@ -43,7 +45,7 @@ export class DropDown<T> extends InputElement<T> {
el.appendChild(labelHtml)
}
}
options = options ?? {}
options.select_class = options.select_class ?? 'bg-indigo-100 p-1 rounded hover:bg-indigo-200'

2
UI/Input/TextField.ts
View file

@ -106,7 +106,7 @@ export class TextField extends InputElement<string> {
newCursorPos--;
}
// @ts-ignore
TextField.SetCursorPosition(newCursorPos);
TextField.SetCursorPosition(field, newCursorPos);
};

2
UI/Popup/FeatureInfoBox.ts
View file

@ -53,7 +53,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
}
let questionBoxIsUsed = false;
const renderings = layerConfig.tagRenderings.map(tr => {
const renderings : BaseUIElement[] = layerConfig.tagRenderings.map(tr => {
if (tr.question === null) {
// This is the question box!
questionBoxIsUsed = true;

15
UI/ShowDataLayer.ts
View file

@ -126,22 +126,23 @@ export default class ShowDataLayer {
closeButton: false
}, leafletLayer);
leafletLayer.bindPopup(popup);
let infobox : FeatureInfoBox = undefined;
leafletLayer.bindPopup(popup);
let infobox: FeatureInfoBox = undefined;
const id = `popup-${feature.properties.id}-${this._cleanCount}`
popup.setContent(`<div style='height: 50vh' id='${id}'>Rendering</div>`)
popup.setContent(`<div style='height: 65vh' id='${id}'>Rendering</div>`)
leafletLayer.on("popupopen", () => {
State.state.selectedElement.setData(feature)
if (infobox === undefined) {
if (infobox === undefined) {
const tags = State.state.allElements.getEventSourceById(feature.properties.id);
infobox = new FeatureInfoBox(tags, layer);
infobox.isShown.addCallback(isShown => {
if (!isShown) {
State.state.selectedElement.setData(undefined);
leafletLayer.closePopup()
}
});
}
@ -162,7 +163,7 @@ export default class ShowDataLayer {
leafletLayer.openPopup()
}
})
}
private CreateGeojsonLayer(): L.Layer {

2
Utils.ts
View file

@ -108,7 +108,7 @@ export class Utils {
}
public static EllipsesAfter(str: string, l: number = 100) {
if (str === undefined) {
if (str === undefined || str === null) {
return undefined;
}
if (str.length <= l) {

4
css/mobile.css
View file

@ -55,6 +55,10 @@ Contains tweaks for small screens
.leaflet-control-attribution{
display: none;
}
.leaflet-popup {
display: none;
}
}

30
css/slideshow.css
View file

@ -1,22 +1,18 @@
.slick-next {
top: unset;
bottom: -25px;
right: 15px;
z-index: 10000;
.slick-carousel-content {
width: 300px;
max-height: var(--image-carousel-height);
display: block;
margin-left: 10px;
}
.slick-prev {
top: unset;
bottom: -25px;
left: 0;
z-index: 10000;
.slick-carousel-content img {
/**
Workaround to patch images within a slick carousel
*/
height: var(--image-carousel-height);
width: auto;
}
.slick-next::before {
font-size: 35px;
}
.slick-prev::before {
font-size: 35px;
}

15
index.css
View file

@ -65,21 +65,6 @@
--image-carousel-height: 400px;
}
.slick-carousel-content {
width: 300px;
max-height: var(--image-carousel-height);
display: block;
margin-left: 10px;
}
.slick-carousel-content img {
/**
Workaround to patch images within a slick carousel
*/
height: var(--image-carousel-height);
width: auto;
}
html, body {
height: 100%;
min-height: 100vh;

1
index.html
View file

@ -14,7 +14,6 @@
<link rel="stylesheet" href="./css/tagrendering.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
<link rel="stylesheet" href="./css/slideshow.css"/>
<link rel="stylesheet" href="css/ReviewElement.css"/>
<link rel="stylesheet" href="vendor/MarkerCluster.css"/>
<link rel="stylesheet" href="vendor/MarkerCluster.Default.css"/>

2
package.json
View file

@ -80,14 +80,12 @@
"postcss": "^7.0.35",
"prompt-sync": "^4.2.0",
"sharp": "^0.27.0",
"slick-carousel": "^1.8.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
"tslint": "^6.1.3"
},
"devDependencies": {
"@babel/polyfill": "^7.10.4",
"@types/node": "^7.0.5",
"@types/slick-carousel": "^1.6.34",
"assert": "^2.0.0",
"fs": "0.0.1-security",
"marked": "^2.0.0",

4
test.ts
View file

@ -10,9 +10,9 @@ const tagsSource = new UIEventSource({
name:'name',
surface:'asphalt',
image: "https://i.imgur.com/kX3rl3v.jpg",
"image:1": "https://i.imgur.com/kX3rl3v.jpg",
"image:1": "https://i.imgur.com/oHAJqMB.jpg",
// "opening_hours":"mo-fr 09:00-18:00",
_country:"be",
// "opening_hours":"mo-fr 09:00-18:00"
})
const state = new State(undefined)