PHP Classes

File: app/Views/Tasks/index.php

Recommend this page to a friend!
  Classes of Faris AL-Otabi   Task App   app/Views/Tasks/index.php   Download  
File: app/Views/Tasks/index.php
Role: Example script
Content type: text/plain
Description: Example script
Class: Task App
Create and manage tasks to be done
Author: By
Last change:
Date: 17 days ago
Size: 2,053 bytes
 

Contents

Class file image Download
<?= $this->extend("base"); ?>

<?= $this->section("title"); ?>Task<?= $this->endSection(); ?>

<?= $this->section("content"); ?>

<h1 class="title">Tasks</h1>

<div class="mb-4">
    <a class="button is-link" href="<?= site_url('/tasks/new'); ?>">Add a task</a>
</div>

<div class="field">
    <label class="label" for="query">Search</label>
    <div class="control">
        <input class="input" name="query" id="query" />
    </div>
</div>
<div class="content">
    <?php if ($tasks) : ?>
<ul>
            <?php foreach ($tasks as $task) : ?>
<li><a href="<?= site_url('/tasks/show/' . $task->id); ?>">
                        <?= $task->description; ?>
</a>
                </li>
            <?php endforeach; ?>
</ul>
        <?= $pages->simpleLinks(); ?>
<?php else : ?>
<p class="is-medium">There are no tasks</p>
    <?php endif; ?>
</div>

<script src="<?= site_url('/js/auto-complete.min.js') ?>"></script>

<script>
    var searchUrl = "<?= site_url('/tasks/search?q=') ?>";
    var showTask = "<?= site_url('/tasks/show/') ?>";
    var data;
    var i;

    var searchAutoComplete = new autoComplete({
        selector: 'input[name="query"]',
        cache: false,
        source: function(term, response) {
            var request = new XMLHttpRequest();

            request.open('GET', searchUrl + term, true);

            request.onload = function() {
                data = JSON.parse(this.response);

                i = 0;

                var suggestion = data.map(task => task.description);

                response(suggestion);
            };

            request.send();
        },
        renderItem: function(item, search) {
            var id = data[i].id;

            i++;

            return '<div class="autocomplete-suggestion" data-id="' + id + '">' + item + '</div>';
        },
        onSelect: function(e, term, item) {
            window.location.href = showTask + item.getAttribute('data-id');
        }
    });
</script>

<?= $this->endSection(); ?>