Implement in-place editor for project descriptions

This commit is contained in:
Eike Foken
2011-08-08 15:20:45 +02:00
parent bffa93772c
commit 09b7eb7eb9
5 changed files with 297 additions and 218 deletions

View File

@@ -46,4 +46,13 @@ class Ajax extends MY_Controller {
$tpl['messages'] = $this->messages->get();
$this->load->view('global/notifications', $tpl);
}
/**
* Saves a projects description.
*/
public function save_project() {
$this->load->model('project');
$data['description'] = $this->input->post('content');
$this->project->update($this->session->userdata('active_project'), $data);
}
}

View File

@@ -35,8 +35,7 @@ class Project extends CI_Model {
* @return array The user's projects.
*/
public function getOwn() {
// TODO: Session: $query = $this->db->where(array('owner' => $this->session->userdata('user_id')))
$query = $this->db->where(array('owner' => '215cd70f310ae6ae'))
$query = $this->db->where(array('owner' => $this->session->userdata('user_id')))
->order_by('lastaccess', 'desc')
->get('projects');
return $query->result_array();
@@ -91,8 +90,6 @@ class Project extends CI_Model {
->join('users', 'users.id = projects.owner', 'left')
->get('projects')->result_array();
return $result;
}
@@ -155,19 +152,33 @@ class Project extends CI_Model {
} while ($this->db->where('id', $data['id'])->from('projects')->count_all_results() > 0);
if($this->db->insert('projects', $data))
if ($this->db->insert('projects', $data)) {
return $data['id'];
else
} else {
return FALSE;
}
}
/**
* Delete a project.
* Updates a project.
*
* @param integer $projectId The ID of the project to update
* @param array $data Array with data to update
*/
public function update($projectId, $data) {
return $this->db->where('id', $projectId)->update('projects', $data);
}
/**
* Deletes a project.
*
* There is no security check in here to verify if the user has the
* rights to do so. This needs to be done in the controller!
*
* @param integer $projectId The ID of the project to delete
*/
public function delete($project_id) {
return $this->db->delete('projects', array('id' => $project_id));
public function delete($projectId) {
return $this->db->delete('projects', array('id' => $projectId));
}
}

View File

@@ -2,87 +2,80 @@
<div id="content">
<div class="title">
<h2>Projektinformationen</h2>
</div>
<div class="title">
<h2>Projektinformationen</h2>
</div>
<div class="box">
<h3>Versuche</h3>
<table class="tableList">
<thead>
<tr>
<th scope="col">Versuch</th>
<th scope="col">Berechnungen</th>
<th scope="col">Aktionen</th>
</tr>
</thead>
<tbody>
<?
if(count($trials) > 0):
foreach($trials as $trial):
?>
<tr>
<td><a href="<?=site_url('trials/'.$trial['id'])?>"title="Versuch &quot;<?=$trial['name']?>&quot; anzeigen"><?=$trial['name']?></a></td>
<td><span class="active">Erfolgreich abgeschlossen</span></td>
<td>
<a href="<?=site_url('trials/results/'.$trial['id'])?>" title="Ergebnisse zum Versuch &quot;<?=$trial['name']?>&quot; anzeigen">Ergebnisse anzeigen</a> |
<a href="<?=site_url('trials/edit/'.$trial['id'])?>" title="Versuch &quot;<?=$trial['name']?>&quot; bearbeiten">Bearbeiten</a> |
<a href="<?=site_url('trials/delete/'.$trial['id'])?>" title="Versuch &quot;<?=$trial['name']?>&quot; entfernen">Entfernen</a></td>
</tr>
<?
endforeach;
else:
?>
<tr>
<td colspan="3">Keine Versuche vorhanden.</td>
</tr>
<?
endif;
?>
</tbody>
</table>
<div class="box">
<h3>Beschreibung</h3>
<div class="editInPlace"><?=nl2br($project['description']);?></div>
<p></p>
<h3>Versuche</h3>
<table class="tableList">
<thead>
<tr>
<th scope="col">Versuch</th>
<th scope="col">Berechnungen</th>
<th scope="col">Aktionen</th>
</tr>
</thead>
<tbody>
<?php if (count($trials) > 0):?>
<?php foreach($trials as $trial):?>
<tr>
<td><a href="<?=site_url('trials/'.$trial['id'])?>"title="Versuch &quot;<?=$trial['name']?>&quot; anzeigen"><?=$trial['name']?></a></td>
<td><span class="active">Erfolgreich abgeschlossen</span></td>
<td>
<a href="<?=site_url('trials/results/'.$trial['id'])?>" title="Ergebnisse zum Versuch &quot;<?=$trial['name']?>&quot; anzeigen">Ergebnisse anzeigen</a> |
<a href="<?=site_url('trials/edit/'.$trial['id'])?>" title="Versuch &quot;<?=$trial['name']?>&quot; bearbeiten">Bearbeiten</a> |
<a href="<?=site_url('trials/delete/'.$trial['id'])?>" title="Versuch &quot;<?=$trial['name']?>&quot; entfernen">Entfernen</a>
</td>
</tr>
<?php endforeach;?>
<?php else:?>
<tr>
<td colspan="3">Keine Versuche vorhanden.</td>
</tr>
<?php endif;?>
</tbody>
</table>
<p><a class="button add" href="<?=site_url('trials/create/'.$project['id'])?>">Neuen Versuch erstellen</a>
</div>
<p><a class="button add" href="<?=site_url('trials/create/'.$project['id'])?>">Neuen Versuch erstellen</a></p>
</div>
<div class="title">
<h2>Letzte Berechnungen</h2>
</div>
<div class="title">
<h2>Letzte Berechnungen</h2>
</div>
<div class="box">
<table class="tableList">
<thead>
<tr>
<th scope="col">Versuch</th>
<th scope="col">Fertiggestellt</th>
<th scope="col">Aktionen</th>
</tr>
</thead>
<tbody>
<?
if(count($jobsDone) > 0):
foreach($jobsDone as $job):
?>
<tr>
<td>Versuchsname</td>
<td>Heute, 09:32</td>
<td>
<a href="<?=site_url('trials/results/'.$trial['id'])?>" title="Ergebnisse zum Versuch &quot;<?=$trial['name']?>&quot; anzeigen">Ergebnisse anzeigen</a> |
<a href="<?=site_url('trials/edit/'.$trial['id'])?>" title="Versuch &quot;<?=$trial['name']?>&quot; bearbeiten">Bearbeiten</a></td>
</tr>
<?
endforeach;
else:
?>
<tr>
<td colspan="3">Es wurden noch keine Berechnungen durchgeführt.</td>
</tr>
<?
endif;
?>
</tbody>
</table>
</div>
<div class="box">
<table class="tableList">
<thead>
<tr>
<th scope="col">Versuch</th>
<th scope="col">Fertiggestellt</th>
<th scope="col">Aktionen</th>
</tr>
</thead>
<tbody>
<?php if(count($jobsDone) > 0):?>
<?php foreach($jobsDone as $job):?>
<tr>
<td>Versuchsname</td>
<td>Heute, 09:32</td>
<td>
<a href="<?=site_url('trials/results/'.$trial['id'])?>" title="Ergebnisse zum Versuch &quot;<?=$trial['name']?>&quot; anzeigen">Ergebnisse anzeigen</a> |
<a href="<?=site_url('trials/edit/'.$trial['id'])?>" title="Versuch &quot;<?=$trial['name']?>&quot; bearbeiten">Bearbeiten</a>
</td>
</tr>
<?php endforeach;?>
<?php else:?>
<tr>
<td colspan="3">Es wurden noch keine Berechnungen durchgeführt.</td>
</tr>
<?php endif;?>
</tbody>
</table>
</div>
</div>

View File

@@ -1,75 +1,71 @@
<?php $this->load->view('header'); ?>
<?php $this->load->view('header');?>
<div id="content">
<div class="title">
<h2>Projektübersicht</h2>
</div>
<div class="title">
<h2>Projektübersicht</h2>
</div>
<div class="box">
<h3>Übersicht aller Projekte</h3>
<table class="tableList paginated">
<thead>
<tr>
<th scope="col">Projekt</th>
<th scope="col">Besitzer</th>
<th scope="col">Berechnungen</th>
<th scope="col">Aktion</th>
</tr>
</thead>
<tbody>
<?
foreach($projects as $project):
?>
<tr>
<td><a href="<?=site_url('projects/detail/' . $project['id'])?>"><abbr title="<?=$project['description']?>"><?=$project['name']?></abbr></a></td>
<td><?=$project['firstname'] . " " . $project['lastname']?></td>
<td><span class="active">Erfolgreich abgeschlossen</span></td>
<td><a href="#">Ergebnisse anzeigen</a> | <?=anchor('projects/delete/' . $project['id'], "Entfernen");?></td>
</tr>
<?
endforeach;
?>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="closed">Fehlgeschlagen</span></td>
<td><a href="#">Fehlerbericht</a> | <a href="#">Entfernen</a></td>
</tr>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="pending">Berechnung im Gange: 20%</span></td>
<td><a href="#">Anhalten</a> | <a href="#">Entfernen</a></td>
</tr>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="pending">Berechnung im Gange: 60%</span></td>
<td><a href="#">Anhalten</a> | <a href="#">Entfernen</a></td>
</tr>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="pending">Berechnung im Gange: 0%</span></td>
<td><a href="#">Anhalten</a> | <a href="#">Entfernen</a></td>
</tr>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="closed">Fehlgeschlagen</span></td>
<td><a href="#">Fehlerbericht</a> | <a href="#">Entfernen</a></td>
</tr>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="closed">Fehlgeschlagen</span></td>
<td><a href="#">Fehlerbericht</a> | <a href="#">Entfernen</a></td>
</tr>
</tbody>
</table>
</div>
<div class="box">
<h3>Übersicht aller Projekte</h3>
<table class="tableList paginated">
<thead>
<tr>
<th scope="col">Projekt</th>
<th scope="col">Besitzer</th>
<th scope="col">Berechnungen</th>
<th scope="col">Aktion</th>
</tr>
</thead>
<tbody>
<?php foreach($projects as $project):?>
<tr>
<td><a href="<?=site_url('projects/detail/' . $project['id'])?>"><abbr title="<?=$project['description']?>"><?=$project['name']?></abbr></a></td>
<td><?=$project['firstname'] . " " . $project['lastname']?></td>
<td><span class="active">Erfolgreich abgeschlossen</span></td>
<td><a href="#">Ergebnisse anzeigen</a> | <?=anchor('projects/delete/' . $project['id'], "Entfernen");?></td>
</tr>
<?php endforeach;?>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="closed">Fehlgeschlagen</span></td>
<td><a href="#">Fehlerbericht</a> | <a href="#">Entfernen</a></td>
</tr>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="pending">Berechnung im Gange: 20%</span></td>
<td><a href="#">Anhalten</a> | <a href="#">Entfernen</a></td>
</tr>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="pending">Berechnung im Gange: 60%</span></td>
<td><a href="#">Anhalten</a> | <a href="#">Entfernen</a></td>
</tr>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="pending">Berechnung im Gange: 0%</span></td>
<td><a href="#">Anhalten</a> | <a href="#">Entfernen</a></td>
</tr>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="closed">Fehlgeschlagen</span></td>
<td><a href="#">Fehlerbericht</a> | <a href="#">Entfernen</a></td>
</tr>
<tr>
<td><a href="#"><abbr title="Beschreibung des Projekts">Blutkörperchen</abbr></a></td>
<td>Karsten Heiken</td>
<td><span class="closed">Fehlgeschlagen</span></td>
<td><a href="#">Fehlerbericht</a> | <a href="#">Entfernen</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<?php $this->load->view('footer'); ?>
<?php $this->load->view('footer');?>

View File

@@ -1,17 +1,62 @@
function get_notifications() {
/**
*
*/
function getNotifications() {
$.get(SITE_URL + 'ajax/get_notifications', function(data) {
if(data.length > 0) {
if (data.length > 0) {
$('#notifications').append(data).slideDown();
}
});
}
/**
* Saves the changes done by in-place edit.
*
* @param obj
* @param cancel
*/
function saveChanges(obj, cancel) {
var a;
if (!cancel) {
a = $(obj).parent().siblings(0).val();
$.post(SITE_URL + 'ajax/save_project', { content: a }, function(response) {
alert("Die Änderungen wurden gespeichert.");
});
} else {
a = cancel;
}
$(obj).parent().parent().after('<div class="editInPlace">' + a + '</div>').remove();
}
/**
* Alternates the table rows.
*/
$.fn.alternateRowColors = function() {
$('tbody tr:odd', this).removeClass('even').addClass('odd');
$('tbody tr:even', this).removeClass('odd').addClass('even');
return this;
$('tbody tr:odd', this).removeClass('even').addClass('odd');
$('tbody tr:even', this).removeClass('odd').addClass('even');
return this;
};
/**
* Replaces html line breaks with newlines.
*/
$.fn.br2nl = function() {
return $(this).html().replace(/(<br>)|(<br \/>)|(<p>)|(<\/p>)/g, "");
};
/**
* Similar to PHP's nl2br function.
*/
$.fn.nl2br = function() {
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return $(this).html().replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
};
/*
* Tabs
*/
$(document).ready(function() {
$(".tab_content").hide(); // hide all content
$("ul.tabs li:first").addClass("active").show(); // activate first tab
@@ -30,75 +75,100 @@ $(document).ready(function() {
});
$('#notifications').hide();
get_notifications();
setInterval('get_notifications()', '5000');
getNotifications();
setInterval('getNotifications()', '5000');
});
/*
* Tables
/**
* Do some stuff if document is ready.
*/
$(document).ready(function() {
var settings = {
table_class : 'tableList'
};
/*
* Tables
*/
var settings = {
table_class : 'tableList'
};
// add or delete "hover" class on mouseOver event
$('.' + settings.table_class + ' tbody tr').hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
// add or delete "hover" class on mouseOver event
$('.' + settings.table_class + ' tbody tr').hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
// add or delete "selected" class if a row is selected via checkbox
$('.' + settings.table_class + ' tbody input:checkbox').click(function() {
if ($(this).attr('checked') == true) {
$(this).parent().parent().addClass('selected');
} else {
$(this).parent().parent().removeClass('selected');
}
});
// add or delete "selected" class if a row is selected via checkbox
$('.' + settings.table_class + ' tbody input:checkbox').click(function() {
if ($(this).attr('checked') == true) {
$(this).parent().parent().addClass('selected');
} else {
$(this).parent().parent().removeClass('selected');
}
});
// alternate table rows
$('.' + settings.table_class).each(function() {
var table = $(this);
table.alternateRowColors(table);
});
// alternate table rows
$('.' + settings.table_class).each(function() {
var table = $(this);
table.alternateRowColors(table);
});
/*
* Pagination
*/
$('.paginated').each(function() {
var currentPage = 0;
var numPerPage = 6;
var table = $(this);
/*
* Pagination
*/
$('.paginated').each(function() {
var currentPage = 0;
var numPerPage = 6;
var table = $(this);
table.bind('repaginate', function() {
var start = currentPage * numPerPage;
var end = (currentPage + 1) * numPerPage;
table.find('tbody tr').slice(start, end).show().end().slice(0, start).hide().end().slice(end).hide().end();
});
table.bind('repaginate', function() {
var start = currentPage * numPerPage;
var end = (currentPage + 1) * numPerPage;
table.find('tbody tr').slice(start, end).show().end().slice(0, start).hide().end().slice(end).hide().end();
});
var numRows = table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var numRows = table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pager = $('<div class="pagination"></div>');
var $pagelist = $('<ul></ul>');
var $pager = $('<div class="pagination"></div>');
var $pagelist = $('<ul></ul>');
$pagelist.append('<li class="pages">Seite:</li>');
$pagelist.append('<li class="pages">Seite:</li>');
for (var page = 0; page < numPages; page++) {
$('<li class="page-number">' + (page + 1) + '</li>').bind('click', {'newPage': page}, function(event) {
currentPage = event.data['newPage'];
table.trigger('repaginate');
for (var page = 0; page < numPages; page++) {
$('<li class="page-number">' + (page + 1) + '</li>').bind('click', {'newPage': page}, function(event) {
currentPage = event.data['newPage'];
table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pagelist).addClass('clickable');
}
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pagelist).addClass('clickable');
}
$pagelist.find('li.page-number:first').addClass('active');
$pager.append($pagelist);
$pager.insertAfter(table);
$pagelist.find('li.page-number:first').addClass('active');
$pager.append($pagelist);
$pager.insertAfter(table);
table.trigger('repaginate');
});
table.trigger('repaginate');
});
/*
* In-place editor
*/
$('.editInPlace').click(function() {
var textarea = '<div><textarea rows="6" cols="60">' + $(this).br2nl() + '</textarea><p></p>';
var button = '<p><a class="button save" href="javascript:void(0);">Speichern</a> <a class="button cancel" href="javascript:void(0);">Abbrechen</a></div>';
var revert = $(this).html();
$(this).after(textarea + button).remove();
$('.save').click(function() {
saveChanges(this, false);
});
$('.cancel').click(function() {
saveChanges(this, revert);
});
}).mouseover(function() {
$(this).addClass('editable');
}).mouseout(function() {
$(this).removeClass('editable');
});
});