basic authentication

2020-03-27 22:24:01 +01:00
parent 8676f94dcc
commit 891f219379
13 changed files with 197 additions and 87 deletions
--- a/it1/bibliotek/bibliotek.css
+++ b/it1/bibliotek/bibliotek.css
@@ -1,26 +0,0 @@
-
-#content {
-    margin: 2vh;
-}
-
-.top {
-    margin-top: 9vh;
-}
-
-.middle {
-    margin-left: 13vw;
-    margin-right: 42.0vw;
-}
-
-#status {
-    margin-top: 1vh;
-}
-
-#form > div > * {
-    margin-bottom: 1vh;
-}
-
-#form > div > label {
-    margin-bottom: 0.33vh;
-}
-
--- a/it1/bibliotek/bibliotek.js
+++ b/it1/bibliotek/bibliotek.js
@@ -1,44 +1,60 @@

-var firestore = firebase.firestore
+var db = firebase.firestore()

-var list = function() {
+var list = function(user) {
    // db.collection('bibliotek').doc("8ZBX5gmIaRwQBCjgLLg0").get().then(function(doc){console.log(doc.data())})
    // db.collection('bibliotek').get().then(function(query){query.forEach(function(doc){console.log(doc.data())})})
    db.collection('bibliotek')
        .withConverter(bookConverter)
        .get()
        .then(function(query) {
-            html = ''
+            html = '<br/>'
            query.forEach(function(doc) {
                book = doc.data()
-                html += book.toHtml()
+                html += book.toHtml(user)
            })
            $('#books').html(html)
-        })
-        .catch(function(error) {
-            $('#books').html('<h3>Kunne ikke hente bøker!</h3><p>'+error+'</p>')
+        }).catch(function(error) {
+            $('#books').html('<h3>Kunne ikke hente bøker!</h3><br/><p>'+error+'</p>')
            $('#books').css('color', 'red')
        })
 }

 var add = function() {
-    let millis = Date.parse($('#published')[0].value)
-    db.collection("bibliotek").add({ // withConverter ?
-        tittel: $('#title')[0].value,
-        forfatter: $('#author')[0].value,
-        forlag: $('#publisher')[0].value,
-        terningkast: $('#rating')[0].value,
-        utgitt: new firestore.Timestamp(millis/1000, 0)
-    }).then(function() {
-        $('#status').html('<p>La til bok '+$('#title')[0].value+'!</p>')
-        $('#status').css('color', 'green')
-    }).catch(function() {
-        $('#status').html('<p>Problem med å legge til bok '+$('#title')[0].value+'!</p>')
-        $('#status').css('color', 'red')
-    })
+    db.collection("bibliotek")
+        .withConverter(bookConverter)
+        .add(new Book(
+            $('#title')[0].value,
+            $('#author')[0].value,
+            $('#publisher')[0].value,
+            $('#rating')[0].value,
+            $('#published')[0].value
+        )).then(function() {
+            $('#status').html('<p>La til bok '+$('#title')[0].value+'!</p>')
+            $('#status').css('color', 'green')
+            list(firebase.auth().currentUser)
+        }).catch(function() {
+            $('#status').html('<p>Problem med å legge til bok '+$('#title')[0].value+'!</p>')
+            $('#status').css('color', 'red')
+        })
 }

-$(document).ready(function() {
-    list()
+var remove = function(id) {
+    db.collection("bibliotek").doc(id)
+        .delete().then(function() {
+            list(firebase.auth().currentUser)
+        }).catch(function(error) {
+            alert("Error removing document: ", error)
+        })
+}
+
+firebase.auth().onAuthStateChanged(function(user) {
+    list(user)
 })

+/*
+$(document).ready(function() {
+    list(firebase.auth().currentUser)
+})
+*/
+
--- a/it1/bibliotek/bok.js
+++ b/it1/bibliotek/bok.js
@@ -1,37 +1,47 @@

 class Book {
-    constructor(title, author, publisher, rating, published) {
+    constructor(title, author, publisher, rating, published, id=0) {
+        this.cfid = id
        this.title = title
        this.author = author
        this.publisher = publisher
        this.rating = rating
-        this.published = published.toDate()
+        this.published = published
    }
    toString() {
-        return this.title+' av '+this.author+', ternignkast '+this.rating+', utgitt '+this.published.toString().slice(0,15)+', forlag; '+this.publisher
+        return this.title+' av '+this.author+', terningkast '+this.rating+', utgitt '+this.published.toString().slice(0,15)+', forlag; '+this.publisher
    }
-    toHtml() {
+    toHtml(user=false) {
        let span = function(string, color='red') {
            return '<span style="color: '+color+'">'+string+'</span>'
        }
-        return '<p>'+span(this.title)+' av '+span(this.author)+', ternignkast '+span(this.rating)+
-        ', utgitt '+span(this.published.toString().slice(0,15), 'green')+', forlag; '+span(this.publisher, 'yellow')+'</p>'
+        return '<p>'+span(this.title)+' av '+span(this.author)+', terningkast '+span(this.rating)+', utgitt '
+            +span(this.published.toString().slice(0,15), 'green')+', forlag; '+span(this.publisher, 'yellow')
+            +(user?' &nbsp; <a class="btn btn-primary" href="javascript: remove(\''+this.cfid+'\')">Slett</a>':'')+'</p>'
    }
 }

 bookConverter = {
    toFirestore: function(book) {
+        let millis = Date.parse(book.published)
        return {
-            title: book.title,
-            author: book.author,
-            publisher: book.publisher,
-            rating: book.rating,
-            published: book.published
+            tittel: book.title,
+            forfatter: book.author,
+            forlag: book.publisher,
+            terningkast: book.rating,
+            utgitt: new firebase.firestore.Timestamp(millis/1000, 0)
        }
    },
    fromFirestore: function(snapshot, options) {
        const data = snapshot.data(options)
-        return new Book(data.tittel, data.forfatter, data.forlag, data.terningkast, data.utgitt)
+        return new Book(
+            data.tittel,
+            data.forfatter,
+            data.forlag,
+            data.terningkast,
+            data.utgitt.toDate(),
+            snapshot.id
+            )
    }
 }

--- a/it1/bibliotek/index.html
+++ b/it1/bibliotek/index.html
@@ -4,16 +4,18 @@
    <title>Firebase basert bibliotek</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
-    <link rel="stylesheet" href="/it1/bibliotek/bibliotek.css">
-    <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-firestore.js"></script>
+    <link rel="stylesheet" href="/it1/main.css">
+    <link rel="stylesheet" href="/it1/css/form.css">
+    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-    <script type="text/javascript" src="/it1/init-firebase.js"></script>
+    <script type="text/javascript" src="/it1/js/init-firebase.js"></script>
    <script type="text/javascript" src="/it1/bibliotek/bok.js"></script>
 </head>
 <body>
-    <script type="text/javascript" id="navbar" src="/it1/navbar/navbar.js"></script>
-    <div id="content" class="middle">
+    <script type="text/javascript" id="navbar" src="/it1/js/navbar.js"></script>
+    <div id="content">
        <form action="#" method="POST" id="form" class="top">
            <div class="form-group">
                <div class="row">
@@ -37,7 +39,7 @@
        <div id="status">
            <p>&nbsp;</p>
        </div>
-        <a type="submit" class="btn btn-primary" href="javascript: list()">Hent bøker</a>
+        <a type="submit" class="btn btn-primary" href="javascript: list(firebase.auth().currentUser)">Hent bøker</a>
        <div id="books">
        </div>
    </div>