add restart always to nginx service

docker-compose.dev.yml

@@ -0,0 +1,52 @@
+version: "3.9"
+
+services:
+  back:
+    image: python:3.10
+    working_dir: /code
+    volumes:
+      - ./back:/code
+    command: >
+      sh -c "pip install -r requirements.txt &&
+             uvicorn main:app --host 0.0.0.0 --port 8000 --reload"
+    environment:
+      SERVICE_ORIGIN: ${SERVICE_ORIGIN}
+      DB_HOST: database
+      MARIADB_USER: ${MARIADB_USER}
+      MARIADB_PASSWORD: ${MARIADB_PASSWORD}
+      MARIADB_DATABASE: ${MARIADB_DATABASE}
+      SERVICE_SECRET_KEY: ${SERVICE_SECRET_KEY}
+    ports:
+      - "8000:8000"
+    depends_on:
+      - database
+
+  front:
+    image: node:19.1-alpine
+    working_dir: /app
+    volumes:
+      - ./front:/app
+    command: sh -c "npm install && npm run serve"
+    ports:
+      - "8080:8080"
+    environment:
+      VUE_APP_ROOT_FQDN: ${SERVICE_ROOT_FQDN}
+    depends_on:
+      - back
+
+  database:
+    image: mariadb
+    restart: always
+    environment:
+      MARIADB_USER: ${MARIADB_USER}
+      MARIADB_PASSWORD: ${MARIADB_PASSWORD}
+      MARIADB_ROOT_PASSWORD: ${MARIADB_ROOT_PASSWORD}
+      MARIADB_DATABASE: ${MARIADB_DATABASE}
+    volumes:
+      - db:/var/lib/mysql
+      - ./back/db/:/docker-entrypoint-initdb.d/
+    ports:
+      - "3306:3306"
+
+volumes:
+  db:

docker-compose.yml

@@ -1,9 +1,12 @@
-version: "2"
+version: "3.9"
 services:
   nginx:
+    restart: always
     build:
       context: .
       dockerfile: front/Dockerfile
+      args:
+        VUE_APP_ROOT_FQDN: ${SERVICE_ROOT_FQDN}
     ports:
       - 80:80
     depends_on:
@@ -32,6 +35,7 @@ services:
       MARIADB_PASSWORD: ${MARIADB_PASSWORD}
       MARIADB_ROOT_PASSWORD: ${MARIADB_ROOT_PASSWORD}
       MARIADB_DATABASE: ${MARIADB_DATABASE}
+      ROOT_FQDN: ${ROOT_FQDN}
     volumes:
       - db:/var/lib/mysql
       - ./back/db/:/docker-entrypoint-initdb.d/

front/Dockerfile

@@ -2,6 +2,9 @@ FROM node:19.1-alpine AS build
 
 WORKDIR /app
 
+ARG VUE_APP_ROOT_FQDN
+ENV VUE_APP_ROOT_FQDN=$VUE_APP_ROOT_FQDN
+
 COPY front/package.json front/package-lock.json /app/
 RUN npm install
 

front/src/App.vue

@@ -85,7 +85,6 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 5rem;
 }
 
 .router {

front/src/components/PaginationFooter.vue

@@ -26,7 +26,7 @@
 
 .page {
   border: none;
-  padding: 1rem;
+  padding: 0.5rem;
   margin: 0.2rem;
 }
 
@@ -34,6 +34,7 @@ footer {
   display: flex;
   padding: 0.2rem;
   align-items: center;
+  max-width: 100%;
 }
 
 

front/src/components/SearchHeader.vue

@@ -37,7 +37,7 @@ export default {
 
 .search {
   display: flex;
-  min-width: 95%;
+  width: 100vw;
   margin-top: 1rem;
   margin-bottom: 1rem;
 }

front/src/components/TableView.vue

@@ -1,7 +1,7 @@
 <template>
 <table>
   <tr>
-    <th v-bind:style="{ 'min-width': this.width }" v-for="head in headings" :key="head">{{ head }}</th>
+    <th v-for="head in headings" :key="head">{{ head }}</th>
   </tr>
   <slot></slot>
 </table>
@@ -19,5 +19,25 @@ export default {
 <style scoped>
 th {
   text-align: left;
+  width: 20%;
+
 }
+
+tr {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+table {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 30em) {
+  tr {
+    width: 100vw;
+  }
+}
+
 </style>

front/src/config.js

@@ -1,5 +1,4 @@
-// const ROOT_FQDN = 'https://bookshelf.aldon.fr/api';
-const ROOT_FQDN = 'http://localhost:8000/api';
+const ROOT_FQDN = process.env.VUE_APP_ROOT_FQDN
 
 export {
     ROOT_FQDN

front/src/views/TheBooks.vue

@@ -20,7 +20,7 @@
             </button>
           </form>
           <SearchHeader page="Books" @changeSearch="(s) => {editSearch(s)}"/>
-          <TableView ref="table" :headings="headings" width="15rem">
+          <TableView ref="table" :headings="headings">
             <tr v-for="book in this.$store.getters.getBooks" :key="book">
               <td v-if="editRow === book.biblio_Index">
                 <DropDown
@@ -28,7 +28,7 @@
                   field="Auteur"
                   :inputValue="book.Auteur"
                   @selected="(n) => {formEdit.author = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Auteur }}</td>
               <td v-if="editRow === book.biblio_Index">
@@ -37,7 +37,7 @@
                   field="Titre"
                   :inputValue="book.Titre"
                   @selected="(n) => {formEdit.title = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Titre }}</td>
               <td v-if="editRow === book.biblio_Index">
@@ -46,7 +46,7 @@
                   field="Editeur"
                   :inputValue="book.Editeur"
                   @selected="(n) => {formEdit.editor = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Editeur }}</td>
               <td v-if="editRow === book.biblio_Index">
@@ -55,7 +55,7 @@
                   field="Type"
                   :inputValue="book.Type"
                   @selected="(n) => {formEdit.type = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Type }}</td>
               <div class="button-panel">
@@ -87,7 +87,7 @@ export default {
   },
   data() {
     return {
-      headings: ['Author', 'Title', 'Editor', 'Type'],
+      headings: ['Author', 'Title', 'Editor', 'Type', 'Control'],
       editMode: false,
       editRow: undefined,
       addMode: false,
@@ -188,11 +188,45 @@ export default {
 </script>
 <style scoped>
 main {
-  max-width: 60.5vw;
+  width: 80vw
 }
 
-td input {
-  width: 14.5rem;
+header {
+  width: 80vw;
+}
+
+tr {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  width: 80vw;
+  align-items: center;
+
+}
+
+td {
+  width: 20%;
+}
+
+.button-panel {
+  width: 20%;
+  display: flex;
+  flex-direction: flex-end;
+}
+
+@media (max-width: 30em) {
+  main {
+    width: 100vw;
+  }
+
+  tr {
+    width: 100vw;
+  }
+
+  td {
+    overflow-x: hidden;
+    white-space: nowrap
+  }
 }
 
 @keyframes lineInsertedIn {