[feature]#108 とりあえず挙げる

funswift · Dec 26, 2022 · db8546f · db8546f
1 parent c51271f
commit db8546f
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 3 deletions.
diff --git a/www/css/style.css b/www/css/style.css
@@ -31,9 +31,46 @@ body {
 }
 
 #list-container {
+  padding: 60px 0 0 0;
+}
+
+#list-container > .frame > .header {
+  display: flex;
+  height: 30px;
+  background-color: aqua;
+  justify-content: space-between;
+}
+
+#list-container > .frame > .header > p {
+  font-size: 20px;
+  color: #000;
+  margin: auto 0px auto 8px;
+}
+
+#list-container > .frame > .header > a {
+  font-size: 13px;
+  color: #8e8e93;
+  text-decoration: none;
+  margin: auto 8px 0 auto;
+}
+
+#never-been-spot-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  padding: 60px 0 0 0;
+}
+
+#go-again-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.list-card-test {
+  width: 155px;
+  height: 155px;
+  background-color: #000;
+  box-shadow: 0px 2px 2px #00000040;
+  border-radius: 15px;
+  margin: 8px auto 8px auto;
 }
 
 .list-card {
@@ -60,7 +97,7 @@ body {
 .list-card-top p {
   width: 90%;
   margin: 4px 0 0 6px;
-  color: #000000B8;
+  color: #000000B8; /*透過カラーコード*/
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;

diff --git a/www/index.html b/www/index.html
@@ -53,6 +53,10 @@
   <script src="js/app.js"></script>
 </head>
 <body>
-  <script>checkLogin()</script>
+  <script>
+    displaySpotVisted();
+    getSpotData();
+    checkLogin();
+  </script>
 </body>
 </html>
diff --git a/www/js/app.js b/www/js/app.js
@@ -3,6 +3,7 @@ const APPKEY = "ac62d88ed36c879e7a24c5e3e2af8eab4316242bf5aef4fc80ba683ff823cb37
 const CLIENTKEY = "ad4cd9a56a684ddb429b0835ece22233a145525b835cecb7f8f125f266c49470";
 
 const ncmb = new NCMB(APPKEY, CLIENTKEY);
+const SpotData = ncmb.DataStore("Spot");
 /*------------------------------*/
 
 /*--- index.html ---*/
@@ -391,6 +392,41 @@ function displayKaimonoDataToList(){ //一覧画面に買い物カテゴリ表
   }
 }
 
+function getSpotData() {
+  const data = SpotData.limit(10).fetchAll()
+    .then(function(results){
+      for(let i=0; i<results.length; i++){
+        console.log(results[i].name);
+      }
+    })
+    .catch(function(err){
+      console.log(err);
+    });
+}
+
+function displaySpotVisted() {
+  const data = SpotData.limit(10).fetchAll()
+                        .then(function(results){
+                          for(let i=0; i<results.length; i++){
+                            console.log(results[i].name);
+                          }
+                        })
+                        .catch(function(err){
+                          console.log(err);
+                        });
+
+  /*
+  SpotVistedData.equalTo("userName", user.get("userName")).fetchAll()
+                .then(function(results){
+                  console.log(results);
+                  dataList.push(results);
+                })
+                .catch(function(err){
+                  console.log(err)
+                  errorMassage = err;
+                });*/
+}
+
 /*--- tab4.html ---*/
 function testDisplayUserInfo(){
   const user = ncmb.User.getCurrentUser();

diff --git a/www/tab3.html b/www/tab3.html
@@ -4,6 +4,27 @@
     <ons-search-input id="listpage-search" placeholder="Search"></ons-search-input>
   </div>
   <div id="list-container">
+    <div class="frame">
+      <div class="header">
+        <p>まだ行ってない場所</p>
+        <a href="#" onclick="document.getElementById('hatcaNavi').pushPage('まだ行ってない.html')">
+          もっと見る ＞
+        </a>
+      </div>
+      <div id="never-been-spot-list">
+        <div class="list-card-test"></div>
+        <div class="list-card-test"></div>
+      </div>
+    </div>
+    <div class="frame">
+      <div class="header">
+        <p>もう１回行く</p>
+        <a href="#" onclick="document.getElementById('hatcaNavi').pushPage('もう１回行く.html')">
+          もっと見る ＞
+        </a>
+      </div>
+      <div id="go-again-list"></div>
+    </div>
     <script>
       displayEatDataToList();
       displayLookDataToList();