agecem/babillard
5
0
Fork 0
Code Issues 5 Pull requests Releases Packages 1 Activity

wip: APIv2, UI rework, js cleanup

Browse source 
Retirer jquery

etc.
This commit is contained in:
Victor Lacasse-Beaudoin 2025-02-11 21:24:42 -05:00
parent 37031749b4
commit 52dd5693fb
11 changed files with 126 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

57
ui/css/style.css
View file

@ -20,60 +20,3 @@ embed {
flex: 1;
min-height: 0;
}
#bar {
width: 100%;
background-image: linear-gradient(to right, #033ead, #3093d1);
color: white;
font-family: 'Roboto', sans-serif;
font-weight: bold;
display: flex;
align-items: center;
min-height: 75px;
}
img#bar-bg {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
#time {
font-size: 300%;
height: 53px;
}
#text-content {
white-space: nowrap;
z-index: 1;
display: block;
height: 100%;
padding-top: 55px;
position: relative;
}
#text-container {
height: 100%;
background-image: linear-gradient(to right, #033ead, #3093d1);
display: flex;
align-items: center;
font-size: 20px;
flex-grow: 1;
}
#text-content div {
display: block;
position: fixed;
height: 100%;
}
#date-time {
display: flex;
flex-flow: column;
align-items: center;
height: 100%;
background-color: #033ead;
z-index: 1;
width: 225px;
}

6
ui/embed.go
View file

@ -2,17 +2,17 @@ package ui
import "embed"
//go:embed html/*
//go:embed html/*.html
var htmlFS embed.FS
func HTMLFS() embed.FS { return htmlFS }
//go:embed css/*
//go:embed css/*.css
var cssFS embed.FS
func CSSFS() embed.FS { return cssFS }
//go:embed js/*
//go:embed js/*.js
var jsFS embed.FS
func JSFS() embed.FS { return jsFS }

32
ui/html/index.html
View file

@ -1,43 +1,15 @@
<html>
<head>
<title>AGECEM | slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="/public/js/slider.js"></script>
<!-- BROKEN, brise slider.js quand inclu
<script src="text.js"></script>
!-->
<title>AGECEM | babillard</title>
<link rel="stylesheet" href="/public/css/style.css">
<script src="/public/js/carousel.js"></script>
</head>
<body>
<p id="debug"></p>
<div id="contenu">
<embed id="image"/>
</div>
<!-- BROKEN
<div id="bar">
<div id="date-time">
<div id="time"></div>
<div id="date"></div>
</div>
<div id="text-container">
<div id="text-content">
<div>Ce texte sera remplacé par jQuery!</div>
</div>
</div>
</div>
--!>
</body>
</html>

32
ui/js/carousel.js Normal file
View file

@ -0,0 +1,32 @@
// 2025-02 Victor Lacasse-Beaudoin, AGECEM
//
// Carousel d'images à afficher sur https://babillard.agecem.com/ ainsi que
// sur la télévision du Centre-Multi Services de l'AGECEM.
//
// WIP
async function getContenu() {
const url = "/api/v2/contenu/";
try {
const response = await fetch(url);
if (!response.ok) {
//TODO start interval then refresh page to try again
throw new Error(`Response status: ${response.status}`);
}
json = await response.json();
console.log("[i] got contenu");
console.log(json);
//startCarousel(json);
}
catch (error) {
console.error(error.message);
}
}
function run(){
console.log("[i] run");
getContenu();
}
run();

45
ui/js/slider.js
View file

@ -1,45 +0,0 @@
var images = [];
var indexImages = 0;
function afficherIndex() {
$('#debug').text(indexImages);
}
function afficherImage() {
$('#image').attr('src', "/api/contenu/"+images[indexImages]);
}
function augmenterIndex() {
if (indexImages >= images.length - 1) {
indexImages = 0;
} else {
indexImages ++;
}
}
function executionLoop(){
//afficherIndex();
afficherImage();
augmenterIndex();
}
function obtenirContenu(){
var response = '';
$.ajax({
type: "GET",
url: window.location.origin + "/api/contenu",
async: false,
success: function(text) {
response = text;
}
});
console.log(response);
images = response.split(';');
console.log(images);
}
$(function(){
obtenirContenu();
var executionInterval = setInterval(executionLoop, (Math.floor(Math.random() * 6)+15)*1000);
});

65
ui/js/text.js
View file

@ -1,65 +0,0 @@
// VARS
// Vitesses
var vitesseTexte = 4000; // En millisecondes
// Coordonnées
var pointInitial = '100%';
var pointDestination = '-=2000px';
// Messages
var messageDiv = '#text-content div'
var messages = [];
var indexMessages = 0;
var fontSize;
var fontSizeLength;
// FUNCS
function animerTexte(){
// Diriger le texte vers la droite jusqu'à `pointDestination'.
// Récursivement reset la position du texte.
$(messageDiv).animate({left: pointDestination}, vitesseTexte, 'linear', resetTexte);
}
function resetTexte(){
// Remettre le texte au point initial
$(messageDiv).css('left', pointInitial);
// Récursivement animer le texte
animerTexte();
}
function updateTexte(){
var message = messages[indexMessages];
$(messageDiv).text(message);
augmenterIndex();
}
function augmenterIndex() {
if (indexMessages >= messages.length - 1) {
indexMessages = 0;
} else {
indexMessages ++;
}
}
function initialiserMessages(){
fontSize = $(messageDiv).css('fontSize');
fontSizeLength = fontSize.length;
// TODO Importer messages
messages = ['hello, world!'];
// TODO pointDestination = -1 * longueurMessage
//pointDestination = messages[0].width * fontSize.substring(fontSize.length-2);
pointDestination = messages[indexMessages].width;
}
// EXEC
$(function(){
//initialiserMessages();
resetTexte();
});