Show comment and image in popup

This commit is contained in:
Bartek Fabiszewski 2019-07-27 19:38:00 +02:00
parent a86d5f0b56
commit e140dba63c
10 changed files with 2865 additions and 282 deletions

View File

@ -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;

View File

@ -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

File diff suppressed because one or more lines are too long

View File

@ -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');
}

View File

@ -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'];
}

View File

@ -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);
}
}

View File

@ -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>

3072
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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
View 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()
]
};