新增 發布貼文 (遊戲王)

app/Http/Controllers/MessageController.php

@@ -33,7 +33,7 @@ class MessageController extends Controller
     {
         //
     }
-    
+
 
     /**
      * Store a newly created resource in storage.
@@ -44,13 +44,25 @@ class MessageController extends Controller
     public function store(StoremessageRequest $request)
     {
         //
+        $preview = "";
+        if ($request->preview == "preview") {
+            $preview = str_replace("\n", "", $request->content);
+            $preview = str_replace(" ", "", $preview);
+            $preview = strip_tags($preview);
+            $preview = mb_substr($preview, 0, 55) . "...";
+        }
+        $imageName = time() . '.' . $request->thumbnail->extension();
+
+        // Public Folder
+        $request->thumbnail->move(public_path('images'), $imageName);
+
         $message_comment = Message::create([
             'title' => $request->title,
             'content' => $request->content,
             'author_id' => $request->User()->id,
-            'preview' =>$request->preview,
+            'preview' => $preview,
             'tag' => $request->tag,
-            'thumbnail' => $request->thumbnail,
+            'thumbnail' => $imageName,
             'created_at' => now(),
         ]);
         return $message_comment;
@@ -71,7 +83,6 @@ class MessageController extends Controller
             'message_id' => $request->message_id,
         ]);
         return $message_comment;
-        
     }
 
     /**

app/Http/Requests/StoreMessageCommentRequest.php

@@ -13,7 +13,7 @@ class StoreMessageCommentRequest extends FormRequest
      */
     public function authorize()
     {
-        return false;
+        return true;
     }
 
     /**

package-lock.json

@@ -27,6 +27,7 @@
         "chart.js": "2.9.4",
         "core-js": "^3.16.0",
         "echarts": "4.8.0",
+        "gasp": "^0.0.2",
         "jsonwebtoken": "^8.5.1",
         "leaflet": "^1.6.0",
         "portal-vue": "^2.1.7",
@@ -9111,6 +9112,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gasp": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/gasp/-/gasp-0.0.2.tgz",
+      "integrity": "sha512-cJGS8HkASZXLtYnS7CHDUCutYdeV2OXW/P+SU03+allNY26GiYOfstziPjnsMW8bbdf6hoQ3caVHYNZ0YLuFCA==",
+      "dependencies": {
+        "q": "^1.0.0"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -14753,7 +14762,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
       "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
-      "dev": true,
       "engines": {
         "node": ">=0.6.0",
         "teleport": ">=0.2.0"
@@ -28369,6 +28377,14 @@
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
     },
+    "gasp": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/gasp/-/gasp-0.0.2.tgz",
+      "integrity": "sha512-cJGS8HkASZXLtYnS7CHDUCutYdeV2OXW/P+SU03+allNY26GiYOfstziPjnsMW8bbdf6hoQ3caVHYNZ0YLuFCA==",
+      "requires": {
+        "q": "^1.0.0"
+      }
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -32903,8 +32919,7 @@
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
-      "dev": true
+      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
     },
     "qs": {
       "version": "6.2.3",

package.json

@@ -52,6 +52,7 @@
     "chart.js": "2.9.4",
     "core-js": "^3.16.0",
     "echarts": "4.8.0",
+    "gasp": "^0.0.2",
     "jsonwebtoken": "^8.5.1",
     "leaflet": "^1.6.0",
     "portal-vue": "^2.1.7",
@@ -90,4 +91,4 @@
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2"
   }
-}
+}

resources/js/src/navigation/vertical/index.js

@@ -31,15 +31,6 @@ export default [{
                     }
                 },
             },
-            {
-                title: 'Edit',
-                route: {
-                    name: 'pages-blog-edit',
-                    params: {
-                        id: 1
-                    }
-                },
-            },
         ],
     },
     {

resources/js/src/views/SecondPage.vue

@@ -1,22 +1,88 @@
 <template>
-  <b-card title="Create Awesome 🙌">
-    <b-card-text>This is your second page.</b-card-text>
-    <b-card-text>Chocolate sesame snaps pie carrot cake pastry pie lollipop muffin. Carrot cake dragée chupa chups jujubes. Macaroon liquorice cookie wafer tart marzipan bonbon. Gingerbread jelly-o dragée chocolate.</b-card-text>
+  <b-card title="YuGiOh">
+    <b-card-text>YuGiOh LP模擬</b-card-text>
+    <div>
+      <B-Button @click="countDown()" variant="info">歸零</B-Button>
+      <B-Button @click="reset()" variant="primary">重置</B-Button>
+      <div class="container">
+        <img src="/LP.png" style="width:200px;">
+        <div class="centered">{{ animatedNumber }}</div>
+      </div>
+    </div>
   </b-card>
-</template>
 
-<script>
-import { BCard, BCardText } from 'bootstrap-vue'
 
+
+</template>
+<script>
+import { BCard, BCardText,BButton } from 'bootstrap-vue'
+// const sound = require("@/assets/hp.mp3");
 export default {
   components: {
     BCard,
     BCardText,
+    BButton,
+  },
+  data() {
+    return {
+      tweenedNumber: 4000,
+      number: 4000,
+    }
   },
+  computed: {
+    animatedNumber: function () {
+      return this.tweenedNumber.toFixed(0);
+    }
+  },
+  methods:{
+    countDown(){
+      this.number = 0;
+    },
+    reset(){
+      this.number = 4000;
+    }
+  },
+  watch: {
+    number: function (newValue) {
+      const path = "/hp.mp3";
+      const audio = new Audio(path);
+      var playPromise = audio.play();
+      if (playPromise !== undefined) {
+        playPromise.then(_ => {
+          gsap.to(this.$data, { duration: 1.6, tweenedNumber: newValue });
+        })
+          .catch(error => {
+            console.log(`playSound error: ${error}`);
+          });
+      }
+
+    }
+  }
 }
 
 </script>
 
 <style>
+.container {
+  position: relative;
+  text-align: center;
+  font-size: 48px;
+  font-family: serif;
+  font-style: italic;
+}
 
+.centered {
+  position: absolute;
+  top: 65%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: linear-gradient(to bottom, #E5DDDB, #9A8B76, #7F723E);
+  background-clip: text;
+  -webkit-background-clip: text;
+  text-stroke: 1px #3A3230;
+  -webkit-text-stroke: 1px #3A3230;
+  text-align: right;
+  color: transparent;
+  width:100px;
+}
 </style>

resources/js/src/views/pages/blog/BlogDetail.vue

@@ -9,7 +9,7 @@
 				<!-- blogs -->
 				<b-col cols="12">
 					<b-card
-						:img-src="blogDetail.blog.thumbnail"
+						:img-src="getThumbnail(blogDetail.blog.thumbnail)"
 						img-top
 						img-alt="Blog Detail Pic"
 						:title="blogDetail.blog.title">
@@ -28,7 +28,7 @@
 									<b-link class="text-body">{{ formatName(blogDetail.blog.author_id) }}</b-link>
 								</small>
 								<span class="text-muted ml-75 mr-50">|</span>
-								<small class="text-muted">{{ formatTime(blogDetail.blog.created_at) }}</small>
+								<small class="text-muted">{{ formatTime(blogDetail.blog.created_at, 'LLLL') }}</small>
 							</b-media-body>
 						</b-media>
 						<div class="my-1 py-25">
@@ -82,7 +82,7 @@
 									<h6 class="font-weight-bolder mb-25">
 										{{ formatName(comment.author_id) }}
 									</h6>
-									<b-card-text>{{ formatTime(comment.created_at) }}</b-card-text>
+									<b-card-text>{{ formatTime(comment.created_at, 'LLLL') }}</b-card-text>
 									<b-card-text>
 										{{ comment.content }}
 									</b-card-text>
@@ -201,8 +201,8 @@
 						<b-link
 							:to="{ name: 'pages-blog-detail', params: { id: recentpost.id } }">
 							<b-img
-								:src="recentpost.thumbnail"
-								:alt="recentpost.thumbnail.slice(6)"
+								:src="getThumbnail(recentpost.thumbnail)"
+								:alt="getThumbnail(recentpost.thumbnail).slice(6)"
 								width="100"
 								rounded
 								height="70" />
@@ -217,7 +217,7 @@
 							</b-link>
 						</h6>
 						<span class="text-muted mb-0">
-							{{ formatTime(recentpost.created_at) }}
+							{{ formatTime(recentpost.created_at, 'll') }}
 						</span>
 					</b-media-body>
 				</b-media>
@@ -358,8 +358,8 @@ export default {
 			if (tag.includes('吃到飽')) return 'light-danger'
 			return 'light-primary'
 		},
-		formatTime(value) {
-			return moment(value).format('LLLL');
+		formatTime(value, format) {
+			return moment(value).format(format);
 		},
 		formatName(id) {
 			return this.nameList[id];
@@ -382,7 +382,6 @@ export default {
 			});
 		},
 		scrollToComment() {
-			console.log(location.hash);
 			if (location.hash == '#blogComment') {
 				const element = document.getElementById('scroll-Anchor');
 				element.scrollIntoView({
@@ -391,6 +390,9 @@ export default {
 				});
 			}
 		},
+		getThumbnail(img) {
+			return img.includes("http") ? img : "/images/" + img;
+		}
 	},
 	watch: {
 		'$route': function () {
@@ -420,4 +422,12 @@ export default {
 
 <style lang="scss">
 @import '~@resources/scss/vue/pages/page-blog.scss';
+
+.blog-recent-post-title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
 </style>

resources/js/src/views/pages/blog/BlogList.vue

@@ -14,8 +14,8 @@
           no-body>
           <b-link :to="{ name: 'pages-blog-detail', params: { id: blog.id } }">
             <b-img
-              :src="blog.thumbnail"
-              :alt="blog.thumbnail.slice(5)"
+              :src="getThumbnail(blog.thumbnail)"
+              :alt="getThumbnail(blog.thumbnail).slice(5)"
               class="card-img-top" />
           </b-link>
           <b-card-body>
@@ -41,7 +41,7 @@
                   <b-link class="text-body">{{ formatName(blog.author_id) }}</b-link>
                 </small>
                 <span class="text-muted ml-75 mr-50">|</span>
-                <small class="text-muted">{{ formatTime(blog.created_at) }}</small>
+                <small class="text-muted">{{ formatTime(blog.created_at, 'LLLL') }}</small>
               </b-media-body>
             </b-media>
             <div class="my-1 py-25">
@@ -165,8 +165,8 @@
           <b-media-aside class="mr-2">
             <b-link :to="{ name: 'pages-blog-detail', params: { id: recentpost.id } }">
               <b-img
-                :src="recentpost.thumbnail"
-                :alt="recentpost.thumbnail.slice(6)"
+                :src="getThumbnail(recentpost.thumbnail)"
+                :alt="getThumbnail(recentpost.thumbnail).slice(6)"
                 width="100"
                 rounded
                 height="70" />
@@ -181,7 +181,7 @@
               </b-link>
             </h6>
             <span class="text-muted mb-0">
-              {{ recentpost.createdTime }}
+              {{ formatTime(recentpost.created_at, 'll') }}
             </span>
           </b-media-body>
         </b-media>
@@ -288,28 +288,31 @@ export default {
     }
   },
   created() {
-    useJwt.postData('/api/message/index', null).then(response => {
-      this.blogList = response.data;
-    }).catch(error => {
-      console.log(error)
-    });
-    useJwt.postData('/api/message/user', null).then(response => {
-      this.nameList = response.data;
-    }).catch(error => {
-      console.log(error)
-    });
-    useJwt.postData('/api/message/count', null).then(response => {
-      this.commentList = response.data;
-    }).catch(error => {
-      console.log(error)
-    });
-    useJwt.postData('/api/message/recent', null).then(response => {
-      this.blogSidebar = response.data;
-    }).catch(error => {
-      console.log(error)
-    });
+    this.getAllData();
   },
   methods: {
+    getAllData() {
+      useJwt.postData('/api/message/index', null).then(response => {
+        this.blogList = response.data;
+      }).catch(error => {
+        console.log(error)
+      });
+      useJwt.postData('/api/message/user', null).then(response => {
+        this.nameList = response.data;
+      }).catch(error => {
+        console.log(error)
+      });
+      useJwt.postData('/api/message/count', null).then(response => {
+        this.commentList = response.data;
+      }).catch(error => {
+        console.log(error)
+      });
+      useJwt.postData('/api/message/recent', null).then(response => {
+        this.blogSidebar = response.data;
+      }).catch(error => {
+        console.log(error)
+      });
+    },
     tagsColor(tag) {
       if (tag === '台灣小吃') return 'light-success'
       if (tag.includes('美食')) return 'light-info'
@@ -317,8 +320,8 @@ export default {
       if (tag.includes('吃到飽')) return 'light-danger'
       return 'light-primary'
     },
-    formatTime(value) {
-      return moment(value).format('LLLL');
+    formatTime(value, format) {
+      return moment(value).format(format);
     },
     formatName(id) {
       return this.nameList[id];
@@ -333,6 +336,9 @@ export default {
 
 
     },
+    getThumbnail(img) {
+      return img.includes("http") ? img : "/images/" + img;
+    }
   },
   computed: {
     blogLists() {
@@ -345,7 +351,8 @@ export default {
     },
     totalRows() {
       return this.blogList.length;
-    }
+    },
+
   }
 
 }
@@ -353,4 +360,12 @@ export default {
 
 <style lang="scss">
 @import '~@resources/scss/vue/pages/page-blog.scss';
+
+.blog-recent-post-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
 </style>

resources/js/src/views/pages/blog/BlogPost.vue

@@ -29,7 +29,7 @@
             class="mb-2">
             <b-form-input
               id="blog-edit-title"
-              v-model="blogPost.blogTitle" />
+              v-model="blogPost.title" />
           </b-form-group>
         </b-col>
         <b-col md="6">
@@ -39,7 +39,7 @@
             class="mb-2">
             <v-select
               id="blog-edit-category"
-              v-model="blogPost.blogCategories"
+              v-model="blogPost.tag"
               :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'"
               multiple
               :options="categoryOption" />
@@ -100,7 +100,8 @@
           <b-button
             v-ripple.400="'rgba(255, 255, 255, 0.15)'"
             variant="primary"
-            class="mr-1">
+            class="mr-1"
+            @click="postComment">
             發布貼文
           </b-button>
           <b-button
@@ -140,6 +141,7 @@ import { useInputImageRenderer } from '@core/comp-functions/forms/form-utils'
 import { ref } from '@vue/composition-api'
 import { getUserData } from '@/auth/utils'
 import moment from 'moment'
+import useJwt from '@/auth/jwt/useJwt'
 
 export default {
   components: {
@@ -198,9 +200,20 @@ export default {
   },
   methods: {
     postComment() {
-      useJwt.postData('/api/message/storeComment', { 'message_id': this.$route.params.id, 'content': this.new_comment }).then(response => {
-        this.blogDetail.comments.push(response.data);
-        this.new_comment = '';
+      let formData = new FormData();
+      formData.append('title', this.blogPost.title);
+      formData.append('content', this.blogPost.content);
+      formData.append('preview', "preview");
+      let tag = '';
+      if (this.blogPost.tag.length > 0) {
+        tag = this.blogPost.tag.join(',');
+      }
+      formData.append('tag', tag);
+      formData.append('thumbnail', this.blogFile);
+
+      useJwt.postData('/api/message/storeMessage', formData).then(response => {
+        console.log(this.blogPost);
+        this.$router.push({ name: 'pages-blog-list' });
       }).catch(error => {
         console.log(error)
         this.$toast({

resources/views/application.blade.php

@@ -20,8 +20,8 @@
   <link rel="shortcut icon" href="{{ asset('logo.png') }}">
 
   <!-- Font -->
-  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"
-    rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
+
 </head>
 
 <body>
@@ -43,7 +43,7 @@
   </div>
 
   <script src="{{ asset(mix('js/app.js')) }}"></script>
-
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
 </body>
 
-</html>
+</html>