Commit c3c31dcc authored by Corentin Mors's avatar Corentin Mors
Browse files

Change layout and work on client side functionnalities

parent 74e671f7
......@@ -10,7 +10,7 @@
</head>
<body>
<h2>Location Tracer</h2>
<div class="container-main">
<div id="map" class="map"></div>
<div id="info" style="display: none;"></div>
......@@ -22,20 +22,24 @@
Speed : <code id="speed"></code>
</p>
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" placeholder="Type here..."/>
</li>
<li class="login page">
<div class="form">
<h3 class="title">What's your nickname?</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
</li>
</ul>
</div>
<div class="container-side">
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" placeholder="Type here..."/>
</li>
<li class="login page">
<div class="form">
<h3 class="title">What's your nickname?</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
......
......@@ -305,7 +305,7 @@ $(function() {
var view = new View({
center: [0, 0],
center: [47, 2.4],
zoom: 5
});
......@@ -351,7 +351,6 @@ $(function() {
var accuracyFeature = new Feature();
geolocation.on('change:accuracyGeometry', function() {
accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
map.getView().setCenter(geolocation.getPosition());
});
var positionFeature = new Feature();
......@@ -368,29 +367,20 @@ $(function() {
})
}));
// var positionFeature2 = new Feature();
// positionFeature2.setStyle(new Style({
// image: new CircleStyle({
// radius: 6,
// fill: new Fill({
// color: '#287b00'
// }),
// stroke: new Stroke({
// color: '#fff',
// width: 2
// })
// })
// }));
// var coord = [7.85, 47.983333];
// var out = ol.coordinate.toStringXY(coord, 1);
const urlParams = new URLSearchParams(window.location.search);
username = urlParams.get('u');
socket.emit('add user', username);
socket.emit('geoloc', [7.85, 47.983333]);
$loginPage.fadeOut();
$chatPage.show();
$loginPage.off('click');
$currentInput = $inputMessage.focus();
geolocation.on('change:position', function() {
map.getView().setCenter(geolocation.getPosition());
var coordinates = geolocation.getPosition();
positionFeature.setGeometry(coordinates ?
new Point(coordinates) : null);
......@@ -431,6 +421,7 @@ $(function() {
console.log("Got del session from " + data.username);
userPositions[data.username].setGeometry(null);
mylayer.getSource().removeFeature(userPositions[data.username]);
mylayer.getSource().refresh();
}
});
......
......@@ -31,6 +31,21 @@ ul {
word-wrap: break-word;
}
.container-main{
width: 74vw;
display: inline-block;
position: relative;
height: 100vh;
}
.container-side{
width: 25vw;
position: absolute;
top: 0;
right: 0;
height: 100vh;
}
/* Pages */
.pages {
......@@ -149,5 +164,5 @@ ul {
}
.map{
width: 500px;
width: 100%;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment