From fb0f00c184a479a48de5b9743e7d977a8be1d1a5 Mon Sep 17 00:00:00 2001
From: Torsten <torsten.schneider@programmschmiede.de>
Date: Wed, 29 Jan 2020 12:57:36 +0100
Subject: [PATCH] Loading page body from DB and display on main page.

---
 motorradig/.idea/workspace.xml             |  21 +--
 motorradig/public/js/app.js                | 160 ++++++---------------
 motorradig/resources/js/store.js           |   3 +-
 motorradig/resources/js/views/EditPage.vue |  40 ++----
 motorradig/resources/js/views/Main.vue     |  40 ++----
 motorradig/routes/api.php                  |   3 +
 6 files changed, 81 insertions(+), 186 deletions(-)

diff --git a/motorradig/.idea/workspace.xml b/motorradig/.idea/workspace.xml
index 1b5c4bd..99715ac 100644
--- a/motorradig/.idea/workspace.xml
+++ b/motorradig/.idea/workspace.xml
@@ -2,21 +2,11 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="eed7de89-f054-487c-bf59-36356758942b" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/app/Http/Controllers/PageController.php" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/app/Pagecontents.php" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/config/jwt.php" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/database/migrations/2020_01_28_072844_create_pagecontents_table.php" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/motorradig.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/motorradig.iml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/php.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/php.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/Http/Middleware/Authenticate.php" beforeDir="false" afterPath="$PROJECT_DIR$/app/Http/Middleware/Authenticate.php" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/User.php" beforeDir="false" afterPath="$PROJECT_DIR$/app/User.php" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/composer.json" beforeDir="false" afterPath="$PROJECT_DIR$/composer.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/composer.lock" beforeDir="false" afterPath="$PROJECT_DIR$/composer.lock" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/config/auth.php" beforeDir="false" afterPath="$PROJECT_DIR$/config/auth.php" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/public/js/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/app.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/resources/js/store.js" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/store.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/resources/js/views/EditPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/views/EditPage.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/resources/js/views/Main.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/views/Main.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/resources/js/views/auth/Login.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/views/auth/Login.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/routes/api.php" beforeDir="false" afterPath="$PROJECT_DIR$/routes/api.php" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -233,7 +223,8 @@
       <workItem from="1575966299565" duration="383000" />
       <workItem from="1579075615585" duration="8354000" />
       <workItem from="1579595422946" duration="16270000" />
-      <workItem from="1579800919877" duration="4693000" />
+      <workItem from="1579800919877" duration="5421000" />
+      <workItem from="1580281771610" duration="2954000" />
     </task>
     <servers />
   </component>
@@ -257,10 +248,10 @@
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
   </component>
   <component name="WindowStateProjectService">
-    <state x="1371" y="133" width="1720" height="857" key="com.intellij.history.integration.ui.views.FileHistoryDialog" timestamp="1579784437079">
+    <state x="1280" y="23" width="1720" height="857" maximized="true" key="com.intellij.history.integration.ui.views.FileHistoryDialog" timestamp="1580282545601">
       <screen x="1280" y="23" width="1920" height="1057" />
     </state>
-    <state x="1371" y="133" width="1720" height="857" key="com.intellij.history.integration.ui.views.FileHistoryDialog/0.23.1280.777/1280.23.1920.1057@1280.23.1920.1057" timestamp="1579784437079" />
+    <state x="1280" y="23" width="1720" height="857" maximized="true" key="com.intellij.history.integration.ui.views.FileHistoryDialog/0.23.1280.777/1280.23.1920.1057@1280.23.1920.1057" timestamp="1580282545601" />
     <state x="1903" y="197" width="673" height="708" key="find.popup" timestamp="1579597123793">
       <screen x="1280" y="23" width="1920" height="1057" />
     </state>
diff --git a/motorradig/public/js/app.js b/motorradig/public/js/app.js
index aefdeb9..ae70dda 100644
--- a/motorradig/public/js/app.js
+++ b/motorradig/public/js/app.js
@@ -1891,6 +1891,10 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
 
 
 /* harmony default export */ __webpack_exports__["default"] = ({
@@ -1904,12 +1908,20 @@ __webpack_require__.r(__webpack_exports__);
         extensions: [new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Blockquote"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["BulletList"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["CodeBlock"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["HardBreak"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Heading"]({
           levels: [1, 2, 3]
         }), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["HorizontalRule"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["ListItem"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["OrderedList"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["TodoItem"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["TodoList"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Link"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Bold"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Code"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Italic"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Strike"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Underline"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["History"]()],
-        content: "\n      <h2>\n        Hi there,\n      </h2>\n      <p>\n        this is a very <em>basic</em> example of tiptap.\n      </p>\n      <pre><code>body { display: none; }</code></pre>\n      <ul>\n        <li>\n          A regular list\n        </li>\n        <li>\n          With regular items \uD83D\uDC4F\n        </li>\n      </ul>\n      <blockquote>\n        It's amazing \uD83D\uDC4F\n        <br />\n        \u2013 mom\n      </blockquote>\n    "
+        content: this.$store.state.page_content
       })
     };
   },
   beforeDestroy: function beforeDestroy() {
     this.editor.destroy();
+  },
+  methods: {
+    showContent: function showContent() {
+      console.log(">>"); //console.log(this.editor.view.dom.innerText);
+      //console.log(this.editor.docView.dom.innerHTML);
+
+      console.log(this.editor.view.docView.dom.innerHTML);
+    }
   }
 });
 
@@ -1979,22 +1991,6 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
 /* harmony default export */ __webpack_exports__["default"] = ({
   data: function data() {
     return {
@@ -2027,7 +2023,9 @@ __webpack_require__.r(__webpack_exports__);
       this.$router.push('/edit_page');
     },
     loadPage: function loadPage() {
-      axios.post('http://localhost:8000/api/v1/auth/load_page', {
+      var _this2 = this;
+
+      axios.post('http://localhost:8000/api/v1/load_page', {
         page: 'testpage'
       }, {
         headers: {
@@ -2037,6 +2035,7 @@ __webpack_require__.r(__webpack_exports__);
         console.log("savePage: Loading Testpage");
         console.log("Body:");
         console.log(res.data.body);
+        _this2.$store.state.page_content = res.data.body;
       });
     },
     savePage: function savePage() {
@@ -30997,6 +30996,19 @@ var render = function() {
           [_vm._v("Impressum")]
         ),
         _vm._v(" "),
+        _c(
+          "button",
+          {
+            staticClass: "button",
+            on: {
+              click: function($event) {
+                return _vm.showContent()
+              }
+            }
+          },
+          [_vm._v("Show content")]
+        ),
+        _vm._v(" "),
         _c(
           "router-link",
           { staticClass: "button", attrs: { to: { name: "Login" } } },
@@ -31281,79 +31293,15 @@ var render = function() {
     _c("p", [_vm._v(" ")]),
     _vm._v(" "),
     _c("div", [
-      _vm._m(0),
+      _c("p", {
+        staticStyle: { "text-align": "center" },
+        attrs: { id: "main", visible: "true" }
+      }),
       _vm._v(" "),
       _c(
         "p",
         { staticStyle: { "text-align": "center" }, attrs: { visible: "true" } },
         [
-          _vm._v(
-            " Einmal im Jahr erhältst Du eine Liste aller IG-Mitglieder\n            inkl. Telefonnummern."
-          ),
-          _c("br"),
-          _vm._v(
-            "\n            Die Erscheinungstermine unserer Mitgliederliste + News sind natürlich auf die Motorrad-Saison"
-          ),
-          _c("br"),
-          _vm._v(
-            "\n            abgestimmt, ca: März, Juni und September (Saisonstart, -mitte, -ende). Für Eure (Urlaubs) Planung\n            und"
-          ),
-          _c("br"),
-          _vm._v(
-            "\n            damit der Winter nicht zu lange wird, halten wir in der November- Dezember-Ausgabe schon den"
-          ),
-          _c("br"),
-          _vm._v(
-            "\n            Tourenkalender für das nächste Jahr für Euch bereit. Zusätzlich eröffnet Dir die Liste die Möglichkeit\n            zur"
-          ),
-          _c("br"),
-          _vm._v(
-            "\n            Teilnahme an einem regelmäßigen Stammtisch, gemeinsame Ausfahrten an Wochenenden, einer"
-          ),
-          _c("br"),
-          _vm._v(
-            "\n            Urlaubsbörse sowie Saisonauftakt- und Jahrestreffen. Eigeninitiative ist hierbei erwünscht."
-          ),
-          _c("br"),
-          _vm._v(
-            "\n\n            Da leider auch diese Art der Adressenvermittlung nicht ganz ohne Kostenaufwand geht,"
-          ),
-          _c("br"),
-          _vm._v(
-            "\n            müssen wir einmal jährlich einen Selbstkostenbeitrag in Höhe von 20,- EUR erheben."
-          ),
-          _c("br"),
-          _vm._v(
-            "\n            Diese Kosten entstehen durch Werbung, Porto, Erfassungsmaterialien etc.."
-          ),
-          _c("br"),
-          _vm._v(
-            "\n            Hast Du jetzt immer noch eine positive Einstellung zu dieser Idee? Dann nichts wie hin."
-          ),
-          _c("br"),
-          _vm._v(
-            "\n            Stammtisch Düsseldorf: Wir treffen uns jeden 2. Mittwoch im Monat ab ca. 19 Uhr in:"
-          ),
-          _c("br"),
-          _vm._v("\n            Tannenbaum Düsseldorf:"),
-          _c("br"),
-          _vm._v(" "),
-          _c("br"),
-          _vm._v(" "),
-          _c(
-            "a",
-            { attrs: { href: "https://www.tannenbaum-duesseldorf.de/" } },
-            [_vm._v("https://www.tannenbaum-duesseldorf.de/")]
-          ),
-          _vm._v(
-            ". Das Douro befindet sich\n            direkt neben der Kirche."
-          ),
-          _c("br"),
-          _vm._v(
-            "\n            Parkmöglichkeiten sind im Umkreis um den Italiener genügend vorhanden."
-          ),
-          _c("br"),
-          _vm._v(" "),
           this.$store.state.user.role === "ADMIN"
             ? _c("span", [
                 _c("br"),
@@ -31363,42 +31311,17 @@ var render = function() {
                   [_vm._v("Text bearbeiten")]
                 )
               ])
-            : _vm._e()
+            : _vm._e(),
+          _vm._v(" "),
+          _c("span", {
+            domProps: { innerHTML: _vm._s(this.$store.state.page_content) }
+          })
         ]
       )
     ])
   ])
 }
-var staticRenderFns = [
-  function() {
-    var _vm = this
-    var _h = _vm.$createElement
-    var _c = _vm._self._c || _h
-    return _c(
-      "p",
-      {
-        staticStyle: { "text-align": "center" },
-        attrs: { id: "main", visible: "true" }
-      },
-      [
-        _vm._v(
-          "Das alte Problem: Die Sonne scheint und Dein Motorrad\n            ruft,"
-        ),
-        _c("br"),
-        _vm._v(
-          "\n            doch alle Deine Freunde sind plötzlich verhindert."
-        ),
-        _c("br"),
-        _c("br"),
-        _vm._v("\n            Die Idee!!"),
-        _c("br"),
-        _c("br"),
-        _vm._v("\n            Selber anrufen und angerufen werden."),
-        _c("br")
-      ]
-    )
-  }
-]
+var staticRenderFns = []
 render._withStripped = true
 
 
@@ -48140,7 +48063,8 @@ vue__WEBPACK_IMPORTED_MODULE_0___default.a.use(vuex__WEBPACK_IMPORTED_MODULE_1__
 var store = new vuex__WEBPACK_IMPORTED_MODULE_1__["default"].Store({
   state: {
     user: {},
-    user_token: {}
+    user_token: {},
+    page_content: '<h1 style="font-align:center;">Placeholder</h1>'
   }
 });
 
diff --git a/motorradig/resources/js/store.js b/motorradig/resources/js/store.js
index c6f1169..0aecab8 100644
--- a/motorradig/resources/js/store.js
+++ b/motorradig/resources/js/store.js
@@ -5,6 +5,7 @@ Vue.use(Vuex);
 export const store = new Vuex.Store({
     state:{
         user:{},
-        user_token:{}
+        user_token:{},
+        page_content:'<h1 style="font-align:center;">Placeholder</h1>'
     }
 });
diff --git a/motorradig/resources/js/views/EditPage.vue b/motorradig/resources/js/views/EditPage.vue
index 6737b80..875ca54 100644
--- a/motorradig/resources/js/views/EditPage.vue
+++ b/motorradig/resources/js/views/EditPage.vue
@@ -5,6 +5,7 @@
         </div>
 
         <div class="has-text-centered">
+
             <button class="button" @click="changeMainText('Über uns')"       >Über uns</button>
             <button class="button" @click="changeMainText('Aktuelles')"      >Aktuelles</button>
             <button class="button" @click="changeMainText('Mitgliedsantrag')">Mitgliedsantrag</button>
@@ -19,10 +20,13 @@
             <button class="button" @click="changeMainText('Wetter')"         >Wetter</button>
             <button class="button" @click="changeMainText('Links')"          >Links</button>
             <button class="button" @click="changeMainText('Impressum')"      >Impressum</button>
+
+
+            <button class="button" @click="showContent()"      >Show content</button>
+
+
             <router-link class="button" :to="{ name: 'Login' }">Log-In</router-link>
 
-
-
         </div>
 
         <p>&nbsp;</p>
@@ -50,7 +54,6 @@
 </template>
 
 <script>
-
     import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
     import {
         Blockquote,
@@ -99,33 +102,20 @@
                         new Underline(),
                         new History(),
                     ],
-                    content: `
-          <h2>
-            Hi there,
-          </h2>
-          <p>
-            this is a very <em>basic</em> example of tiptap.
-          </p>
-          <pre><code>body { display: none; }</code></pre>
-          <ul>
-            <li>
-              A regular list
-            </li>
-            <li>
-              With regular items 👏
-            </li>
-          </ul>
-          <blockquote>
-            It's amazing 👏
-            <br />
-            – mom
-          </blockquote>
-        `,
+                    content: this.$store.state.page_content,
                 }),
             }
         },
         beforeDestroy() {
             this.editor.destroy()
         },
+        methods: {
+            showContent() {
+                console.log(">>");
+                //console.log(this.editor.view.dom.innerText);
+                //console.log(this.editor.docView.dom.innerHTML);
+                console.log(this.editor.view.docView.dom.innerHTML);
+            }
+        }
     }
 </script>
diff --git a/motorradig/resources/js/views/Main.vue b/motorradig/resources/js/views/Main.vue
index 55c0de6..b9e6775 100644
--- a/motorradig/resources/js/views/Main.vue
+++ b/motorradig/resources/js/views/Main.vue
@@ -32,37 +32,21 @@
 
         <p>&nbsp;</p>
         <div>
-            <p id="main" visible="true" style="text-align:center;">Das alte Problem: Die Sonne scheint und Dein Motorrad
-                ruft,<br/>
-                doch alle Deine Freunde sind plötzlich verhindert.<br/><br/>
-                Die Idee!!<br/><br/>
-                Selber anrufen und angerufen werden.<br/>
+            <p id="main" visible="true" style="text-align:center;">
             </p>
-            <p visible="true" style="text-align:center;"> Einmal im Jahr erhältst Du eine Liste aller IG-Mitglieder
-                inkl. Telefonnummern.<br/>
-                Die Erscheinungstermine unserer Mitgliederliste + News sind natürlich auf die Motorrad-Saison<br/>
-                abgestimmt, ca: März, Juni und September (Saisonstart, -mitte, -ende). Für Eure (Urlaubs) Planung
-                und<br/>
-                damit der Winter nicht zu lange wird, halten wir in der November- Dezember-Ausgabe schon den<br/>
-                Tourenkalender für das nächste Jahr für Euch bereit. Zusätzlich eröffnet Dir die Liste die Möglichkeit
-                zur<br/>
-                Teilnahme an einem regelmäßigen Stammtisch, gemeinsame Ausfahrten an Wochenenden, einer<br/>
-                Urlaubsbörse sowie Saisonauftakt- und Jahrestreffen. Eigeninitiative ist hierbei erwünscht.<br/>
-
-                Da leider auch diese Art der Adressenvermittlung nicht ganz ohne Kostenaufwand geht,<br/>
-                müssen wir einmal jährlich einen Selbstkostenbeitrag in Höhe von 20,- EUR erheben.<br/>
-                Diese Kosten entstehen durch Werbung, Porto, Erfassungsmaterialien etc..<br/>
-                Hast Du jetzt immer noch eine positive Einstellung zu dieser Idee? Dann nichts wie hin.<br/>
-                Stammtisch Düsseldorf: Wir treffen uns jeden 2. Mittwoch im Monat ab ca. 19 Uhr in:<br/>
-                Tannenbaum Düsseldorf:<br/>
-                <br/>
-                <a href="https://www.tannenbaum-duesseldorf.de/">https://www.tannenbaum-duesseldorf.de/</a>. Das Douro befindet sich
-                direkt neben der Kirche.<br/>
-                Parkmöglichkeiten sind im Umkreis um den Italiener genügend vorhanden.<br/>
+            <p visible="true" style="text-align:center;">
 
                 <span v-if="this.$store.state.user.role==='ADMIN'"><br/><button class="button" @click="editPage">Text bearbeiten</button></span>
+
+
+                <span v-html="this.$store.state.page_content"></span>
+
+
             </p>
 
+
+
+
         </div>
     </div>
 </template>
@@ -103,7 +87,7 @@
                 this.$router.push('/edit_page');
             },
             loadPage() {
-                axios.post('http://localhost:8000/api/v1/auth/load_page',{
+                axios.post('http://localhost:8000/api/v1/load_page',{
                     page: 'testpage'
 
                 }, {
@@ -115,6 +99,8 @@
                             console.log("savePage: Loading Testpage");
                             console.log("Body:");
                             console.log(res.data.body);
+
+                            this.$store.state.page_content=res.data.body;
                         }
                     )
             }
diff --git a/motorradig/routes/api.php b/motorradig/routes/api.php
index fe50f69..37f5588 100644
--- a/motorradig/routes/api.php
+++ b/motorradig/routes/api.php
@@ -14,6 +14,9 @@ use Illuminate\Http\Request;
 */
 
 Route::prefix('v1')->group(function () {
+
+    Route::post('load_page', 'PageController@load_page');
+
     Route::prefix('auth')->group(function () {
         // Below mention routes are public, user can access those without any restriction.