/********************************
*** SignupController.cs ***
*********************************/

namespace assignment_5.Controllers
{
    public class SignupController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
}

/********************************
*** ParticipantsController.cs ***
*********************************/

namespace assignment_5.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ParticipantsController : ControllerBase
    {
        private readonly ApplicationDbContext _context;
 
		// Dependency Inject Database Context
        public ParticipantsController(ApplicationDbContext context)
        {
            _context = context;
        }

		// Grab all participants from the database and return them as a list
        // GET api/Signup
        [HttpGet]
        public async Task<ActionResult<IEnumerable<Participant>>> GetParticipantsAsync()
        {
            return await _context.Participants.ToListAsync();
        }
}

/**************************
****** index.cshtml *******
**************************/

<!-- Du trenger kun et element som Vue kan "hekte" seg på. ID == navnet som skal stå i el i site.js -->
div id="app"></div>

/**************************
********* site.js *********
**************************/

<script src="...link-til-axios"></script>

let url = "/api/participants/";

let app = new Vue({
	el: "#app",
	data: {
		participants: []
	},

	// Her ser du koss man iterere over data fra APIen. Data feltet vårt har en entry "participants".
    // I metoden, created, som kalles automatisk når vue opprettes, så sørge me for at this.participants
    // mottar data ved å bruke axios.get på URL. Merk at url = /api/participants. Den bruke altså "HTTP GET" metoden
	// i ParticipantsController.

	template: `
	<div>
		<ol>
			<li v-for="participant in participants">
				<p>{{ participant.id }} - {{ participant.name }} - {{ participant.email }} - {{ participant.age }} </p>
			</li>
		</ol>
	</div>

	created() {
		axios.get(url).then((response) => {
			this.participants = response.data;
		});
	}
})