Add footer with version info

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

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;
 }

src/App.tsx

@@ -19,15 +19,24 @@ class App extends React.Component<{}, IAppState> {
     }
 
     render() {
-        return <div className="container">
+        return <div>
-            <div className="row">
+            <div className="container main">
-                {this.state.passages.map((ligne) => <Ligne key={ligne.ligne} ligne={ligne.ligne} delais={ligne.delais}/>)}
+                <div className="row">
-            </div>
+                    {this.state.passages.map((ligne) => <Ligne key={ligne.ligne} ligne={ligne.ligne}
-            <div className="row">
+                                                               delais={ligne.delais}/>)}
-                <div className="col-12">
+                </div>
-                    <button className="btn btn-block btn-secondary" onClick={this.reload}>Refresh</button>
+                <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>;
     }