From 9c10ef5e7e2328820043e1d36117d681ab76a1ff Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Fri, 12 Nov 2021 17:36:30 +0100
Subject: [PATCH] Add footer with version info

---
 Dockerfile  | 10 ++++++++++
 src/App.css | 14 ++++++++++++++
 src/App.tsx | 23 ++++++++++++++++-------
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 1c2182d..c7c4d49 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -12,5 +12,15 @@ COPY src ./src
 ARG REACT_APP_TCL_AUTH
 RUN yarn build
 
+FROM alpine/git AS git
+WORKDIR /app
+COPY .git ./
+RUN git describe --always > /version
+RUN date +"%Y-%m-%d %H:%M:%S" > /date
+
 FROM nginx AS prod
+COPY --from=git /version /app/.version
+COPY --from=git /date /app/.date
+RUN export REACT_APP_VERSION=$(cat /app/.version)
+RUN export REACT_APP_DATE=$(cat /app/.date)
 COPY --from=build /app/build /usr/share/nginx/html
diff --git a/src/App.css b/src/App.css
index fe6f2fd..06bd737 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,6 +3,10 @@ body {
     margin-top: 1em;
 }
 
+.main {
+    margin-bottom: 2rem;
+}
+
 .placeholder:empty:before {
     content: "\200b";
 }
@@ -11,4 +15,14 @@ body {
     display: inline-block;
     width: 50px;
     background-color: #c9c9c9;
+}
+
+footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1.5rem;
+    background-color: #e8e8e8;
+    font-size: 1rem;
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 375510f..a1f3d90 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,15 +19,24 @@ class App extends React.Component<{}, IAppState> {
     }
 
     render() {
-        return <div className="container">
-            <div className="row">
-                {this.state.passages.map((ligne) => <Ligne key={ligne.ligne} ligne={ligne.ligne} delais={ligne.delais}/>)}
-            </div>
-            <div className="row">
-                <div className="col-12">
-                    <button className="btn btn-block btn-secondary" onClick={this.reload}>Refresh</button>
+        return <div>
+            <div className="container main">
+                <div className="row">
+                    {this.state.passages.map((ligne) => <Ligne key={ligne.ligne} ligne={ligne.ligne}
+                                                               delais={ligne.delais}/>)}
+                </div>
+                <div className="row">
+                    <div className="col-12">
+                        <button className="btn btn-block btn-secondary" onClick={this.reload}>Refresh</button>
+                    </div>
                 </div>
             </div>
+
+            <footer>
+                <p className="container">
+                    {process.env.REACT_APP_VERSION} built on {process.env.REACT_APP_DATE}
+                </p>
+            </footer>
         </div>;
     }