Ajout de l'ouverture du LOL

README.MD

@@ -1,9 +1,28 @@
-Laboratoire Ouvert Lyonnais
-===========================
+# Laboratoire Ouvert Lyonnais
+
 Vous retrouverez la version en ligne du site du lol, il n'y a pas de bootstrap sur cette version.
 Il a été codé le plus simplement possible.
 
-TODO
-====
+## TODO
+
 Pouvoir mettre en quelques lignes les activités ou ateliers à venir avec une date.
 Est-ce le git pourrait nous permettre de faire ça ?
+
+## Oyverture du local
+
+La partie `/status/` du site informe sour l'ouverture du local.
+
+Il suffit de changer le lien symbolique `/status/index.html` vers `/status/index.ouvert.html` ou `/status/index.fermé.html` pour switcher entre le local *Ouvert* ou *Fermé*.
+
+Les commandes suivantes permettent de mettre à jour l'ouverture du local.
+Elles doivent être éxécutées à la racine du site.
+
+Pour passer le local en mode *Ouvert*
+```
+ln -s -f index.ouvert.html status/index.html
+```
+
+Pour passer le local en mode *Fermé*
+```
+ln -s -f index.fermé.html status/index.html
+```

css/style.css

@@ -88,22 +88,22 @@ a:visited {
 
 /* main area */ 
 
-main {
+#homepage {
     display: grid;
     grid-template-columns: 1fr 400px;
     grid-auto-rows: min-content;
     gap: 5px;
 }
 
-main > section {
+#homepage > section {
     padding: 0 10px;
 }
 
-main aside {
+#homepage aside {
     padding: 10px;
 }
 
-main .toolbar {
+#homepage .toolbar {
     grid-column: 1 / 3;
     padding: 0 10px;
 
@@ -111,22 +111,22 @@ main .toolbar {
 }
 
 @media screen and (max-width: 889px){
-    main {
+    #homepage {
         grid-template-columns: 1fr;
     }
 
-    main > aside {
+    #homepage > aside {
         grid-row: 3;
     }
 
-    main .toolbar {
+    #homepage .toolbar {
         grid-row: 1;
     }
 }
 
 /* toolbar */
 
-main .toolbar button {
+#homepage .toolbar button {
     border: none;
     background: none;
     color: white;
@@ -134,12 +134,12 @@ main .toolbar button {
     cursor: pointer;
 }
 
-main .toolbar button img {
+#homepage .toolbar button img {
     height: 1em;
     display: inline-block;
 }
 
-main .toolbar button img[hidden] {
+#homepage .toolbar button img[hidden] {
     display: none;
 }
 
@@ -237,3 +237,34 @@ main .toolbar button img[hidden] {
     left: 0;
     background: linear-gradient(to top, black, rgba(0,0,0,0));
 }
+
+/* Status */
+
+aside .status-container > * {
+    text-align: inherit;
+}
+
+.status-container > * {
+	text-align: center;
+}
+
+a.status-container > p {
+	text-align: inherit;
+}
+
+.status-container.opened strong {
+	color: green;
+	font-weight: bold;
+}
+
+.status-container.closed strong {
+	color: red;
+	font-weight: bold;
+}
+
+img.status-icon {
+	max-width: 125px;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}

index.html

@@ -30,7 +30,7 @@
 		</nav>
 	</header>
 
-	<main>
+	<main id="homepage">
 		<section id="description">
 			<p>Le Laboratoire ouvert lyonnais est un lieu de brassage et une communauté éclectique.
 			Son objectif est le partage des connaissances et la ré-appropriation des technologies.
@@ -56,6 +56,11 @@
 				<div>Adresse : <address>7 Place Louis Chazette 69001 Lyon</address></div>				      
 			</section>
 
+			<section>
+				<a href="/status/" id="status">Vérifier si le local est ouvert 🠖</a>
+				<script src="/js/status.js"></script>
+			</section>
+
 			<h2>Canaux</h2>
 			<section>
 				<p>IRC : canal #labolyon sur <a href="http://geeknode.org/">irc.geeknode.org</a> : besoin d'aide sur IRC? <a href=" http://www.irchelp.org">voir IRC Help</a></p>

js/status.js

@@ -0,0 +1,26 @@
+/**
+ * Fetch status content and insert main content into provided container
+ * @param {Element} containerEl Container to insert status into
+ */
+async function insertStatus(containerEl){
+
+    const baseUrl = new URL("/status/", containerEl.baseURI)
+    const res = await fetch(baseUrl);
+
+    if(!res.ok){
+        console.info(`Network error requesting status : ${res.status} ${res.statusText}`);
+        return;
+    }
+
+    const dom = new DOMParser().parseFromString(await res.text(), "text/html");
+
+    const main = dom.querySelector("main");
+
+    if(!main)
+        throw new Error("Status page does not contain a <main> element");
+
+    containerEl.innerHTML = main.innerHTML;
+    containerEl.className = main.className;
+}
+
+insertStatus(document.getElementById("status"))

status/index.fermé.html

@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Ouverture du local • Laboratoire Ouvert Lyonnais</title>
+	<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
+</head>
+
+<body>
+
+	<header id="main-header">
+		<img class="logo" src="/images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
+	</header>
+
+	<main id="content" class="status-container closed">
+		<p>Le local du LOL est actuellement <strong>Fermé</strong></p>
+
+		<img class="status-icon" src="/status/status.fermé.png" alt="Cercle rouge indiquant que le local est fermé"
+			title="Le local est fermé" />
+
+		<p>Venez pendant les horaires de permanence ou envoyez nous un petit message ;)</p>
+	</main>
+
+	<nav>
+		<a href="..">🠔 Retour au site</a>
+	</nav>
+
+</body>
+
+</html>

status/index.html

@@ -0,0 +1 @@
+index.fermé.html

status/index.ouvert.html

@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Ouverture du local • Laboratoire Ouvert Lyonnais</title>
+	<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
+</head>
+
+<body>
+
+	<header id="main-header">
+		<img class="logo" src="/images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
+	</header>
+
+	<main id="content" class="status-container opened">
+		<p>Le local du LOL est actuellement <strong>Ouvert</strong> !</p>
+
+		<img class="status-icon" src="/status/status.ouvert.png" alt="Cercle vert indiquant que le local est ouvert"
+			title="Le local est ouvert" />
+	</main>
+
+	<nav>
+		<a href="..">🠔 Retour au site</a>
+	</nav>
+
+</body>
+
+</html>