.....

2024-10-24 18:04:29 +09:00
parent 21df7cd3c3
commit 5979281bab
13 changed files with 194 additions and 36 deletions
@@ -122,4 +122,39 @@ a.btn_layerClose:hover {
    border: 1px solid #091940;
    background-color: #1f326a;
    color: #fff;
+}
+.post_layer {
+    height: 100%;
+    place-content: space-between;
+    place-items: stretch;
+    display: grid;
+    gap: 10px;
+    /*grid-auto-rows: minmax(200px, auto);*/
+    grid-template-columns: repeat(auto-fill, minmax(300px, auto));
+    width: 100%;
+
+}
+.post_item {
+    justify-content: space-between;
+    flex-wrap: wrap;
+    flex-direction: row;
+    width: 100%;
+    border-radius: 10px;
+    background: #F0F0F524;
+}
+#postId {
+    display: none;
+}
+
+#writeDate {
+    text-align: right;
+}
+.post_attr {
+    display: block;
+    padding: 5px;
+}
+#content{
+    overflow: hidden;
+    overflow-y: hidden;
+    overflow-x: hidden;
 }
@@ -3,13 +3,23 @@ var currentLat = 0.0
 var currentLon = 0.0

 let baseData = {
+    'id' : "",
    'title': "",
    'content': "",
-    'firstPostLat': "",
-    'firstPostLon': "",
+    'firstPostLat': 0.0,
+    'firstPostLon': 0.0,
    'category' : "none",
    'hashTags' : "#none",
+    'modifyLat' : 0.0,
+    'modifyLon' : 0.0,
+    'originId' : "",
+    'writeTime' : 0,
 }
+
+function goToEditor(path,id,sk) {
+    location.href = path + id+"?token="+sk;
+}
+
 function onclickWrite(type, keyword, html) {
    let title_field = document.getElementById('title_field')
    var hasValues = true
@@ -38,7 +48,17 @@ function getLocation() {
 function showPosition(position) {
    currentLat = position.coords.latitude
    currentLon = position.coords.longitude
-    baseData.firstPostLat = encodeURIComponent(currentLat)
-    baseData.firstPostLon = encodeURIComponent(currentLon)
+    if(baseData.firstPostLat !== 0.0) {
+        baseData.modifyLat = encodeURIComponent(currentLat)
+    }  else {
+        baseData.firstPostLat = encodeURIComponent(currentLat)
+    }
+    if(baseData.firstPostLon !== 0.0 ) {
+        baseData.modifyLon = encodeURIComponent(currentLon)
+    }  else {
+        baseData.firstPostLon = encodeURIComponent(currentLon)
+    }
+
+
    document.getElementById('location_field').value = "Lat: " + position.coords.latitude + ", Lon: " + position.coords.longitude;
 }
@@ -11,12 +11,17 @@
    <link th:href="@{/css/toast-ui.css}" rel="stylesheet" />
    <link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
    <!--    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-dark.css" />-->
-    <script th:inline="javascript">
-        var currentTitle =  [[${defaultTitle}]]
+    <script th:inline="javascript" >
+
        var editor
-        let onChange = () => {console.log(editor.getMarkdown())}
        document.addEventListener("DOMContentLoaded", onLoaded);
        function onLoaded() {
+            baseData.id = [[${srcPost.id}]];
+            baseData.title = [[${srcPost.title}]];
+            baseData.content = [[${srcPost.content}]];
+            baseData.firstPostLat = [[${srcPost.firstPostLat}]];
+            baseData.firstPostLon = [[${srcPost.firstPostLon}]];
+            baseData.writeTime = [[${srcPost.writeTime}]];
            getLocation()
            var style = getComputedStyle(document.body)
            console.log(style.getPropertyValue('--ContentVerticalMargin'))
@@ -4,16 +4,52 @@
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout/default_layout}">
 <th:block layout:fragment="head">
+    <script type="text/javascript" th:src="@{/js/blog.js}"></script>
+    <link th:href="@{/css/blog.css}" rel="stylesheet" />
+    <script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
+    <link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
+    <script th:inline="javascript">
+        let editor
+        document.addEventListener("DOMContentLoaded", onLoaded);
+        function onLoaded() {
+            var els = document.getElementsByClassName('content')
+            for (i=0;i<els.length;i++) {
+                var item = $(els[i])
+                console.log(item[0])

+                console.log(item.attr("data"))
+                new toastui.Editor({
+                    el: item[0],
+                    width : (item[0].getBoundingClientRect().width * 0.8) + 'px',
+                    height : (item[0].getBoundingClientRect().width * 0.8) + 'px',
+                    viewer: true,
+                    usageStatistics : false,
+                    initialValue: item.attr("data"),
+                    theme:"dark",
+                });
+            }
+        }
+    </script>
 </th:block>
 <th:block layout:fragment="content" id="content">
-    <table id="main_layer">
-        <tr id="where" th:each="location : ${locations}">
-        <tr id="posts" th:each="post : ${posts}">
-            <td class="post_item"><span th:text="${#dates.format(post.writeTime, 'dd/MMM/yyyy HH:mm')}"></span></td>
-            <td class="post_item"><span th:text="${post.title}"></span></td>
-            <td class="post_item"><span th:text="${post.id}"></span></td>
-        </tr>
-    </table>
+    <div id="main_layer">
+        <th:block th:if="${PERMISSION != 'OK'}">
+            <h1>권한이 없는 뎁쇼?!</h1>
+        </th:block>
+        <th:block th:if="${PERMISSION == 'OK'}">
+            <div class="post_layer">
+                <th:block class="posts_layer"    id="posts" th:each="posts ,postsStat: ${chunkedPosts}">
+                    <th:block class="posts_layer" th:class="${#strings.append(rowKey,postsStat.index)}" th:each="post, postStast : ${posts}">
+                        <div class="post_item" th:onclick="goToEditor([[${path}]],[[${post.id}]],[[${SK}]])" >
+                            <span id="postTitle" class="post_attr" th:text="${post.title}"></span>
+                            <div id="content" class="post_attr content" th:attr="data=${post.content}"></div>
+                            <span id="writeDate" class="post_attr" th:text="${#dates.format(post.writeTime, 'dd/MMM/yyyy HH:mm')}"></span>
+                            <span id="postId" class="post_attr" th:text="${post.id}"></span>
+                        </div>
+                    </th:block>
+                </th:block>
+            </div>
+        </th:block>
+    </div>
 </th:block>
 </html>
@@ -5,9 +5,7 @@
        layout:decorate="~{layout/default_layout}"
 >
 <th:block layout:fragment="head">
-    <script type="text/javascript"   src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
-    <link th:href="@{/css/toast-ui.css}" rel="stylesheet" />
    <link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
    <!--    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-dark.css" />-->
    <script th:inline="javascript">
@@ -15,7 +13,7 @@
        let onChange = () => {console.log(editor.getMarkdown())}
        document.addEventListener("DOMContentLoaded", onLoaded);
        function onLoaded() {
-            var h = document.querySelector('#content').getBoundingClientRect().height + 'px'
+            var h = document.querySelector('#main_layer').getBoundingClientRect().height + 'px'
            editor = new toastui.Editor({
                el: document.querySelector('#editor'),
                height: '500px',