work on item view

src/tjts5901/frontend/mainfront.js

@@ -8,6 +8,7 @@ let currencyTable = {}
 let categoryTable = {}
 let user = {}
 let auctions = []
+let myAuctions = []
 
 //Initialize page
 window.addEventListener("load", async () => {
@@ -26,13 +27,13 @@ window.addEventListener("load", async () => {
         
         //Get user data and list current and former auctions
         user = getUserData()
-        addOwnAuctions(user)
 
 
         //Get data and add current active auctions
         auctions = await getAuctions()
-        console.log(auctions)
-        addAuctions(auctions)
+        console.log("Auctions", auctions)
+        addAuctions(auctions['othersAuctions'])
+        addOwnAuctions(auctions)
 
 
 
@@ -57,18 +58,22 @@ window.addEventListener("load", async () => {
 //User and auction data related functions
 
 const getUserData = ()=>{
-        //replace these with calls to backend
-        let user = {'username': 'John Doe', 'uid': '32423hj2j3n2j3rj2n'}
-        let myActiveAuctions = [{'id':'sad34f8', 'name': 'guernsey cow', 'cat': 'Animals', 'initPrice': 5, 'topBid': 67, 'desc': 'pure-bred Guernsey cow', 'expires':'2023-05-12T23:50:21.817Z'  }, {'name': 'guernsey cow2', 'id':'9sa8udjd3' ,'cat': 'Animals', 'subcat': 'Other domestic animals', 'initPrice': 5, 'topBid': -1, 'desc': 'pure-bred Guernsey cow', 'expires':'2023-05-10T23:50:21.817Z'  }]
 
-        let myExpiredAuctions = [{'id':'sadf8', 'name': '1970s cookbook', 'cat': 'Animals', 'initPrice': 6, 'topBid': 10, 'desc': 'a real classic', 'expires':'2020-05-12T23:50:21.817Z'  }, {'name': 'siamese dogs', 'id':'9lsk8udjd3' ,'cat': 'Animals', 'subcat': 'Other domestic animals', 'initPrice': 100, 'topBid': -1, 'desc': 'regular dog with two heads', 'expires':'2022-05-10T23:50:21.817Z'  }]
-        return {'user':user, 'active': myActiveAuctions, 'expired': myExpiredAuctions}
+        //Get username
+        let username = document.getElementById('usernametag').textContent
+        console.log(username)
+
+
+        let user = {'username': username}
+        return user
 }
 
 
 //Get auctions from database
-//NOT PROPERLY IMPLEMENTED YET
-//TODO: CALL BACKEND
+// Return object with key,value pairs:
+//   'othersAuctions' : array of not own auctions
+//   'myAc' : arr of own active auctions
+//   'myExp': arr of own expired auc
 const getAuctions = async ()=>{
 
         const options = {
@@ -81,8 +86,39 @@ const getAuctions = async ()=>{
         let text = await response.text()
         let items  = await JSON.parse(JSON.parse(text))
 
+        //Partition auctions to own and others
+        
+        //Helper to filter own auctions
+        let isMine = (e) =>{
+                return e['owned_by'] === user['username']}
+
+        let [others, my] = items.reduce( ([o, m], elem) =>  isMine(elem) ? [o, [...m, elem]] : [[...o, elem], m]
+                , [[], []])
+        console.log("Omat", my)
+        console.log("others", others)
+        
+        //Helper to filter expired auctions
+        let now = Date.now()
+        let isActive = (e) =>{
+                let startTime = new Date(e['created_at'])
+                let expTime = new Date(Date.parse(e['created_at'])+ 86400000)
+                console.log(startTime)
+                console.log(expTime)
+                //let expTime = new Date.parse(e['created_at'])+86400000
+                console.log(Date(expTime))
+                console.log(typeof expTime)
+                return now<expTime
+        }
+
+        let [myExp, myActive] = my.reduce( ([e, a], elem) =>  isActive(elem) ? [e, [...a, elem]] : [[...a, elem], a] , [[], []])
+        console.log(myActive)
+        console.log(myExp)
 
-        return items //[{'id':'sadf8', 'name': 'First edition of Pokemon cookbook', 'cat': 'Animals', 'initPrice': 6, 'topBid': 10, 'desc': 'a real classic', 'expires':'2023-03-02T23:50:21.817Z'  }, {'name': 'used balloon', 'id':'9lsk8udjd3' ,'cat': 'Animals', 'subcat': 'Other domestic animals', 'initPrice': 100, 'topBid': -1, 'desc': 'balloon shaped like number 2. Used only twice. Bought 3 yrs ago. Almost like nww.', 'expires':'2023-03-10T23:50:21.817Z'  }]
+
+
+
+
+        return { 'othersAuctions': others, 'myAc': myActive, 'myExp': myExp } 
 }
 
 
@@ -90,19 +126,19 @@ const getAuctions = async ()=>{
 //MAIN FUNCTIONS TO ADD AUCTIONS
 //
 
-//Add users auction active and expired
-const addOwnAuctions = ({'active': acAuc, 'expired': exAuc}) => {
+//Add users auction active and expired to the correct ul -tags
+const addOwnAuctions = ({'myAc': acAuc, 'myExp': exAuc}) => {
         //Add active auctions to correct place
         let myActUl = document.getElementById('myactive')
         
-        let relevantKeysActive =  {'name': textDiv, 'cat': textDiv, 'subcat': textDiv, "topBid": bidsDiv, 'expires': timeRemainingDiv, 'id': removeAucButton }
+        let relevantKeysActive =  {'name': textDiv, 'category': textDiv, 'subcategory': textDiv, "highest_bid_price": bidsDiv, 'created_at': timeRemainingDiv, '_id': removeAucButton }
 
         let activeElemList = acAuc.map((e)=>aucToLi(relevantKeysActive, e ))
         myActUl.append(...activeElemList)
 
         //Add expired auctions to correct place
         let myExpUl = document.getElementById('myexpired')
-        let relevantKeysExpired = {'name': textDiv, 'cat': textDiv, 'subcat':textDiv, 'topBid': finalPrice, 'expires': textDiv, 'initPrice': textDiv  }
+        let relevantKeysExpired = {'name': textDiv, 'category': textDiv, 'subcategory':textDiv, 'highest_bid_price': finalPrice, 'created_at': textDiv, 'starting_price': textDiv  }
         let expiredElemList = exAuc.map((e)=>aucToLi(relevantKeysExpired, e ))
         myExpUl.append(...expiredElemList)
 
@@ -117,7 +153,7 @@ const addAuctions = (aucs) =>{
         //Add active auctions to correct place
         let allActUl = document.getElementById('allAucs')
         
-        let relevantKeysActive =  {'name': textDiv, 'category': textDiv, 'subcategory': textDiv, "starting_price": textDiv, "highest_bid_price": bidsDiv} //, 'expires': timeRemainingDiv}
+        let relevantKeysActive =  {'name': textDiv, 'category': textDiv, 'subcategory': textDiv, "starting_price": textDiv, "highest_bid_price": bidsDiv, 'created_at': timeRemainingDiv } //, 'expires': timeRemainingDiv}
 
         let activeElemList = [...aucs].map((e)=>aucToLi(relevantKeysActive, e ))
         console.log(activeElemList)
@@ -177,23 +213,26 @@ const finalPrice = (value) =>{
 }
 
 const timeRemainingDiv = (timeString) =>{
-        let expirationTime = Date.parse(timeString)
-        let timeRemaining = expirationTime-Date.now()
+        let startTime = Date.parse(timeString)
+        let expTime = startTime+86400000
 
+        console.log("AJAT", startTime, expTime)
         let itemDiv = document.createElement('div')
-        itemDiv.textContent = timeRemaining
+        //itemDiv.textContent = timeRemaining
         const updateTime = ()=>{
-                let d = expirationTime - Date.now()
-                if (d<0){
+
+                let d = expTime - Date.now()
+                if (d < 0){
                         clearInterval(timeUpdater)
                         //Should be changed to automatic moving to expired auctions array.
                         itemDiv.textContent = "Expired"
+                } else {
+
+                        let s = Math.floor((d % (60000))/1000)
+                        let m =  Math.floor((d % (3600000))/60000)
+                        let h =  Math.floor((d % (24*3600000))/3600000)
+                        itemDiv.textContent =  `${h} h ${m} m ${s} s remaining`
                 }
-                let s = Math.floor((d % (60000))/1000)
-                let m =  Math.floor((d % (3600000))/60000)
-                let h =  Math.floor((d % (24*3600000))/3600000)
-                //console.log("h", h, "m", m, "s", s)
-                itemDiv.textContent =  `${h} h ${m} m ${s} s remaining`
         }
 
 
@@ -356,12 +395,9 @@ const aaFormEventListenersInitializers = ()=>{
         const aadButton = document.getElementById("aadButton")
         aadButton.addEventListener('click', async (e) => {
                 e.preventDefault()
-                console.log("Button clicked. TODO: rest...")
                 let form = e.target.form
                 let isValid =  form.reportValidity()
-                console.log(form)
                 if (isValid){
-                        console.log("SUBMIT TO BACKEND")
                         const data = new FormData(form)
                         const newKeys = {
                                 'aafName': 'name',
@@ -372,10 +408,8 @@ const aaFormEventListenersInitializers = ()=>{
                                // 'aafContinents': 'area'
 
                         }
-                        console.log(data)
                         let dataWithRightKeys = keyTranslate( newKeys, data)
 
-                        console.log("DATA:", dataWithRightKeys)
 
                         // Send auction data to backend.
                         let newAucReq = {
@@ -386,7 +420,6 @@ const aaFormEventListenersInitializers = ()=>{
                                 },
                                 body: JSON.stringify(dataWithRightKeys)
                         }
-                        console.log("läh", newAucReq)
                         let url = "/auction_item"
                         let response = await fetch(url, newAucReq)
                         console.log(response)

src/tjts5901/frontend/styles/style.css

@@ -17,6 +17,13 @@ section label {
  padding-right: 1em;
 }
 
+.shaded {
+ border-bottom-right-radius: 20px;
+ border-top-left-radius: 10px;
+ box-shadow: 6px 6px 10px    forestgreen;
+
+}
+
 section input[type=radio] {
  display: none;
 }
@@ -39,13 +46,18 @@ section input[type=radio] {
 li {
         display: flex;
         flex-direction: row;
-        flex-wrap: nowrap;        
+        flex-wrap: nowrap;  
+        border: 2px solid black;
+
 }
 
 li > div {
-  width: 10%;
+  background-color: lightblue;
+  width: 14em;
+  min-width: 16%;
+
   padding: 10px;
-  /* border: 2px solid gold; */
+  border: 1px solid lightgray ; 
 }
 
 li > div:nth-child(1) {
@@ -103,5 +115,5 @@ h1 {
 .content {
   margin-left: auto;
   margin-right: auto;
-  width: 34em
-}
\ No newline at end of file
+  width: 64em
+}

src/tjts5901/templates/auction.html

 
 {# Template file is in Jinja syntax:
     https://jinja.palletsprojects.com/en/3.1.x/
-#}
 <!doctype html>
 <html lang="en">
   <head>
@@ -12,7 +11,11 @@
   </head>
   <body>
 "{{ url_for('static', filename='styles/style.css') }}"
+#}
+
+{% extends 'base.html' %}
 
+{% block content %}
 
 <!-- Hidden data for the scripts -->
 <p name="expiresAt" hidden>{{ auc['expires'] }} </p>
@@ -57,7 +60,10 @@
 <div>
         <span>Owner:</span> <span>Owner data maybe here</span>
 </div>
-        
+       <div>
+               <h3>Share on social media:</h3>
+
+       </div> 
       </div>
       <div class="right">
         <h2>Bids:</h2>
@@ -76,13 +82,32 @@
     <input type="number" value="0" name="newbid" id="newbid"/>
     <button id="bidbutton">  Bid! </button>
     </form>
+  
+    <div>
+            <button id="delete" ></button>
+    </div>
 
+<div class="row justify-content-md-center">
+        <div class="col-md-auto">
+            <a href="https://twitter.com/intent/tweet?url={{ url_for('views.bidding', item_id=auc['_id'], _external=True) | urlencode }}&text={{ "Check out this awesome and cheap item." | urlencode }}" class="btn btn-twitter shaded" target="_blank" style="background-color: #1DA1F2; color:#fff;">
+                🐦
+                {{ _("Twitter") }}
+            </a>
+            <a href="https://www.facebook.com/sharer.php?u={{ url_for('views.bidding', item_id=auc['_id'], _external=True) | urlencode }}" target="_blank" class="btn btn-twitter shaded" target="_blank" style="background-color: #4267B2; color:#fff;">
+                
+                {{ _("Facebook") }}
+            </a>
+            <a href="mailto:?subject={{ auc['name'] | urlencode }}&body={{ url_for('views.bidding', item_id=auc['_id'], _external=True) | urlencode }}" target="_blank" class="btn btn-primary shaded" target="_blank">
+                
+                {{ _("Email to friend") }}
+            </a>
+        </div>
+    </div>
 
     <!-- Load main frontend script -->
  <script type="module" src="{{ url_for('static', filename='bidscript.js') }}" charset="utf-8">
    
  </script> 
-</body>
-</html>
+ {% endblock %}
 
 

src/tjts5901/templates/auth/register.html

@@ -7,7 +7,7 @@
 {% block content %}
 
 
-<form action="{{ url_for('auth.register') }}" method="POST" id="regform" class="mt-4">
+<form action="{{ url_for('register') }}" method="POST" id="regform" class="mt-4">
 
               <div class="form-group">
                 <label for="email" class="mb-2">{{ _("Email") }}</label>
@@ -43,7 +43,7 @@
 <div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
               <p class="font-weight-normal">
                 {{ _("Already have an account?") }}
-                <a href="/login_page" target="_blank" class="font-weight-bold">{{ _("Login here") }}</a>
+                <a href="/login_page"  class="font-weight-bold">{{ _("Login here") }}</a>
               </p>
             </div>
 <script type="module" src="{{ url_for('static', filename='registering_script.js') }}" charset="utf-8">

src/tjts5901/templates/base.html

@@ -61,7 +61,7 @@
         </ul>
         <ul class="navbar-nav">
           {% if session['logged_in'] %}
-          <li class="nav-item"><span class="nav-link">{{ session['logged_in'] }}</span></li>
+          <li class="nav-item"><span class="nav-link" id="usernametag">{{ session['logged_in'] }}</span></li>
           <li class="nav-item"><a href="{{ url_for('logout') }}" class="nav-link">{{_("Log Out")}}</a></li>
           {% else %}
           <li class="nav-item"><a href="{{ url_for('reg_page') }}" class="nav-link">{{_("Register")}}</a>
@@ -102,6 +102,7 @@
         {% block content %}
           <!-- MAIN CONTENT BLOCK MISSING -->
         {% endblock %}
+        
       </main>
 
     <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->

src/tjts5901/templates/index.html.j2

@@ -7,7 +7,7 @@
 {% block header %}
 {% endblock %}
 
-{% block content %}>
+{% block content %}
     <h1>13th auction app</h1>
 
     <!-- HERE IS AN EXAMPLE OF A TAB USED IN THE PAGE
@@ -26,8 +26,8 @@
     -->
 <div class="mainpage">
 <section >
-<input type="radio" name="tabs" id="myitems" checked="checked" />
-<label for="myitems">My items   </label>
+<input type="radio" name="tabs" id="myitems"   checked="checked" />
+<label class="shaded"for="myitems">My items   </label>
 <div class="tab">
   <div>
     <div id="addauction">
@@ -99,7 +99,7 @@
 
 <section>
 <input type="radio" name="tabs" id="myaccount"  />
-<label for="myaccount"> My account </label>
+<label class="shaded" for="myaccount"> My account </label>
 <div class="tab">
 Here's info on the user account.  
 </div>
@@ -107,7 +107,7 @@ Here's info on the user account.
 
 <section>
 <input type="radio" name="tabs" id="auctions"  />
-<label for="auctions">Open auctions</label>
+<label class="shaded" for="auctions">Open auctions</label>
 
 <div class="tab">
         
@@ -123,7 +123,7 @@ Here's info on the user account.
 <section>
         
 <input type="radio" name="tabs" id="korppi"  />
-<label for="korppi">Press this if you feel like it</label>
+<label class="shaded" for="korppi">Press this if you feel like it</label>
 <div class="tab">
 
   I hope clicking helped. Have a nice day