mckiersey/BasicFinalProfilePage.ejs

## BasicFinalProfilePage.ejs
<html>

<head>
    <!-- ADD BOOTSTRAP-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <!-- See here: https://getbootstrap.com/docs/4.2/getting-started/introduction/  -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>
    <nav class="navbar navbar-light bg-light">
        <span class="navbar-brand mb-0 h1">
            Welcome <b class="Dynamic"><%= data.name %></b></span>
        <div id="SessionStatus">
            <h2 id='SessionStatusText'></h2>
        </div>
    </nav>

    <div id="ProfilePictureSection">
        <img id="ProfilePicture" src="<%=data.profile_picture%>" />
        <button class="btn btn-light ProfilePicture" id="HomeButton"
            onClick=window.location.href='http://localhost:80/home'>Go
            to home</button>

    </div>

    <h2>user ID: <b class=" Dynamic"><%= data.user_id %></b>
    </h2>


    <div id="YouTubeForm">
        <label>Youtube Link</label>
        <input type="text" name="YouTubeLink" placeholder="YouTube embed link">
        </br>
        <div>
            <button class="btn btn-light" id="VideoButton" onclick=AddVideo()>Submit</button>
            See how: <a href=" https://www.youtube.com/watch?v=kiyi-C7NQrQ" target="_blank"> Using embeded links</a>
        </div>
    </div>

    <div id=VideoSection></div>

    <footer>
        <p>Image: Late afternoon in Paris | Taken by <a href="https://mckiersey.medium.com/" target="_blank">Seán
                McKiernan</a></p>
    </footer>

</body>

<script>
    // GET COOKIE FUNCTION
    function getCookieValue(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

    //GET PAGE VARIABLES
    var urlParams = new URLSearchParams(window.location.search);
    var user_id = urlParams.get('user_id');
    // User ID seen in the browser URL- a user Id is synonymous with profile ID - each user has their own profile
    var CookieToken = getCookieValue('USER_SESSION_TOKEN')

    // GET VIDEO REQUEST: DESCRIPTION
    // FUNCTION: Display relevant video content corresponding to the profile user id
    // 1) Send GET request to BackEnd route Video for content corresponding to user_id
    // 2) Insert response data into section with ID tag = 'VideoSection'
    var GetVideoUrl = 'http://localhost:80/Video?user_id=' + user_id
    $.get(GetVideoUrl, function (data, status) {
        document.getElementById('VideoSection').innerHTML += `${data}`
    });


    }
</script>


</html>
	<html>

	<head>
	<!-- ADD BOOTSTRAP-->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
	integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
	<!-- See here: https://getbootstrap.com/docs/4.2/getting-started/introduction/ -->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

	</head>

	<body>
	<nav class="navbar navbar-light bg-light">
	<span class="navbar-brand mb-0 h1">
	Welcome <b class="Dynamic"><%= data.name %></b></span>
	<div id="SessionStatus">
	<h2 id='SessionStatusText'></h2>
	</div>
	</nav>

	<div id="ProfilePictureSection">
	<img id="ProfilePicture" src="<%=data.profile_picture%>" />
	<button class="btn btn-light ProfilePicture" id="HomeButton"
	onClick=window.location.href='http://localhost:80/home'>Go
	to home</button>

	</div>

	<h2>user ID: <b class=" Dynamic"><%= data.user_id %></b>
	</h2>


	<div id="YouTubeForm">
	<label>Youtube Link</label>
	<input type="text" name="YouTubeLink" placeholder="YouTube embed link">
	</br>
	<div>
	<button class="btn btn-light" id="VideoButton" onclick=AddVideo()>Submit</button>
	See how: <a href=" https://www.youtube.com/watch?v=kiyi-C7NQrQ" target="_blank"> Using embeded links</a>
	</div>
	</div>

	<div id=VideoSection></div>

	<footer>
	<p>Image: Late afternoon in Paris \| Taken by <a href="https://mckiersey.medium.com/" target="_blank">Seán
	McKiernan</a></p>
	</footer>

	</body>

	<script>
	// GET COOKIE FUNCTION
	function getCookieValue(cname) {
	var name = cname + "=";
	var decodedCookie = decodeURIComponent(document.cookie);
	var ca = decodedCookie.split(';');
	for (var i = 0; i < ca.length; i++) {
	var c = ca[i];
	while (c.charAt(0) == ' ') {
	c = c.substring(1);
	}
	if (c.indexOf(name) == 0) {
	return c.substring(name.length, c.length);
	}
	}
	return "";
	}

	//GET PAGE VARIABLES
	var urlParams = new URLSearchParams(window.location.search);
	var user_id = urlParams.get('user_id');
	// User ID seen in the browser URL- a user Id is synonymous with profile ID - each user has their own profile
	var CookieToken = getCookieValue('USER_SESSION_TOKEN')

	// GET VIDEO REQUEST: DESCRIPTION
	// FUNCTION: Display relevant video content corresponding to the profile user id
	// 1) Send GET request to BackEnd route Video for content corresponding to user_id
	// 2) Insert response data into section with ID tag = 'VideoSection'
	var GetVideoUrl = 'http://localhost:80/Video?user_id=' + user_id
	$.get(GetVideoUrl, function (data, status) {
	document.getElementById('VideoSection').innerHTML += `${data}`
	});




	}
	</script>



	</html>