Show comment and image in popup
This commit is contained in:
parent
a86d5f0b56
commit
e140dba63c
@ -175,6 +175,14 @@ label[for=user] {
|
|||||||
clear: both;
|
clear: both;
|
||||||
color: #903;
|
color: #903;
|
||||||
}
|
}
|
||||||
|
#pimage {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#pimage img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 300px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
#pleft, #pright {
|
#pleft, #pright {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
|
@ -75,8 +75,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<title><?= $lang["title"] ?></title>
|
<title><?= $lang["title"] ?></title>
|
||||||
<?php include("meta.php"); ?>
|
<?php include("meta.php"); ?>
|
||||||
<script type="module" src="js/ulogger.js"></script>
|
<script src="js/ulogger.js" type="module"></script>
|
||||||
<!-- <script src="dist/ulogger.js"></script>-->
|
<script src="js/bundle.js" defer nomodule></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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');
|
marker.setIcon('images/marker-green.png');
|
||||||
} else if (id === posLen - 1) {
|
} else if (id === posLen - 1) {
|
||||||
marker.setIcon('images/marker-red.png');
|
marker.setIcon('images/marker-red.png');
|
||||||
|
} else if (position.hasComment() || position.hasImage()) {
|
||||||
|
marker.setIcon('images/marker-gray.png');
|
||||||
} else {
|
} else {
|
||||||
marker.setIcon('images/marker-white.png');
|
marker.setIcon('images/marker-white.png');
|
||||||
}
|
}
|
||||||
|
@ -176,6 +176,10 @@ function initStyles() {
|
|||||||
opacity: 0.7,
|
opacity: 0.7,
|
||||||
src: 'images/marker-white.png'
|
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({
|
const iconGold = new ol.style.Icon({
|
||||||
anchor: [ 0.5, 1 ],
|
anchor: [ 0.5, 1 ],
|
||||||
src: 'images/marker-gold.png'
|
src: 'images/marker-gold.png'
|
||||||
@ -189,6 +193,9 @@ function initStyles() {
|
|||||||
olStyles['white'] = new ol.style.Style({
|
olStyles['white'] = new ol.style.Style({
|
||||||
image: iconWhite
|
image: iconWhite
|
||||||
});
|
});
|
||||||
|
olStyles['gray'] = new ol.style.Style({
|
||||||
|
image: iconGray
|
||||||
|
});
|
||||||
olStyles['gold'] = new ol.style.Style({
|
olStyles['gold'] = new ol.style.Style({
|
||||||
image: iconGold
|
image: iconGold
|
||||||
});
|
});
|
||||||
@ -424,6 +431,8 @@ function setMarker(id, track) {
|
|||||||
iconStyle = olStyles['green'];
|
iconStyle = olStyles['green'];
|
||||||
} else if (id === posLen - 1) {
|
} else if (id === posLen - 1) {
|
||||||
iconStyle = olStyles['red'];
|
iconStyle = olStyles['red'];
|
||||||
|
} else if (position.hasComment() || position.hasImage()) {
|
||||||
|
iconStyle = olStyles['gray'];
|
||||||
} else {
|
} else {
|
||||||
iconStyle = olStyles['white'];
|
iconStyle = olStyles['white'];
|
||||||
}
|
}
|
||||||
|
@ -30,6 +30,7 @@ import uUtils from './utils.js';
|
|||||||
* @property {?number} accuracy
|
* @property {?number} accuracy
|
||||||
* @property {?string} provider
|
* @property {?string} provider
|
||||||
* @property {?string} comment
|
* @property {?string} comment
|
||||||
|
* @property {?string} image
|
||||||
* @property {string} username
|
* @property {string} username
|
||||||
* @property {string} trackname
|
* @property {string} trackname
|
||||||
* @property {number} trackid
|
* @property {number} trackid
|
||||||
@ -55,7 +56,8 @@ export default class uPosition {
|
|||||||
position.bearing = uUtils.getNodeAsInt(xml, 'bearing'); // may be null
|
position.bearing = uUtils.getNodeAsInt(xml, 'bearing'); // may be null
|
||||||
position.accuracy = uUtils.getNodeAsInt(xml, 'accuracy'); // may be null
|
position.accuracy = uUtils.getNodeAsInt(xml, 'accuracy'); // may be null
|
||||||
position.provider = uUtils.getNode(xml, 'provider'); // 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.username = uUtils.getNode(xml, 'username');
|
||||||
position.trackname = uUtils.getNode(xml, 'trackname');
|
position.trackname = uUtils.getNode(xml, 'trackname');
|
||||||
position.trackid = uUtils.getNodeAsInt(xml, 'trackid');
|
position.trackid = uUtils.getNodeAsInt(xml, 'trackid');
|
||||||
@ -66,4 +68,18 @@ export default class uPosition {
|
|||||||
position.totalSeconds = 0;
|
position.totalSeconds = 0;
|
||||||
return position;
|
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><img alt="${lang.strings['track']}" title="${lang.strings['track']}" src="images/route_dark.svg"> ${uUtils.htmlEncode(pos.trackname)}</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="pbody">
|
<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">
|
<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/calendar_dark.svg"> ${date}<br>
|
||||||
<img class="icon" alt="${lang.strings['time']}" title="${lang.strings['time']}" src="images/clock_dark.svg"> ${time}<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("timestamp", $position->timestamp);
|
||||||
$xml->writeElement("accuracy", $position->accuracy);
|
$xml->writeElement("accuracy", $position->accuracy);
|
||||||
$xml->writeElement("provider", $position->provider);
|
$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("username", $position->userLogin);
|
||||||
$xml->writeElement("trackid", $position->trackId);
|
$xml->writeElement("trackid", $position->trackId);
|
||||||
$xml->writeElement("trackname", $position->trackName);
|
$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