Skip to content

Commit

Permalink
Profile improvements
Browse files Browse the repository at this point in the history
Uses jQuery and $.ajax
Owner can delete questions with AJAX (Fix #16)
At php, checks if owner exists before printing head (but doesn't have a
title or stylesheet for termination)
Added some open graph tags (#15)
  • Loading branch information
anestv committed Sep 3, 2014
1 parent a8e2b79 commit 0b0fccd
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 85 deletions.
123 changes: 58 additions & 65 deletions js/profile.js
Original file line number Diff line number Diff line change
@@ -1,107 +1,100 @@
$(document).ready(function() {


var xhrb = new XMLHttpRequest();
var xhrf = new XMLHttpRequest();
var xhrd = new XMLHttpRequest();
var qContainer = $('#qContainer');//document.getElementById('qContainer');
var showMore = $('#showMore');// document.getElementById('showMore');
var qContainer = $('#qContainer');
var showMore = $('#showMore');
var butSubmit = $('form.ask input[type="submit"]');
var owner = document.body.getAttribute('data-owner');
var offset = 10;


//handle show more button

xhrb.onreadystatechange = function(){
if (xhrb.readyState === 4){ //Ready state 4 means the request is done
if (xhrb.status === 204 ||
xhrb.responseText.indexOf('data-last="1"') !== -1) //an den uparxei allo
showMore.remove();
else {
showMore.prop({disabled: false});
showMore.html('Show More');
}
qContainer.append(xhrb.responseText);
offset += 10;
}
function showMoreOK(data, status){
if (status ==='nocontent'||data.indexOf('<div data-last')!==-1)
showMore.remove();
else
showMore.prop('disabled', false).html('Show More');

qContainer.append(data);
offset += 10;
}

if (showMore) showMore.click(function(){
showMore.prop({disabled: true});
showMore.html('Loading');
showMore.click(function(){
showMore.prop('disabled', true).html('Loading...');

var page = 'loadquestions.php?user=' + owner +
'&offset=' + offset;
xhrb.open('GET', page, true);
xhrb.send();
var page = 'loadquestions.php?user=' +
owner + '&offset=' + offset;
$.get(page, showMoreOK);
});


//handle form submitting

xhrf.onreadystatechange = function(){
var butSubmit = document.askForm.inpSubmit;
if (xhrf.readyState === 4){ //Ready state 4 means the request is done
butSubmit.disabled = false;
butSubmit.value = null; //browser default

if (xhrf.status !== 200 || xhrf.getResponseHeader('x-error-descr')){
descr = xhrf.getResponseHeader('x-error-descr');
alert('Your question was not submitted. ' + descr);
} else
document.askForm.outerHTML = '<div id="success">Your question has '+
'been submitted! <a href="user/'+ owner +'">Ask another one</a></div>';
//TODO maybe overlay and then hide the top layer to avoid reloading
}
function askOK(){
butSubmit.prop('disabled', false).html('Submit');

document.askForm.reset();

document.askForm.outerHTML = '<div id="success">Your question has '+
'been submitted! <a href="user/'+ owner +'">Ask another one</a></div>';
//TODO maybe overlay and then hide the top layer to avoid reloading
}

if (document.askForm) document.askForm.onsubmit = function(){
if (!this.question.value.trim()){
alert('Please enter your question');
return false;
}
var question = encodeURIComponent(this.question.value);
var publicasker =(this.pubAsk && this.pubAsk.checked)? 1:'';
var touser = encodeURIComponent(owner);


butSubmit.disabled = true;
butSubmit.value = 'Loading';
butSubmit.prop('disabled', true).html('Submitting...');

xhrf.open('POST', 'sent.php', true);
xhrf.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhrf.send("question=" + question + '&to=' +
touser + '&pubAsk=' + publicasker);

return false; //mhn upobaleis kanonika
$.post('sent.php', $('form.ask').serialize(), askOK);
return false;
}


//handle delete links

xhrd.onreadystatechange = function(){
if (xhrd.readyState === 4){ //Ready state 4 means the request is done

if (xhrd.status !== 200 || xhrd.getResponseHeader('x-error-descr')){
descr = xhrd.getResponseHeader('x-error-descr');
alert('The question was not deleted. ' + descr);
} else if(xhrd.responseText.indexOf('<div id="success">') !== -1)
alert('The question was deleted successfully!');
}
function deleteOK(data, status, xhr){

if (data.indexOf('<div id="success">') !== -1){
//alert('The question was deleted successfully!');
//is it obvious enough to omit the alert?
xhr.question.slideUp();
} else
alert("Something went wrong, the question was not deleted. That's all we know");
}


if ($('.deleteq').length)
$('#qContainer').on('click', 'a.deleteq', function(e){
if (!confirm('Delete this question?')) return false;

var qElement = $(this).parents('.question');
var page = this.href + '&del=1';
xhrd.open('GET', page, true);
xhrd.send();

$.get(page, deleteOK).question = qElement;

return false;
});


//error listener for all XHRs
$(document).ajaxError(function(event, xhr, settings){

var errorType;
if (settings.type === 'POST')
errorType = 'submit your question';
else if (settings.url.indexOf('?user=') !==-1)
errorType = 'load more questions';
else
errorType = 'delete this question';

var errorMsg = 'Unfortynately we could not ' + errorType +
'. ' + xhr.getResponseHeader('X-Error-Descr');

alert(errorMsg);
console.warn(xhr.getResponseHeader('X-Error-Descr'));
});


});
});
50 changes: 30 additions & 20 deletions profile.php
Original file line number Diff line number Diff line change
@@ -1,18 +1,6 @@
<html>
<head>
<?php $ownTmp = empty($_GET['user'])?'':htmlspecialchars($_GET['user']); ?>
<!-- ola ta links einai relative to /pa/. Aparaithto gia to /pa/user/aaaa -->
<base href="/pa/">
<!-- SOS TODO O titlos einai vulnerable an valei kaneis ?user=</title> h paromoia -->
<title><?=$ownTmp?> - PrivateAsk</title>
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="res/fonts/customFonts.css">
<link rel="stylesheet" type="text/css" href="profileAppearance.dcss.php?user=<?=$ownTmp?>">
<meta charset="UTF-8"><!-- an exei elhnika -->
</head>
<body data-owner="<?=$ownTmp?>">

<?php
<html>
<head prefix="og: http://ogp.me/ns# profile: http://ogp.me/ns/profile#">
<?php

if (empty($_GET['user']))
terminate('Required parameters were not provided', 400);
Expand All @@ -25,6 +13,30 @@
array_push($ownerFr, $ownerName);
if ($owner['deleteon'] !== null)
terminate('This user has deactivated their account.');
//TODO πως θα κανει τερμινατε; δεν εχει καν stylesheets και ειμαι μεσα στο head
//TODO να αλλαξω τα ownTmp σε ownerName παρακατω

?>
<!-- ola ta links einai relative to /pa/. Aparaithto gia to /pa/user/aaaa -->
<base href="/pa/">
<title><?=$ownerName?> - PrivateAsk</title>
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="res/fonts/customFonts.css">
<link rel="stylesheet" type="text/css" href="profileAppearance.dcss.php?user=<?=$ownerName?>">
<meta charset="UTF-8"><!-- an exei elhnika -->

<meta property="og:type" content="profile">
<meta property="og:site_name" content="PrivateAsk">
<meta property="og:title" content="<?=$owner['realname']?> on PrivateAsk">
<!-- <meta property="og:url" content="http://privateask.noip.me/pa/user/<?=$ownerName?>">
prokalei kuklous otan den einai auto ths selidas -->
<meta property="profile:username" content="<?=$ownerName?>">

</head>
<body data-owner="<?=$ownerName?>">

<?php



$see = $owner['whosees'];
Expand All @@ -42,14 +54,12 @@
' the right to ask a question</div>';
else
echo '<form method="post" class="ask" name="askForm" action="sent.php">
<textarea name="question" placeholder="Ask a question" required maxlength="200">
<input type="hidden" name="to" value="'.$ownerName.'"><textarea
name="question" placeholder="Ask a question" required maxlength="200">
</textarea><div id="askControls">'. (empty($user)? '': '<div>
<input type="checkbox" name="pubAsk" id="publicaskcheckbox">
<label for="publicaskcheckbox">Show that I asked this question</label>
</div>').'<input type="submit" name="inpSubmit"></div></form>';



</div>').'<input type="submit" value="Submit"></div></form>';


echo '<div id="qContainer">';
Expand Down

0 comments on commit 0b0fccd

Please sign in to comment.