function word_settings_page()
{
$words = get_words();
$categories = get_word_categories();
$domains = get_domains();
$semantic = WP_PLUGIN_URL . '/vocabulary-plugin/css/semantic.css';
$new_word_url = admin_url() . "admin.php?page=new_word_settings";
$edit_word_url = admin_url() . "admin.php?page=edit_word_settings";
?>
<!-- style sheet so our admin page looks nice -->
<link rel="stylesheet" type="text/css" href="<?php
echo $semantic;
?>
"/>
<p>Manage your words!</p>
<hr>
<?php
if (isset($_GET['settings-saved'])) {
?>
<div class="updated"><p>Settings updated successfully.</p></div>
<?php
}
?>
<h2>Vocabulary</h2>
<div class="ui form">
<div class="field">
<label for="filter">Filter the words by</label>
<select name="domain_id" id="domain_id">
<option value="NA">Select a Domain</option>
<?php
foreach ($domains as $domain) {
?>
<option value="<?php
echo $domain->id;
?>
"><?php
echo $domain->name;
?>
</option>
<?php
}
?>
</select>
<select name="category_id" id="category_id">
<option value="NA">Select a Category</option>
<?php
foreach ($categories as $category) {
?>
<option value="<?php
echo $category->id;
?>
"><?php
echo $category->name;
?>
</option>
<?php
}
?>
</select>
</div>
</div>
<table id="wordTable" class="ui table segment tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Points</th>
<th>Image</th>
<th>Audio</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
foreach ($words as $word) {
?>
<?php
$current_word = build_words($word->id);
?>
<tr>
<td class="dom_option cat_option dom<?php
echo $word->domain_id;
?>
cat<?php
echo $word->word_category_id;
?>
"><?php
echo $current_word->get_word();
?>
</td>
<td class="dom_option cat_option dom<?php
echo $word->domain_id;
?>
cat<?php
echo $word->word_category_id;
?>
"><?php
echo $current_word->get_description();
?>
</td>
<td class="dom_option cat_option dom<?php
echo $word->domain_id;
?>
cat<?php
echo $word->word_category_id;
?>
"><?php
echo $current_word->get_points();
?>
</td>
<td class="dom_option cat_option dom<?php
echo $word->domain_id;
?>
cat<?php
echo $word->word_category_id;
?>
"><?php
echo $current_word->get_image();
?>
</td>
<td class="dom_option cat_option dom<?php
echo $word->domain_id;
?>
cat<?php
echo $word->word_category_id;
?>
"><?php
echo $current_word->get_audio();
?>
</td>
<td class="dom_option cat_option dom<?php
echo $word->domain_id;
?>
cat<?php
echo $word->word_category_id;
?>
"><a class="ui blue icon button" href="<?php
echo $edit_word_url;
?>
&id=<?php
echo $current_word->get_id();
?>
" style="padding: 7px">Edit</a></td>
<td class="dom_option cat_option dom<?php
echo $word->domain_id;
?>
cat<?php
echo $word->word_category_id;
?>
">
<form method="post" action="admin-post.php" id="delete_word_form<?php
echo $current_word->get_id();
?>
">
<!-- word processing hook -->
<input type="hidden" name="action" value="delete_word" />
<input type="hidden" name="word_id" value="<?php
echo $current_word->get_id();
?>
" />
<input type="submit" class="ui blue icon button" value="Delete" style="padding: 7px" >
</form>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<a class="ui blue icon button" href="<?php
echo $new_word_url;
?>
" style="padding: 7px">New Word</a>
<script>
jQuery(document).ready(function(){
jQuery("#wordTable").tablesorter();
})
jQuery("#category_id").change(function(){
filter_words();
});
jQuery("#domain_id").change(function(){
filter_words();
});
function validation()
{
}
function filter_words()
{
var cat_selected = jQuery( "#category_id option:selected" ).val();
var dom_selected = jQuery( "#domain_id option:selected" ).val();
jQuery(".cat_option").hide();
//jQuery("input:checkbox").hide();
if(cat_selected == "NA" && dom_selected == "NA")
{
jQuery(".cat_option").show();
}
else if(cat_selected != "NA" && dom_selected == "NA")
{
jQuery(".cat_option").hide();
jQuery(".cat" + cat_selected).show();
}
else if(cat_selected == "NA" && dom_selected != "NA")
{
jQuery(".cat_option").hide();
jQuery(".dom" + dom_selected).show();
}
else
{
jQuery(".cat_option").hide();
jQuery(".dom" + dom_selected + ".cat" + cat_selected).show();
}
jQuery("input:checkbox").hide();
}
</script>
<?php
}
function edit_word_settings_page()
{
$semantic = WP_PLUGIN_URL . '/vocabulary-plugin/css/semantic.css';
$word_id = filter_input(INPUT_POST, 'id');
$words = get_word($word_id);
$domains = get_domains();
$categories = get_word_categories();
if (isset($_GET['id']) && is_numeric($_GET['id'])) {
$words = build_words($_GET['id']);
}
?>
<link rel="stylesheet" type="text/css" href="<?php
echo $semantic;
?>
"/>
<h2>Edit a word!</h2>
<hr>
<?php
if (isset($_GET['settings-saved'])) {
?>
<div class="updated"><p>Dictionary updated successfully.</p></div>
<?php
} elseif (isset($_GET['error'])) {
?>
<div class="error"><p>Error updating dictionary.</p></div>
<?php
}
?>
<form id="myform" method="post" enctype="multipart/form-data" action="<?php
echo get_admin_url() . 'admin-post.php';
?>
">
<!-- pano processing hook -->
<input type="hidden" name="action" value="edit_word" />
<input type="hidden" name="word_id" value="<?php
echo $words->get_id();
?>
"/>
<div class="ui form segment edit_word_form">
<div class="ui form">
<div class="field">
<label for="domain_id">Select a Domain</label>
<select name="domain_id">
<option value="NA"> ... </option>
<?php
foreach ($domains as $domain) {
?>
<option value="<?php
echo $domain->id;
?>
"><?php
echo $domain->name;
?>
</option>
<?php
}
?>
</select>
</div>
</div>
<div class="ui form">
<div class="field">
<label for="category_id">Select a Category</label>
<select name="category_id">
<option value="NA">...</option>
<?php
foreach ($categories as $category) {
?>
<option value="<?php
echo $category->id;
?>
"><?php
echo $category->name;
?>
</option>
<?php
}
?>
</select>
</div>
</div>
<div class="ui form">
<div class="field">
<div class="ui left labeled icon input">
<label for="word_name">Word Name</label>
<input name="word_name" id="name" value="<?php
echo $words->get_word();
?>
" required />
</div>
</div>
</div>
<div class="ui form">
<div class="field">
<label for="word_description">Description</label>
<textarea name="word_description" id="word_description" required ><?php
echo $words->get_description();
?>
</textarea>
<p class="error" id="description_too_big">* Description must be smaller than 255 char</p>
</div>
</div>
<div class="ui form">
<div class="field">
<label for="word_points">Points</label>
<select name="word_points">
<option value="30">30</option>
<option value="20">20</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="ui form">
<div class="field">
<div class="ui left labeled icon input">
<label for="word_image">Choose an image: <b>(Preferably 120x120)</b> </label>
<img class="word_image" src="<?php
echo content_url() . '/' . $words->get_image();
?>
" alt="Image"/>
<input type="file" name="word_image" id="word_image" />
</div>
</div>
</div>
<div class="ui form">
<div class="field">
<div class="ui left labeled icon input">
<label for="word_audio">Choose an audio: </label>
<input type="file" name="word_audio" id="word_audio" />
</div>
</div>
</div>
<?php
submit_button();
?>
</div>
</form>
</div>
<script>
jQuery('#myform').submit(function(e){
max_description_size(e);
});
function max_description_size(e){
var size = jQuery("#word_description").val().length;
if(size > 255){
document.getElementById("description_too_big").style.display = "block";
e.preventDefault();
}else{
document.getElementById("description_too_big").style.display = "none";
}
}
jQuery(document).ready(function(){
jQuery("#wordTable").tablesorter();
})
</script>
<?php
}
