Zoraxy/web/components/redirection.html

<h3><i class="level up alternate icon"></i> Redirection Rules</h3>
<p>Add exception case for redirecting any matching URLs</p>
<div class="ui basic segment">
    <table class="ui very basic celled table">
        <thead>
            <tr>
                <th>Redirection URL</th>
                <th>Destination URL</th>
                <th>Copy Pathname</th>
                <th>Status Code</th>
            </tr>
        </thead>
        <tbody id="redirectionRuleList">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="ui divider"></div>
<p>Add path redirection to your domain</p>
<div class="ui divider"></div>
<div class="ui form">
    <div class="field">
      <label>Redirection URL</label>
      <input type="text" name="redirection-url" placeholder="Redirection URL">
      <small><i class="ui circle info icon"></i> Redirection URL, any matching prefix of the request URL will be redirected to the following destination URL.</small>
    </div>
    <div class="field">
      <label>Destination URL</label>
      <input type="text" name="destination-url" placeholder="Destination URL">
    </div>
    <div class="field">
      <div class="ui checkbox">
        <input type="checkbox" name="forward-childpath" tabindex="0" class="hidden" checked>
        <label>Forward Pathname</label>
      </div>
      <div class="ui message">
        <p>Append the current pathname after the redirect destination</p>
        <i class="check square outline icon"></i> old.example.com<b>/blog</b> <i class="long arrow alternate right icon" style="margin-left: 1em;"></i> new.example.com<b>/blog</b> <br>
        <i class="square outline icon"></i> Disabled old.example.com<b>/blog</b> <i class="long arrow alternate right icon" style="margin-left: 1em;"></i> new.example.com
      </div>
    </div>
    <div class="grouped fields">
        <label>Redirection Status Code</label>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="redirect-type" value="307" checked>
            <label>Temporary Redirect <br><small>Status Code: 307</small></label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="redirect-type" value="301">
            <label>Moved Permanently <br><small>Status Code: 301</small></label>
          </div>
        </div>
    </div>
    <button class="ui button" onclick="addRules();">Add</button>
</div>
<script>
    $(".checkbox").checkbox();

    function addRules(){
        let redirectUrl = document.querySelector('input[name="redirection-url"]').value;
        let destUrl = document.querySelector('input[name="destination-url"]').value;
        let forwardChildpath = document.querySelector('input[name="forward-childpath"]').checked;
        let redirectType = document.querySelector('input[name="redirect-type"]:checked').value;

        $.ajax({
            url: "/redirect/add", 
            method: "POST",
            data: {
                redirectUrl: redirectUrl,
                destUrl: destUrl,
                forwardChildpath: forwardChildpath,
                redirectType: parseInt(redirectType),
            },
            success: function(data){
                alert(data);
            }
        })
    }

    function deleteRule(redirectDomain){

    }

    function initRedirectionRuleList(){
        $("#redirectionRuleList").html("");
        $.get("/redirect/list", function(data){
            console.log(data);
            data.forEach(function(entry){
                $("#redirectionRuleList").append(`<tr>
                    <td>${entry.RedirectURL}</td>
                    <td>${entry.TargetURL}</td>
                    <td>${entry.ForwardChildpath?"<i class='ui green checkmark icon'></i>":"<i class='ui red remove icon'></i>"}</td>
                    <td>${entry.StatusCode==307?"Temporary Redirect (307)":"Moved Permanently (301)"}</td>
                </tr>`);
            });
            
        });
    }
    initRedirectionRuleList();
    
</script>