Skip to content

Commit 990cb37

Browse files
boly38boly38
committed
Fix #20 - small screen style, and per date logs
1 parent df6efb6 commit 990cb37

File tree

7 files changed

+146
-43
lines changed

7 files changed

+146
-43
lines changed

‎src/lib/Common.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,12 @@ export const nowHuman = tz => dayjs().tz(tz).format(BES_DATE_FORMAT);
5555
export const toHuman = (utcDateTimeString, tz) => {
5656
return dayjs.utc(utcDateTimeString).tz(tz).format(BES_DATE_FORMAT);
5757
};
58+
export const toHumanDay = (utcDateTimeString, tz) => {
59+
return dayjs.utc(utcDateTimeString).tz(tz).format("YYYY-MM-DD");
60+
};
61+
export const toHumanTime = (utcDateTimeString, tz) => {
62+
return dayjs.utc(utcDateTimeString).tz(tz).format("HH:mm:ss");
63+
};
5864
/*
5965
getParisNowDate() {
6066
return new Date().toLocaleString('fr-FR', {

‎src/services/LogtailService.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import axios from "axios";
2-
import {isSet, nowISO8601, nowMinusHoursUTCISO, toHuman} from "../lib/Common.js";
2+
import {isSet, nowISO8601, nowMinusHoursUTCISO, toHuman, toHumanDay, toHumanTime} from "../lib/Common.js";
33
import {NEWS_LABEL} from "./NewsService.js";
44

55
/**
@@ -36,6 +36,21 @@ export default class LogtailService {
3636
});
3737
}
3838

39+
perDateMessage(logs) {
40+
const {tz} = this
41+
const resultMap = {};
42+
logs.forEach(d => {
43+
const dt = toHumanTime(d.dt, tz);
44+
const day = toHumanDay(d.dt, tz);
45+
const message = d.message;
46+
if (!resultMap[day]) {
47+
resultMap[day] = [];
48+
}
49+
resultMap[day].push({dt,message});
50+
});
51+
return resultMap;
52+
}
53+
3954
getRecentNews() {
4055
const service = this;
4156
const {logger, tz} = this
@@ -48,9 +63,7 @@ export default class LogtailService {
4863
logger.debug(`querySource id=${logtail_source_id}, query=${query}, from=${from} to=${to} tz=${tz}`);
4964
service.querySource(logtail_source_id, query, from, to)
5065
.then(result => {
51-
const data = result.data.map(d => {
52-
return {"dt": toHuman(d.dt, tz), "message": d.message}
53-
});
66+
const data = this.perDateMessage(result.data);
5467
const logtailNews = {
5568
"from": toHuman(from, tz),
5669
"to": toHuman(to, tz),

‎src/www/public/main.css‎

Lines changed: 70 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,90 @@
1+
html, body {
2+
margin: 0px !important;
3+
padding: 0px !important;
4+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
5+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
6+
sans-serif;
7+
-webkit-font-smoothing: antialiased;
8+
-moz-osx-font-smoothing: grayscale;
9+
width: 100%;
10+
}
11+
112
.panel-input {
2-
border: 1px solid green;
3-
width: 400px;
4-
margin-left: 30px;
13+
border: 1px solid green;
514
}
615

716
.panel-heading {
8-
padding-left: 10px !important;
9-
padding-bottom: 0px !important;
10-
padding-top: 10px !important;
17+
padding-left: 10px !important;
18+
padding-bottom: 10px !important;
19+
padding-top: 10px !important;
20+
font-size: 1.4em;
1121
}
1222

1323
.panel-info {
14-
margin-top: 4px !important;
15-
margin-left: 10px !important;
16-
margin-right: 10px !important;
24+
margin-top: 0 !important;
25+
margin-left: 10px !important;
26+
margin-right: 10px !important;
27+
}
28+
29+
.panel-body {
30+
font-size: 1.2em;
1731
}
1832

1933
#sendResult {
20-
margin-left: 30px;
34+
margin-left: 30px;
2135
}
2236

2337
#sendTweet {
24-
cursor: pointer;
38+
cursor: pointer;
2539
}
2640

2741
.illustrateTxt {
28-
float: right;
42+
float: right;
43+
}
44+
45+
.logDate {
46+
font-size: 0.8em;
47+
}
48+
49+
li.msgContainer {
50+
list-style-type: circle;
51+
padding-bottom: 4px;
2952
}
3053

3154
.msgContainer {
32-
border: 2px solid yellow;
33-
padding: 20px;
55+
padding-left: 6px;
56+
font-size: 1.0em;
57+
}
58+
59+
/* Responsive adjustments */
60+
@media screen and (max-width: 1200px) {
61+
.panel-heading {
62+
padding-left: 10px !important;
63+
padding-bottom: 10px !important;
64+
padding-top: 10px !important;
65+
font-size: 1.2em;
66+
}
67+
68+
.panel-body {
69+
font-size: 1.0em;
70+
}
71+
72+
.panel-input {
73+
width: 100%;
74+
margin-left: 0;
75+
}
76+
77+
.panel-info {
78+
margin-left: 0;
79+
margin-right: 0;
80+
}
81+
82+
.logDate {
83+
font-size: 0.8em;
84+
}
85+
86+
.msgContainer {
87+
padding-left: 3px;
88+
font-size: 1.0em;
89+
}
3490
}
35-
.msgTitle {
36-
font-size: 20px;
37-
}

‎src/www/views/pages/index.ejs‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<%- include ('../partials/header') %>
55
<script type="text/javascript">
66
const contentIds = ["logs", "principes", "faq"]
7-
function toggleContent(content) {
7+
window.toggleContent = function(content) {
88
contentIds.forEach( id => {
99
const idMenu = `${id}-menu`;
1010
if (id === content) {
@@ -16,15 +16,29 @@
1616
}
1717
})
1818
}
19+
const logDateIds = [<%- Object.keys(news.data).map((item, index) => "\"logDate-" + index + "\"") %>];
20+
window.toggleLogDateContent = function(content) {
21+
logDateIds.forEach( id => {
22+
const idMenu = `${id}-menu`;
23+
if (id === content) {
24+
$(`#${id}`).show();
25+
$(`#${idMenu}`).addClass("active");
26+
} else {
27+
$(`#${id}`).hide();
28+
$(`#${idMenu}`).removeClass("active");
29+
}
30+
})
31+
}
1932
2033
$(document).ready(function () {
21-
toggleContent('logs');
34+
window.toggleContent(contentIds[0]);
35+
window.toggleLogDateContent(logDateIds[0]);
2236
});
2337
</script>
2438
</head>
2539

2640
<body>
27-
<div>
41+
<div class="container-fluid">
2842

2943
<div class="panel-heading">
3044
<ul class="nav nav-tabs">

‎src/www/views/partials/faq.ejs‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
<div class="panel panel-info" id="faq">
22
<div class="panel-heading">Questions fréquentes</div>
33
<div class="panel-body">
4-
<p><b>Sur ce site, je ne vois qu'un seul log, et c'est long à s'afficher</b> : <br/><br/>
5-
Je m'endors quand je ne suis pas stimulé, et vu que je ne possède pas de<br/>
6-
base de données pour le moment, je perds la mémoire de ce que j'ai fait.<br/>
7-
Il faut venir peu de temps après mon action pour voir les logs.<br/>
8-
Je suis plus rapide à répondre si je suis déjà réveillé.</p>
4+
<p><b>C'est long à s'afficher</b> : <br/><br/>
5+
Je m'endors quand je ne suis pas stimulé, il s'agit d'un hébergement gratuit qui optimise les temps du serveur.<br/>
6+
Il faut jusque 6 minutes pour réveiller le serveur, mais ensuite il répond normalement.</p>
97
<p><b>A quelle heure te réveilles-tu ?</b> : <br/><br/>
108
Pour le moment ce n'est pas encore trop figé. en dehors des tirs manuels, je simule à ~ 17h15/17h25, et pratique à 17h30.</p>
119
<p><b>Quelle questions peut-on te poser ?</b> : <br/><br/>

‎src/www/views/partials/home.ejs‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,43 @@
1-
<div class="panel panel-info" id="logs">
1+
<div class="panel panel-info" id="logs">
22
<div class="panel-heading">Les logs du robot</div>
33
<div class="panel-body">
44
<p>
55
Bienvenue sur la page du <a href="<%- blueskyAccount %>"
66
data-umami-event="{blueskyAccount link}" id="blueskyAccount-link"
77
class="umami--click--profile-button">@<%- blueskyDisplayName %></a>
8-
- un robot BlueSky <a href="https://nodejs.org/"
8+
: un robot BlueSky <a href="https://nodejs.org/"
99
data-umami-event="{nodejs link}" id="nodejs-link"
10-
class="umami--click--nodejs-button">NodeJS</a>.<br/>
10+
class="umami--click--nodejs-button">NodeJS</a>
11+
<sup>version <%- version %></sup>.<br/>
1112
<br/>
12-
🧾 activités récentes <a href="/" data-umami-event="{logs-refresh link}" id="logs-refresh-link">🔄</a> <sup>Fraîcheur : <%- news.to %> - TZ : <%- tz %></sup>:<br/>
13-
<ul>
14-
<% news.data.forEach(function(newsEntry){ %>
15-
<li><%- newsEntry.dt %> | <%- newsEntry.message %></li>
16-
<% }); %>
17-
<!-- <li><small><%- news.from %></small></li> -->
18-
<li>version <%- version %></li>
19-
</ul>
20-
</>
13+
<a href="/" data-umami-event="{logs-refresh link}" id="logs-refresh-link">🔄</a> 🧾 activités récentes<br/>
14+
<small>Fraîcheur : <%- news.to %> - TZ : <%- tz %></small><br/>
15+
</p>
16+
17+
<div class="panel-heading">
18+
<ul class="nav nav-tabs">
19+
<% Object.keys(news.data).forEach((item, index) => { %>
20+
<li id="logDate-<%- index %>-menu" class="logDate">
21+
<a href="#" onClick="toggleLogDateContent('logDate-<%- index %>')"
22+
data-umami-event="{home logs <%- item %>}" id="home-logs-<%- index %>"
23+
><%- item %></a>
24+
</li>
25+
<% }) %>
26+
</ul>
27+
</div>
2128
</div>
29+
30+
31+
<% Object.keys(news.data).forEach((item, index) => { %>
32+
33+
<div class="panel" id="logDate-<%- index %>">
34+
<!-- <div class="panel-heading">Les logs du <%- item %></div> -->
35+
<ul class="logLine">
36+
<% news.data[item].forEach(function(newsEntry){ %>
37+
<li class="msgContainer"><%- newsEntry.dt %> | <%- newsEntry.message %></li>
38+
<% }); %>
39+
</ul>
40+
</div>
41+
42+
<% }) %>
2243
</div>

‎src/www/views/partials/principes.ejs‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
<div class="panel-heading">Les principes du robot</div>
33
<div class="panel-body">
44
<ul>
5-
<li>Je possède plusieurs fonctionnalités implémentées par des Plugins.
6-
Mes plugins sont reliés à mes centres d'intérêts.</li>
75
<li>Je peux tenter d'<b>identifier des plantes ou fleurs</b> : c'est mon plugin <b>Pl@ntNet</b>.</li>
86
<li>Je suis jeune, mais j'apprends de mes
97
<a href="<%- projectIssues %>" data-umami-event="{projectIssues link}" id="projectIssues-link">erreurs</a>.</li>

0 commit comments

Comments
 (0)