Pages are now dynamically fill

src-capacitor/android/app/src/main/assets/capacitor.config.json

@@ -5,6 +5,6 @@
 	"npmClient": "npm",
 	"webDir": "www",
 	"server": {
-		"url": "http://192.168.99.133:9500"
+		"url": "http://192.168.190.127:9500"
 	}
 }

src-capacitor/android/app/src/main/java/com/benoiteirik/theochrone/BridgePlugin.java

@@ -0,0 +1,88 @@
+package com.benoiteirik.theochrone;
+
+import android.os.AsyncTask;
+import android.util.Log;
+
+import com.getcapacitor.JSObject;
+import com.getcapacitor.Plugin;
+import com.getcapacitor.PluginCall;
+import com.getcapacitor.PluginMethod;
+import com.getcapacitor.annotation.CapacitorPlugin;
+
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.Element;
+import org.jsoup.select.Elements;
+
+import java.io.IOException;
+
+@CapacitorPlugin(name = "Bridge")
+public class BridgePlugin extends Plugin {
+  private JSObject dataHTML;
+
+  // Bridge data between back and front
+  private PluginCall festTextesCall;
+
+
+  @PluginMethod()
+  public void echo(PluginCall call) {
+    String value = call.getString("value");
+    Log.d("MSG:", " " + value);
+    JSObject ret = new JSObject();
+    ret.put("value", value);
+    call.resolve(ret);
+  }
+
+  @PluginMethod()
+  public void  getFestTextes(PluginCall call) {
+    String festURL = call.getString("url");
+    festTextesCall = call;
+    AsyncTask<String, Void, Void> fetch = new fetchFestTextes().execute(festURL);
+  }
+
+  private class fetchFestTextes extends AsyncTask<String, Void, Void> {
+
+    @Override
+    protected Void doInBackground(String... params) {
+      try {
+        dataHTML = new JSObject();
+        Document doc = Jsoup.connect(params[0])
+          .timeout(0)
+          .header("Content-Type", "text/html; charset=ISO-8859-1")
+          .get();
+
+        Elements imgs = doc.select("img[src]");
+        for (Element img : imgs) {
+          String src = img.attr("src");
+          if (!src.startsWith("http")) {
+            src = "https://introibo.fr/" + src;
+          }
+          img.attr("src", src);
+          img.attr("style", "width:100%; object-fit: contain;");
+        }
+
+        Elements links = doc.select("a[href]");
+        for (Element link : links) {
+          link.removeAttr("href");
+        }
+
+        Elements cells = doc.select("td");
+        for (Element cell : cells) {
+          cell.attr("valign", "top");
+        }
+
+        String textes = doc.select("#principal .texte").html();
+
+        dataHTML.put("data", textes);
+      } catch (IOException e) {
+        e.printStackTrace();
+      }
+
+      return null;
+    }
+
+    protected void onPostExecute(Void result) {
+      festTextesCall.resolve(dataHTML);
+    }
+  }
+}

src-capacitor/android/app/src/main/java/com/benoiteirik/theochrone/MainActivity.java

@@ -18,6 +18,8 @@ public class MainActivity extends BridgeActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
+    registerPlugin(BridgePlugin.class);
+
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
       CharSequence name = getString(R.string.app_name);
       String description = getString(R.string.app_name);

src/layouts/MainLayout.vue

@@ -5,7 +5,11 @@
       <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" v-if="$route.path === '/'" />
       <q-btn flat dense round icon="arrow_back" aria-label="Arrow Back" @click="$router.back()" v-else />
 
-      <q-toolbar-title class="text-center">
+
+      <q-toolbar-title class="text-center" v-if="$route.path !== '/'">
+        {{ $route.query.title }}
+      </q-toolbar-title>
+      <q-toolbar-title class="text-center" v-else>
         Theochrone
       </q-toolbar-title>
 

src/pages/FestPage.vue

@@ -1,67 +1,74 @@
 <template>
 <q-page class="q-pa-md row items-start justify-evenly">
-  <q-img src="~assets/images/image_not_found.png" fit="fill" />
+  <q-img :src="fest.img || '~assets/images/image_not_found.png'" fit="contain" class="q-mb-md" />
 
-  <q-list bordered separator>
+  <q-list bordered separator style="background: #fafafa;">
     <q-item clickable v-ripple>
       <q-item-section class="text-bold">Propre</q-item-section>
-      <q-item-section>Romain</q-item-section>
+      <q-item-section>{{ fest.proper }}</q-item-section>
     </q-item>
 
     <q-item clickable v-ripple>
       <q-item-section class="text-bold">Édition</q-item-section>
-      <q-item-section>1962</q-item-section>
+      <q-item-section>{{ fest.edition }}</q-item-section>
     </q-item>
 
     <q-item clickable v-ripple>
       <q-item-section class="text-bold">Célébration</q-item-section>
-      <q-item-section>Cette fête peut être célébrée.</q-item-section>
+      <q-item-section>{{ fest.celebration }}</q-item-section>
     </q-item>
 
     <q-item clickable v-ripple>
       <q-item-section class="text-bold">Classe</q-item-section>
-      <q-item-section>4</q-item-section>
+      <q-item-section>{{ fest.class }}</q-item-section>
     </q-item>
 
     <q-item clickable v-ripple>
       <q-item-section class="text-bold">Couleur liturgique</q-item-section>
-      <q-item-section>Blanc</q-item-section>
+      <q-item-section>{{ fest.color }}</q-item-section>
     </q-item>
 
     <q-item clickable v-ripple>
       <q-item-section class="text-bold">Temporal</q-item-section>
-      <q-item-section>Oui</q-item-section>
+      <q-item-section>{{ fest.temporal }}</q-item-section>
     </q-item>
 
     <q-item clickable v-ripple>
       <q-item-section class="text-bold">Sanctoral</q-item-section>
-      <q-item-section>Non</q-item-section>
+      <q-item-section>{{ fest.sanctoral }}</q-item-section>
     </q-item>
 
     <q-item clickable v-ripple>
       <q-item-section class="text-bold">Temps liturgique</q-item-section>
-      <q-item-section>Temps de l'Épiphanie (Temps de Noël)</q-item-section>
+      <q-item-section>{{ fest.liturgicalTime }}</q-item-section>
     </q-item>
 
     <q-item clickable v-ripple>
       <q-item-section class="text-bold">Fête transférée</q-item-section>
-      <q-item-section>Non</q-item-section>
+      <q-item-section>{{ fest.transferedFest }}</q-item-section>
     </q-item>
   </q-list>
 
-  <q-btn no-caps flat padding="md" class="full-width text-underline" color="primary" style="text-decoration: underline"
-    @click="$router.push('/textes')">Textes de la
+  <q-btn no-caps flat padding="md" class="full-width text-underline" color="primary"
+    style="text-decoration: underline; background: #f5f5f5;"
+    @click="$router.push({ path: '/textes', query: { title: fest.title, url: fest.massTextURL } })">Textes
+    de la
     messe et de l'office</q-btn>
 </q-page>
 </template>
 
 <script lang="ts">
+import { Fest } from 'src/assets/js/models';
 import { defineComponent } from 'vue';
+import { useRoute } from 'vue-router'
 
 export default defineComponent({
   name: 'FestPage',
   setup() {
+    var fest: Fest = JSON.parse(useRoute().query.data?.toString() || '') as Fest
+
     return {
+      fest
     }
   }
 });

src/pages/IndexPage.vue

@@ -21,7 +21,7 @@
 
   <div class="q-pa-md">
     <div v-ripple class="relative-position q-pa-sm full-width row jutify-between items-center no-wrap box-title"
-      @click="$router.push('/fest')">
+      @click="$router.push({ path: '/fest', query: { title: fests[swiperIndex].title, data: JSON.stringify(fests[swiperIndex]) } })">
       <div class="row justify-start items-center full-height col-2">
         <q-img :src="getOrnamentImg[fests[swiperIndex].color as keyof typeof getOrnamentImg]" class="full-height"
           fit="contain" />

src/pages/TextesPage.vue

@@ -6,7 +6,11 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router'
 import { Http } from '../../src-capacitor/node_modules/@capacitor-community/http';
+import { registerPlugin } from '@capacitor/core';
+
+const Bridge = registerPlugin('Bridge');
 
 export default defineComponent({
   name: 'TextesPage',
@@ -15,14 +19,8 @@ export default defineComponent({
     const bodyFest = ref<string>('')
 
     onMounted(async () => {
-      const response = await Http.get({ url: 'https://introibo.fr/04-02-St-Andre-Corsini-eveque-et' });
-
-      const body = new DOMParser().parseFromString(
-        response.data,
-        'text/html',
-      ).body;
-
-      bodyFest.value = body.querySelector('#principal .texte')?.innerHTML || ''
+      const response = await Bridge.getFestTextes({ url: useRoute().query.url });
+      bodyFest.value = response.data
     })
 
     return {
@@ -32,3 +30,39 @@ export default defineComponent({
   }
 })
 </script>
+
+<style>
+* {
+  hyphens: auto;
+}
+
+p:first-child {
+  display: none;
+}
+
+h3,
+h3 * {
+  padding: 0;
+  margin: 10px;
+  font-size: 20px;
+  color: black;
+  font-weight: 600;
+  text-align: center;
+  line-height: 40px;
+}
+
+a {
+  text-decoration: none;
+}
+
+table {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-bottom: 20px;
+}
+
+table:first-of-type {
+  width: 100%;
+  border: 1px solid lightgrey;
+}
+</style>