owl004.html

<head>
	<title>openworklist</title>
	<meta name="viewport" content="
	    width=device-width,
	    initial-scale=1">
</head>

<script src="https://www.gstatic.com/firebasejs/5.0.2/firebase.js"></script>

<body style="
    margin:0px">

<script>

var config = {
    apiKey: "AIzaSyBLV5t8a-gGxnr5ZoS0znAZLNCemTCBAWo",
    authDomain: "openworklist.firebaseapp.com",
    databaseURL: "https://openworklist.firebaseio.com",
    projectId: "openworklist",
    storageBucket: "openworklist.appspot.com",
    messagingSenderId: "275344271563"
}
var db = firebase.initializeApp(config).firestore()
db.settings({
    timestampsInSnapshots: true
})

var uid = null
firebase.auth().onAuthStateChanged(function(user) {
    uid = user && user.uid
})
firebase.auth().signInAnonymously().catch(function(error) {
    console.log(error)
})
function waitForUid(cb) {
    function helper() {
        if (uid) cb(uid)
        else setTimeout(helper, 250)
    }
    helper()
}

function each(o, cb) {
	if (o instanceof Array) {
		for (var i = 0; i < o.length; i++) {
			if (cb(o[i], i, o) == false)
				return false
		}
	} else {
		for (var k in o) {
			if (o.hasOwnProperty(k)) {
				if (cb(o[k], k, o) == false)
					return false
			}
		}
	}
	return true
}

function randomString(len, re) {
    re = re || /[a-zA-Z0-9]/
    var chars = []
    for (var i = 0; i < 256; i++) {
        var c = String.fromCharCode(i)
        if (c.match(re)) chars.push(c)
    }
    var ret = []
    for (var i = 0; i < len; i++) {
        ret.push(chars[Math.floor(Math.random() * chars.length)])
    }
    return ret.join('')
}
    
function create_clear() {
    var d = document.createElement('div')
    d.style.clear = 'both'
    return d
}
    
function create_spacer(width) {
    var d = document.createElement('button')
    d.style.background = 'transparent'
    d.style.border = '0px'
    d.style.width = width + 'px'
    d.style.float = 'left'
    return d
}

function create_header_button(html, cb) {
    var d = document.createElement('button')
    d.style.background = 'blue'
    d.style.border = '10px solid black'
    d.style.borderRadius = '20px'
    d.style.width = '160px'
    d.style.height = '160px'
    d.style.float = 'left'
    d.style.fontSize = '40px'
    d.style.margin = '10px'
    d.innerHTML = html
    d.onclick = cb
    return d
}
    
function create_input() {
    var d = document.createElement('input')
    d.style.background = 'blue'
    d.style.border = '10px solid black'
    d.style.borderRadius = '20px'
    d.style.float = 'left'
    d.style.width = '160px'
    d.style.fontSize = '40px'
    d.style.margin = '10px'
    return d
}

function create_label(width, html) {
    var d = document.createElement('button')
    d.style.background = 'transparent'
    d.style.border = '0px'
    if (width) d.style.width = width + 'px'
    else {
        d.style.border = '10px solid transparent'
        d.style.borderRadius = '20px'
    }
    d.style.float = 'left'
    d.style.fontSize = '40px'
    d.innerHTML = html
    return d
}

function create_post_form() {
    var d = document.createElement('div')
    d.style.position = 'absolute'
    d.style.background = '#ddd'
    d.style.width = '720px'
    d.style.top = '0px'
    d.style.marginLeft = 'auto'
    d.style.marginRight = 'auto'
    
    var text
    
    function create_textarea() {
        var d = document.createElement('textarea')
        d.style.background = 'blue'
        d.style.border = '10px solid black'
        d.style.borderRadius = '20px'
        d.style.width = '100%'
        d.style.height = '160px'
        d.style.fontSize = '20px'
        
        text = d
        
        var D = document.createElement('div')
        D.style.padding = '10px'
        D.append(d)
        return D
    }

    d.append(create_label(360, 'job description'))
    d.append(create_textarea())
    
    d.append(create_label(180, 'min'))
    d.append(create_label(180, 'max'))
    d.append(create_clear())

    var min_people, max_people    
    d.append(min_people = create_input())
    d.append(max_people = create_input())
    d.append(create_label(null, 'people'))
    d.append(create_clear())
    
    var min_hours, max_hours
    d.append(min_hours = create_input())
    d.append(max_hours = create_input())
    d.append(create_label(null, 'hours per person'))
    d.append(create_clear())
    
    var min_pay, max_pay
    d.append(min_pay = create_input())
    d.append(max_pay = create_input())
    d.append(create_label(null, 'pay per hour'))
    d.append(create_clear())
    
    d.append(create_spacer(360))
    d.append(create_header_button('<span style="font-size:80px">+</span><br/><span style="font-size:20px">POST</span>', function () {
        waitForUid(function (uid) {
            db.collection('job').add({
                uid : uid,
                time : firebase.firestore.FieldValue.serverTimestamp(),
                text : text.value,
                min_people : min_people.value,
                max_people : max_people.value,
                min_hours : min_hours.value,
                max_hours : max_hours.value,
                min_pay : min_pay.value,
                max_pay : max_pay.value
            }).then(function () {
                console.log('alsdkjfl')
            }).catch(function (e) {
                console.log('got here!!!!????, ', e)
            })
        })        
    }))
    d.append(create_header_button('<span style="font-size:80px">-</span><br/><span style="font-size:20px">CANCEL</span>', function () {
        d.remove()
    }))
    d.append(create_clear())
    
    return d
}

function create_find_form() {
    var d = document.createElement('div')
    d.style.background = '#ddd'
    d.style.width = '720px'
    d.style.marginLeft = 'auto'
    d.style.marginRight = 'auto'

    var words
    
    function create_textarea() {
        var d = document.createElement('input')
        d.style.background = 'blue'
        d.style.border = '10px solid black'
        d.style.borderRadius = '20px'
        d.style.width = '100%'
        d.style.fontSize = '40px'
        
        words = d
        
        var D = document.createElement('div')
        D.style.padding = '10px'
        D.append(d)
        return D
    }

    d.append(create_label(360, 'contains words'))
    d.append(create_textarea())

    d.append(create_label(180, 'min'))
    d.append(create_label(180, 'max'))
    d.append(create_clear())

    var min_people, max_people    
    d.append(min_people = create_input())
    d.append(max_people = create_input())
    d.append(create_label(null, 'people'))
    d.append(create_clear())
    
    var min_hours, max_hours
    d.append(min_hours = create_input())
    d.append(max_hours = create_input())
    d.append(create_label(null, 'hours per person'))
    d.append(create_clear())
    
    var min_pay, max_pay
    d.append(min_pay = create_input())
    d.append(max_pay = create_input())
    d.append(create_label(null, 'pay per hour'))
    d.append(create_clear())
        
    waitForUid(function (uid) {
        words.oninput = function () {
            db.child('owl004/user_public/' + uid + '/find_words').set(this.value)
        }    
        min_people.oninput = function () {
            db.child('owl004/user_public/' + uid + '/find_min_people').set(this.value)
        }    
        max_people.oninput = function () {
            db.child('owl004/user_public/' + uid + '/find_max_people').set(this.value)
        }    
        min_hours.oninput = function () {
            db.child('owl004/user_public/' + uid + '/find_min_hours').set(this.value)
        }    
        max_hours.oninput = function () {
            db.child('owl004/user_public/' + uid + '/find_max_hours').set(this.value)
        }    
        min_pay.oninput = function () {
            db.child('owl004/user_public/' + uid + '/find_min_pay').set(this.value)
        }    
        max_pay.oninput = function () {
            db.child('owl004/user_public/' + uid + '/find_max_pay').set(this.value)
        }    
        db.child('owl004/user_public/' + uid).on('value', function (x) {
            x = x.val() || {}
            words.value = x.find_words || ''
            min_people.value = x.find_min_people || ''
            max_people.value = x.find_max_people || ''
            min_hours.value = x.find_min_hours || ''
            max_hours.value = x.find_max_hours || ''
            min_pay.value = x.find_min_pay || ''
            max_pay.value = x.find_max_pay || ''
        })
    })    

    return d
}

function create_find_view() {
    var d = document.createElement('div')
    d.style.background = '#ddd'
    d.style.width = '720px'
    d.style.marginLeft = 'auto'
    d.style.marginRight = 'auto'

    d.append(create_label(180, 'results'))
    var results = document.createElement('div')
    d.append(results)
    d.append(create_clear())

    waitForUid(function (uid) {
        db.child('owl004/job').on('value', function (x) {
            
            console.log('hihi?')
            
            x = x.val() || {}
            var a = []
            each(x, function (v, k) { v.key = k; a.push(v) })
            a.reverse()
            results.innerHTML = ''
            each(a, function (x) {
                var d = document.createElement('div')
                d.style.padding = '10px'
                var dd = document.createElement('textarea')
                dd.style.background = 'blue'
                dd.style.border = '10px solid black'
                dd.style.borderRadius = '20px'
                dd.style.width = '100%'
                dd.style.height = '160px'
                dd.style.fontSize = '20px'
                dd.value = x.text || ''
                d.append(dd)
                
                var dd = document.createElement('textarea')
                dd.style.background = 'transparent'
                dd.style.textAlign = 'right'
                dd.style.border = '10px solid transparent'
                dd.style.borderRadius = '20px'
                dd.style.color = 'white'
                dd.style.width = '100%'
                dd.style.height = '160px'
                dd.style.fontSize = '12px'
                dd.style.marginTop = '-160px'
                dd.value = `${x.min_people || 0}-${x.max_people || '\u221E'} people, ` +
                    `${x.min_hours || 0}-${x.max_hours || '\u221E'} hours, ` +
                    `$${x.min_pay || 0}-${x.max_pay || '\u221E'}`
                d.append(dd)
    
                results.append(d)
            })
        })
    })

    return d
}

function create_header() {
    var d = document.createElement('div')
    d.style.background = '#ddd'
    d.style.width = '720px'
    d.style.marginLeft = 'auto'
    d.style.marginRight = 'auto'

    d.append(create_header_button('OWL'))
    d.append(create_header_button('&#128269;', function () {
        d.append(create_find_form())
    }))
    d.append(create_header_button('<span style="font-size:80px">+</span><br/><span style="font-size:20px">POST</span>', function () {
        document.body.append(create_post_form())
    }))
    d.append(create_header_button('<span style="font-size:20px">beautiful statistics</span>'))
    d.append(create_clear())

    return d
}

document.body.append(create_header())
document.body.append(create_find_view())

</script>

</body>