sonarqube-badges/templates/project.templ

package templates

import "sonarqube-badge/store"
import "fmt"

templ ProjectList(projects []store.Project) {
      <ul>
      for _, item := range projects {
        <li>
            <a href={ templ.SafeURL(fmt.Sprintf("/project/%d", item.ID))}>
                if item.ProjectName != "" {
                    { item.ProjectName }
                } else {
                    Untitled Project
                }
            </a>
        </li>
      }
      </ul>
}

templ Project(project store.Project) {
    @templ.JSONScript("projectID", project.ID)
    <div class="container">
        <div class="my-4">
            if project.ProjectName != "" {
                <h2>{project.ProjectName}</h2>
            } else {
                <h2>Untitled Project</h2>
            }
        </div>

        @EditProject(project)

        @BadgeMaker(project)

        @DangerZone(project)
    </div>
    
}

templ EditProject(project store.Project) {
        <div class="container mb-4">
            <form id="editForm" hx-post={fmt.Sprintf("/api/project/%d", project.ID)} hx-ext="json-enc">
                <h3>Project Edition</h3>
                <div class="mb-2">
                    <label class="form-label" for="projectName">Project Name</label>
                    <input class="form-control" name="name" id="projectName" placeholder="Project Name" value={project.ProjectName}>
                </div>
                <div class="mb-2">
                    <label class="form-label" for="projectToken">Project Token</label>
                    <input class="form-control" name="token" id="projectToken" placeholder="Project Token" value={project.Token} type="password">
                </div>
                <button class="btn btn-primary">Submit</button>
            </form>
        </div>

        <script>
        document.getElementById('editForm').addEventListener('htmx:afterRequest', function (ev) {
                if (ev.detail.successful) {
                    location.reload()
                }
            });
        </script>
}

templ BadgeMaker(project store.Project) {
	<div class="container mb-4">
        <div>
            <h3>Badge maker</h3>
            <label class="form-label" for="badgeType">Type of badge</label>
            <select class="form-control"
                    id="badgeType"
                    name="type"
                    hx-target="#image"
                    hx-target-error="#image"
                    hx-post={fmt.Sprintf("/project/badge/%d", project.ID)}>
                <option value="coverage">Coverage</option>
                <option value="duplicated_lines_density">Duplicated Lines(%)</option>
                <option value="ncloc">Lines of Code</option>
                <option selected="selected" value="alert_status">Quality Gate Status</option>
                <option value="security_hotspots">Security Hotspots</option>
                <option value="software_quality_reliability_issues">Reliability Issues</option>
                <option value="software_quality_maintainability_issues">Maintainability Issues</option>
                <option value="software_quality_reliability_issues">Reliability Issues</option>
                <option value="software_quality_security_issues">Security Issues</option>
                <option value="software_quality_maintainability_rating">Maintainability Rating</option>
                <option value="software_quality_reliability_rating">Reliability Rating</option>
                <option value="software_quality_security_rating">Security Rating</option>
                <option value="software_quality_maintainability_remediation_effort">Technical Debt</option>
            </select>
        </div>
        <div class="my-2">
            <label class="form-label" for="imageURL">Image URL</label>
            <div class="mb-2" id="image" hx-trigger="load" hx-get={fmt.Sprintf("/project/badge/%d/alert_status", project.ID)}>
            </div>
            <input class="form-control" id="imageURL" disabled readonly>
        </div>
    </div>

    <script>
        const projectId = parseInt(document.getElementById("projectID").textContent);
        const badgeType = document.getElementById("badgeType");
        const imageUrl = document.getElementById("imageURL");
        function resetImage() {
            imageUrl.value = `${location.origin}/project/badge/${projectId}/${badgeType.value}`
        }
        resetImage()
        badgeType.addEventListener('htmx:afterRequest', function (ev) {
            if (ev.detail.successful){
                resetImage()
            }
        })
    </script>
}

templ DangerZone(project store.Project) {
	<div class="container">
        <h3>Danger Zone</h3>
        <button class="btn btn-danger" id="deleteProject" hx-delete={fmt.Sprintf("/api/project/%d", project.ID)} hx-confirm="Are you sure to delete this project?">Delete Project</button>
    </div>
    <script>
        document.getElementById('deleteProject').addEventListener('htmx:afterRequest', function (ev) {
            if (ev.detail.successful) {
                location.href = "/"
            }
        });
    </script>
}