Show comment and image in popup
This commit is contained in:
parent
a86d5f0b56
commit
e140dba63c
@ -175,6 +175,14 @@ label[for=user] {
|
||||
clear: both;
|
||||
color: #903;
|
||||
}
|
||||
#pimage {
|
||||
text-align: center;
|
||||
}
|
||||
#pimage img {
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#pleft, #pright {
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
|
@ -75,8 +75,8 @@
|
||||
<head>
|
||||
<title><?= $lang["title"] ?></title>
|
||||
<?php include("meta.php"); ?>
|
||||
<script type="module" src="js/ulogger.js"></script>
|
||||
<!-- <script src="dist/ulogger.js"></script>-->
|
||||
<script src="js/ulogger.js" type="module"></script>
|
||||
<script src="js/bundle.js" defer nomodule></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
1
js/bundle.js
Normal file
1
js/bundle.js
Normal file
File diff suppressed because one or more lines are too long
@ -194,6 +194,8 @@ function setMarker(id, track) {
|
||||
marker.setIcon('images/marker-green.png');
|
||||
} else if (id === posLen - 1) {
|
||||
marker.setIcon('images/marker-red.png');
|
||||
} else if (position.hasComment() || position.hasImage()) {
|
||||
marker.setIcon('images/marker-gray.png');
|
||||
} else {
|
||||
marker.setIcon('images/marker-white.png');
|
||||
}
|
||||
|
@ -176,6 +176,10 @@ function initStyles() {
|
||||
opacity: 0.7,
|
||||
src: 'images/marker-white.png'
|
||||
});
|
||||
const iconGray = new ol.style.Icon({
|
||||
anchor: [ 0.5, 1 ],
|
||||
src: 'images/marker-gray.png'
|
||||
});
|
||||
const iconGold = new ol.style.Icon({
|
||||
anchor: [ 0.5, 1 ],
|
||||
src: 'images/marker-gold.png'
|
||||
@ -189,6 +193,9 @@ function initStyles() {
|
||||
olStyles['white'] = new ol.style.Style({
|
||||
image: iconWhite
|
||||
});
|
||||
olStyles['gray'] = new ol.style.Style({
|
||||
image: iconGray
|
||||
});
|
||||
olStyles['gold'] = new ol.style.Style({
|
||||
image: iconGold
|
||||
});
|
||||
@ -424,6 +431,8 @@ function setMarker(id, track) {
|
||||
iconStyle = olStyles['green'];
|
||||
} else if (id === posLen - 1) {
|
||||
iconStyle = olStyles['red'];
|
||||
} else if (position.hasComment() || position.hasImage()) {
|
||||
iconStyle = olStyles['gray'];
|
||||
} else {
|
||||
iconStyle = olStyles['white'];
|
||||
}
|
||||
|
@ -30,6 +30,7 @@ import uUtils from './utils.js';
|
||||
* @property {?number} accuracy
|
||||
* @property {?string} provider
|
||||
* @property {?string} comment
|
||||
* @property {?string} image
|
||||
* @property {string} username
|
||||
* @property {string} trackname
|
||||
* @property {number} trackid
|
||||
@ -55,7 +56,8 @@ export default class uPosition {
|
||||
position.bearing = uUtils.getNodeAsInt(xml, 'bearing'); // may be null
|
||||
position.accuracy = uUtils.getNodeAsInt(xml, 'accuracy'); // may be null
|
||||
position.provider = uUtils.getNode(xml, 'provider'); // may be null
|
||||
position.comments = uUtils.getNode(xml, 'comments'); // may be null
|
||||
position.comment = uUtils.getNode(xml, 'comment'); // may be null
|
||||
position.image = uUtils.getNode(xml, 'image'); // may be null
|
||||
position.username = uUtils.getNode(xml, 'username');
|
||||
position.trackname = uUtils.getNode(xml, 'trackname');
|
||||
position.trackid = uUtils.getNodeAsInt(xml, 'trackid');
|
||||
@ -66,4 +68,18 @@ export default class uPosition {
|
||||
position.totalSeconds = 0;
|
||||
return position;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {boolean}
|
||||
*/
|
||||
hasComment() {
|
||||
return (this.comment != null && this.comment.length);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {boolean}
|
||||
*/
|
||||
hasImage() {
|
||||
return (this.image != null && this.image.length);
|
||||
}
|
||||
}
|
||||
|
3
js/ui.js
3
js/ui.js
@ -366,7 +366,8 @@ export default class uUI {
|
||||
<div><img alt="${lang.strings['track']}" title="${lang.strings['track']}" src="images/route_dark.svg"> ${uUtils.htmlEncode(pos.trackname)}</div>
|
||||
</div>
|
||||
<div id="pbody">
|
||||
${(pos.comment != null) ? `<div id="pcomments">${uUtils.htmlEncode(pos.comment)}</div>` : ''}
|
||||
${(pos.hasComment()) ? `<div id="pcomments">${uUtils.htmlEncode(pos.comment)}</div>` : ''}
|
||||
${(pos.hasImage()) ? `<div id="pimage"><img src="uploads/${pos.image}" alt="image"></div>` : ''}
|
||||
<div id="pleft">
|
||||
<img class="icon" alt="${lang.strings['time']}" title="${lang.strings['time']}" src="images/calendar_dark.svg"> ${date}<br>
|
||||
<img class="icon" alt="${lang.strings['time']}" title="${lang.strings['time']}" src="images/clock_dark.svg"> ${time}<br>
|
||||
|
3070
package-lock.json
generated
3070
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -69,7 +69,8 @@ if (!empty($positionsArr)) {
|
||||
$xml->writeElement("timestamp", $position->timestamp);
|
||||
$xml->writeElement("accuracy", $position->accuracy);
|
||||
$xml->writeElement("provider", $position->provider);
|
||||
$xml->writeElement("comments", $position->comment);
|
||||
$xml->writeElement("comment", $position->comment);
|
||||
$xml->writeElement("image", $position->image);
|
||||
$xml->writeElement("username", $position->userLogin);
|
||||
$xml->writeElement("trackid", $position->trackId);
|
||||
$xml->writeElement("trackname", $position->trackName);
|
||||
|
27
webpack.config.js
Normal file
27
webpack.config.js
Normal file
@ -0,0 +1,27 @@
|
||||
const path = require('path');
|
||||
const MinifyPlugin = require('babel-minify-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
entry: './js/ulogger.js',
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
path: path.resolve(__dirname, 'js')
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['@babel/preset-env']
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new MinifyPlugin()
|
||||
]
|
||||
};
|
Loading…
x
Reference in New Issue
Block a user