IDDRS/templates/data_entry/new_entry.html

{% extends "data_entry/base.html" %}

{% block page_content %}
<h1>Add new paragraph</h1>
<form id="form">
    <div class="input-group mb-3">
        <label class="input-group-text" for="levelSelect">Level</label>
        <select class="form-select" id="levelSelect" name="level">
            <option selected disabled>Choose...</option>
            {% for level in levels %}
            <option value="{{level.id}}">{{ level.levelNumber }} {{ level.levelName }}</option>
            {% endfor %}
        </select>
    </div>

    <div class="input-group mb-3">
        <label class="input-group-text" for="standardSelect">Standard</label>
        <select class="form-select" id="standardSelect" name="standard">
            {% for standard in standards %}
            <option data-value="{{standard.levelID_id}}" value="{{standard.standardNumber}}">{{standard.standardNumber}}
                {{ standard.standardTitle }}</option>
            {% endfor %}
        </select>
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text" id="heading1">Title</span>
        <input name="heading1" type="text" class="form-control" placeholder="Title" aria-label="Title"
            aria-describedby="heading1">
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text" id="heading2">Sub-Title 1</span>
        <input name="heading2" type="text" class="form-control" placeholder="Sub-Title (If exists)"
            aria-label="Sub-Title" aria-describedby="heading2">
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text" id="heading3">Sub-Title 2</span>
        <input name="heading3" type="text" class="form-control" placeholder="Sub-Title (If exists)"
            aria-label="Sub-Title" aria-describedby="heading3">
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text" id="heading4">Sub-Title 3</span>
        <input name="heading4" type="text" class="form-control" placeholder="Sub-Title (If exists)"
            aria-label="Sub-Title" aria-describedby="heading4">
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text">Paragraph</span>
        <textarea id="paragraph" name="paragraph" class="form-control" aria-label="Paragraph"></textarea>
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text" id="pageNum">Page Number</span>
        <input id="pageNumber" name="pageNum" type="text" class="form-control" placeholder="Page number"
            aria-label="Sub-Title" aria-describedby="pageNum">
    </div>

    <div class="col-12 mt-5">
        <button class="btn btn-primary" type="submit">Save</button>
    </div>
</form>

<script type="text/javascript">

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    const csrftoken = getCookie('csrftoken');

    var form = document.getElementById('form')
    form.addEventListener('submit', function (e) {
        e.preventDefault()
        console.log('form submitted')

        var url = 'http://127.0.0.1:8000/api/content-create/'
        var level = document.getElementById('levelSelect').value
        var standard = document.getElementById('standardSelect').value
        var heading1 = document.getElementById('heading1').value
        var heading2 = document.getElementById('heading2').value
        var heading3 = document.getElementById('heading3').value
        var heading4 = document.getElementById('heading4').value
        var paragraph = document.getElementById('paragraph').value
        var pageNumber = document.getElementById('pageNumber').value

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-type': 'application/json',
                'X-CSRFToken': csrftoken,
            },
            body:JSON.stringify({
                'Level':level,
                'Title':standard,
                'Heading1':heading1,
                'Heading2':heading2,
                'Heading3':heading3,
                'Heading4':heading4,
                'Paragraph':paragraph,
                'PageNum':pageNumber,})
        }).then(function(response){
            console.log('SUBMITTED!!!!!!!!')
        })
    })
</script>

{% endblock page_content %}