Stm Page Detail 2

if (Session["userID"] == null)

{

Response.Redirect("~/Login/index");

}

@using System.Web.Configuration

@using EightElements.Showtime.CMS.Data

ViewBag.Title = "Showcase Detail";

//List<ContentItem> list = ViewData["listContent"] as List<ContentItem>;

string cdn = WebConfigurationManager.AppSettings["CDN_Uri"];

string cdnContent = WebConfigurationManager.AppSettings["CDN_Content"];

string cdnVideo = WebConfigurationManager.AppSettings["CDN_Video"];

}

@*hastag css and js*@

@*<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>

.bootstrap-tagsinput .tag {

margin-right: 2px;

color: white;

}

.label-info {

background-color: #5bc0de;

}

.label {

display: inline;

padding: 0.2em 0.6em 0.3em;

font-size: 75%;

font-weight: 700;

line-height: 1;

color: #fff;

text-align: center;

white-space: nowrap;

vertical-align: baseline;

border-radius: 0.25em;

line-height: 2.2;

}

.bootstrap-tagsinput {

width: 600px;@*75%*@

}

input:focus::placeholder {

color: transparent;

}

</style>

<h2>@ViewBag.Title.</h2>

<small>

<i>

Created By <span id="txtUsername"></span> || Date : <span id="txtCreateDate"></span> <br>

Last Updated By : <span id="txtLastUpdatedByName"></span> ||

Last Updated Date : <span id="txtLastUpdatedDate"></span>

</i>

</small>

@*<script type="text/javascript">

var Session = '@Resources.Resource1.notFound';

alert('My Current Session is ' + Session);

</script>

<p>

</p>

@*<div class="examples">

<div class="container">*@

@*<div class="form-group">

<label for="">Tags Input</label>

<div class="bs-example">*@

@*<input type="text" id="#inputTag" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput"> *@

@*</div>

</div>*@

@* </div>

</div>*@

@* <hr style="border:1px solid #eaeaea">*@

</div>

</div>

</div>

@*<div class="form-group">

</div>

@*<textarea class="form-control" rows="4" style="width:75%" id="txtTags" placeholder="Content Tags"></textarea>*@

</div>

@*EndCollapse*@

@*https://localhost:44335/home/showcasedetail2?contentId=1117*@

@*hidden page get element*@

</div>

</div>

<button class="btn btn-danger mb-5" onclick="cancelPage()"><i class="fas fa-times"> </i> Cancel</button>

<h5 class="modal-title" id="exampleModalLabel">Themes Options</h5>

</button>

</div>

@* <img src="..." class="card-img-top" alt="...">*@

<h5 class="card-title">Themes</h5>

@* <a href="#" class="btn btn-primary">Go somewhere</a>*@

</div>

<button class="btn btn-primary mt-2" id="txtThemesBtn" type="button" onclick="addThemes()">Add Themes</button>

</div>

</div>

<h5 class="modal-title" id="exampleModalLabel">Classification Options</h5>

</button>

</div>

@* <img src="..." class="card-img-top" alt="...">*@

<h5 class="card-title">Clasification</h5>

@* <a href="#" class="btn btn-primary">Go somewhere</a>*@

</div>

<button class="btn btn-primary mt-2" id="txtClasificationBtn" type="button" onclick="addClasification()">Add Clasification</button>

</div>

</div>

<h5 class="modal-title" id="exampleModalLabel">Age Rating Options</h5>

</button>

</div>

@* <img src="..." class="card-img-top" alt="...">*@

<h5 class="card-title">Age Rating</h5>

@* <a href="#" class="btn btn-primary">Go somewhere</a>*@

</div>

<button class="btn btn-primary mt-2" id="txtAgeRatingBtn" type="button" onclick="addAgeRating()">Add Age Rating</button>

</div>

</div>

</div>

@*<a class="prev" onclick="plusSlides(-1)">❮</a>

<a class="next" onclick="plusSlides(1)">❯</a>*@

</div>

@section scripts

{

$(document).ready(function () {

//get contentId=1170

GetContentDetail()

ContentCategory()

ContentClassification()

ContentAgeRating()

saveThemes()

saveClasification()

saveAgeRating()

showHidden()

});

var resourcesSuccess = '@Resources.MyResource.success';

var resourcesError = '@Resources.MyResource.error';

var resourcesNotFound = '@Resources.MyResource.notFound';

var resourcesCancel = '@Resources.MyResource.cancel';

//$.urlParam('param1');

function GetContentDetail() {

var contentId = $.urlParam('contentId');

var content = "";

var tglLastUpdatedDate = "";

var LastUpdatedByName = "";

var CreateDate = "";

var username = "";

var isCP = "";

var GetcontentId = `<input type="text" value="${contentId}" id="txtGetContentDetail">`;

// $.urlParam('contentId');

// show image and video, button approve reject => task For monday TASSSKKKKKK

$.ajax({

url: '/Content/GetContentDetail?contentId=' + contentId,

success: function (response) {

if (response.Success) {

var data = response.Data;

isCP += `<input id ="txtIsCP" type="checkbox" value="true" ${data.IsCP == true ? "checked" : ""}> <label for="txtIsCP">IsCP</label>`;

$("#isCPGroup").html(isCP);

$("#txtTags").val(data.Tags);

$("#txtTags").tagsinput('add', data.Tags[0]);

var lud = new Date(data.LastUpdatedDate);

tglLastUpdatedDate += lud.getDate().toString().padStart(2, 0) + `-` + (lud.getMonth()+1).toString().padStart(2, 0) + `-` + lud.getFullYear() + ` ` + lud.getHours().toString().padStart(2,0) + `:` + lud.getMinutes().toString().padStart(2,0);

if (data.LastUpdatedDate != null) $("#txtLastUpdatedDate").html(tglLastUpdatedDate);

if (data.LastUpdatedDate == null) $("#txtLastUpdatedDate").html(`-`);

var cr = new Date(data.CreateDate);

CreateDate += cr.getDate().toString().padStart(2, 0) + `-` + (cr.getMonth() + 1).toString().padStart(2, 0) + `-` + cr.getFullYear() + ` ` + cr.getHours().toString().padStart(2,0) + `:` + cr.getMinutes().toString().padStart(2,0);

$("#txtCreateDate").html(CreateDate);

LastUpdatedByName += data.LastUpdatedByName;

if (data.LastUpdatedByName != null) $("#txtLastUpdatedByName").html(LastUpdatedByName);

if (data.LastUpdatedByName == null || data.LastUpdatedByName == 0) $("#txtLastUpdatedByName").html(`-`);

username += data.Username;

$("#txtUsername").html(username);

$("#txtUserId").val(data.UserId);

$("#txtTitle").val(data.Title);

$("#txtUsername").val(data.Username);

$("#txtIdContent").val(data.Id);

$("#txtFunctionAgeRating").val(data.AgeRatingName);

$("#txtFunctionAgeRatingId").val(data.AgeRatingId);

$("#txtFunctionClasification").val(data.ClassificationName);

$("#txtFunctionClasificationId").val(data.ClassificationId);

$("#txtFunctionThemes").val(data.CategoryName);

$("#txtFunctionThemesId").val(data.CategoryId);

var items = data.ContentItems;

var contentDiv = "";

var contentVid = "";

for (var i = 0; i < items.length; i++) {

var item = items[i];

$("#contentBody").empty();

var statusValueApprove = 1;

var statusValueReject = 2;

var getStatusApp = 1;

var getStatusRjc = 2;

let urlVidio = item.ContentPath;

if (urlVidio == null) urlVidio ="Null?"

const delBySimbolConvrtToString = urlVidio.split("?", 1).toString();

var getTypeVidio = delBySimbolConvrtToString.slice(-4);

if (item.ContentTypeId == 5) {

const fileSize = convertToMB(item.FileSize);

const frameRate = item.FrameRate;

const frameSize = item.FrameSize;

var duration = new Date(item.Duration * 1000).toISOString().substr(11, 8);

contentVid += `

</div>

Type : ${getTypeVidio}<br>

Frame Rate : ${frameRate}<br>

File Size : ${fileSize}<br>

Frame Size : ${frameSize}<br>

Duration : ${duration}<br>

</div>

<button id="btn-app-${item.Id}" type="submit" class="btn btn-primary mt-2" value="${getStatusApp}" onclick="itemApprove(${item.Id},${statusValueApprove})" ${item.Status == 1 ? "disabled " : ""}>${item.Status == 1 ? "Approved" : "Approve"}</button>

<button id="btn-rjc-${item.Id}" type="submit" class="btn btn-danger mt-2" value="${getStatusRjc}" onclick="itemApprove(${item.Id},${statusValueReject})" ${item.Status == 2 ? "disabled" : ""} >${item.Status == 2 ? "Rejected" : "Reject"}</button>

</div>

</div>`;

} else {

var html = `<div class="col-md-4 mb-4" >

<div class="card-body_c">`;

if (item.ContentTypeId == 1 || item.ContentTypeId == 2) {

var url = `@cdn/${item.ContentPath}`;

var html1 = `<div class="img-cm_wrap">

</div>

@*<img id="image-${item.Id}" src="${url}"/>*@

}

else if (item.ContentTypeId == 3) {

var url = `@cdnContent/${item.ContentPath}`;

var html1 = `<div class="img-cm_wrap">

</div>`

}

var html2 = `<div class="col-btn_wrap">

<button id="btn-app-${item.Id}" type="submit" class="btn btn-primary" value="${getStatusApp}" onclick="itemApprove(${item.Id},${statusValueApprove})" ${item.Status == 1 ? "disabled ": ""}>${item.Status == 1 ? "Approved":"Approve"}</button>

<button id="btn-rjc-${item.Id}" type="submit" class="btn btn-danger" value="${getStatusRjc}" onclick="itemApprove(${item.Id},${statusValueReject})" ${item.Status == 2 ? "disabled" : ""} >${item.Status == 2 ? "Rejected":"Reject"}</button>

</div>

</a>

</div>`;

contentDiv += html;

contentDiv += html1;

contentDiv += html2;

}

$("#formVidio").html(contentVid);

$("#contentBody").html(contentDiv);

}

error: function () {

alert(resourcesError);

}

});

}

//From this site https:// stackoverflow.com/questions/39006574/check-if-url-param-exist-using-jquery

//for define faram var contentId = $.urlParam('contentId');

$.urlParam = function (name) {

var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);//Array Form

return results!=null && results.length>1 ? results[1] : 0;//Get Index 2 using > 1

}

function itemApprove(itemId, status) {

$(`#item_${itemId}`).val(status);

$(`#btn-app-${itemId}`).prop('disabled', status == 1);

$(`#btn-rjc-${itemId}`).prop('disabled', status == 2);

$(`#btn-app-${itemId}`).html(status == 1 ? "Approved" : "Approve");

$(`#btn-rjc-${itemId}`).html(status == 2 ? "Rejected" : "Reject");

}

function openModal(url) {

$("#lrg_img").attr("src", url);

document.getElementById("myModal").style.display = "block";

}

function closeModal() {

document.getElementById("myModal").style.display = "none";

}

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

showSlides(slideIndex += n);

}

function currentSlide(n) {

showSlides(slideIndex = n);

}

function showSlides(n) {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("demo");

var captionText = document.getElementById("caption");

if (n > slides.length) { slideIndex = 1 }

if (n < 1) { slideIndex = slides.length }

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slides[slideIndex - 1].style.display = "block";

@*dots[slideIndex - 1].className += " active";*@

@*captionText.innerHTML = dots[slideIndex - 1].alt;*@

}

function ContentCategory(CloseButtonAddThemes)

{

$.ajax({

url: '/Content/ContentCategory',

success: function (response)

{

if (response.Success) {

var getData = response.data;

var content = "";

var content1 = "";

for (var i = 0; i < getData.length;i++)

{

var data = getData[i];

$("#themesGroup").empty();

var html = ` <div class="themesGroup-list"><input type="radio" name="themes" id="themes_${data.Id}" value="${data.Id}" data-nameThemes="${data.Name}" ><label for="themes_${data.Id}"> ${data.Name}</label></div>`;

content += html;

}

$("#themesGroup").append(content);

if (CloseButtonAddThemes == null)

{

var html1 = `<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary" onclick="saveThemes()" data-dismiss="modal">Save changes</button>`;

content1 += html1;

$("#saveThemes").append(content1);

}

CloseButtonAddThemes = null

}

});

}

function addThemes()

{

var addData = {

Name: $('#txtThemes').val(),

Platforms: []

}

$.ajax({

async: true,

type: 'POST',

url: "/Content/AddContentCategory",

dataType: 'JSON',

contentType: 'application/json;charset=utf-8',

data: JSON.stringify(addData),

success: function (response) {

if (response.Success) {

ContentCategory(1)

$('#txtThemes').val('');

} else {

alert("Failed")

}

error: function () {

alert(resourcesError);

}

});

}

function saveThemes()

{

//get value id radio button checked

var checkedThemes = $('input[name="themes"]:checked');

var id = checkedThemes.val();

//get name id radio button

var name = checkedThemes.attr("data-nameThemes");

var content = "";

@*if (name == null) name = "";*@

content += `<input type="text" id="txtFunctionThemes" data-idSaveThemes="${id}" class="form-control" placeholder="Themes" value="${name}" />`;

content += `<input type="text" id="txtFunctionThemesId" value="${id}" class="form-control" hidden/>`;

$(".themes").html(content);

}

function ContentClassification(CloseButtonClasification)

{

$.ajax({

url: '/Content/ContentClassification',

success: function (response) {

if (response.Success) {

var getData = response.data;

var content = "";

var content1 = "";

for (var i = 0; i < getData.length; i++) {

var data = getData[i];

var html = `<div class="themesGroup-list"><input type="radio" name="clasification" id="Clasification_${data.Id}" value="${data.Id}" data-nameClasification="${data.Name}" ><label for="Clasification_${data.Id}"> ${data.Name}</label></div>`;

content += html;

}

$("#clasificationGroup").html(content);

if (CloseButtonClasification == null) {

var html1 = `<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary" onclick="saveClasification()" data-dismiss="modal">Save changes</button>`;

content1 += html1;

$("#saveClasification").html(content1);

}

CloseButtonClasification = null

}

});

}

function addClasification()

{

var addData = {

Name : $("#txtClasification").val()

}

$.ajax({

async: true,

type: 'POST',

url: '/Content/AddContentClassification',

data: JSON.stringify(addData),

dataType: 'JSON',

contentType: 'application/json;charset=utf-8',

success: function (response) {

if (response.Success) {

ContentClassification(1);

$("#txtClasification").val("")

}

error: function () {

alert(resourcesError)

}

});

}

function saveClasification()

{

//Get Value Id

var checkedClasification = $('input[name="clasification"]:checked');

var id = checkedClasification.val();

//Get Name Id Radio Button

var name = checkedClasification.attr("data-nameClasification");

var content = "";

@*if (name == null) name = "";*@

content += `<input type="text" class="form-control" data-ClasificationId="${id}" id="txtFunctionClasification" placeholder="Classification" value="${name}" />`;

content += `<input type="text" id="txtFunctionClasificationId" value="${id}" hidden />`;

$(".classification").html(content);

}

function ContentAgeRating(CloseButtonAgeRating)

{

$.ajax({

url: '/Content/ContentAgeRating',

success: function (respon) {

if (respon.Success) {

var getData = respon.data;

var content = "";

var content1 = "";

for (var i = 0; i < getData.length; i++) {

var data = getData[i];

var html = `<div class="themesGroup-list"><input type="radio" name="ageRating" id="ageRating_${data.Id}" value="${data.Id}" data-nameAgeRating="${data.Name}" ><label for="ageRating_${data.Id}"> ${data.Name}</label></div>`;

content += html;

}

$("#ageRatingGroup").html(content);

if (CloseButtonAgeRating == null) {

var html1 = `<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary" onclick="saveAgeRating()" data-dismiss="modal">Save changes</button>`;

content1 += html1;

$("#saveAgeRating").html(content1);

}

CloseButtonAgeRating = null

}

error: function () {alert(resourcesError) }

});

}

function addAgeRating() {

var addData = {

Name : $("#txtAgeRating").val()

};

$.ajax({

async : true,

type: 'POST',

url : '/Content/AddContentAgeRating',

data: JSON.stringify(addData),

dataType: 'JSON',

contentType: 'application/json;charset=utf-8',

success: function (respon) {

if (respon.Success) {

ContentAgeRating(1);

$("#txtAgeRating").val('')

}

error: function () { alert(resourcesError)}

});

}

function saveAgeRating()

{

var checkedAgeRating = $('input[name="ageRating"]:checked');

var id = checkedAgeRating.val();

var name = checkedAgeRating.attr("data-nameAgeRating");

var content = "";

@*if (name == null) name = nRating;*@

content += `<input type="text" class="form-control" data-ageRating="${id}" id="txtFunctionAgeRating" value="${name}" placeholder="Age Rating"/>`;

content += `<input type="text" class="form-control" id="txtFunctionAgeRatingId" value="${id}" hidden/>`;

$(".ageRating").html(content);

}

function cekSavePage() {

$(".txtEmptyThemes").empty();

$(".txtEmptyClassification").empty();

$(".txtEmptyAgeRating").empty();

var themes = $("#txtFunctionThemes").val();

var classification = $("#txtFunctionClasification").val();

var contentTh = "";

var contentCs = "";

var contentAg = "";

var check = 1;

var ageRating = $("#txtFunctionAgeRating").val();

if (themes == "") {

contentTh += `<small class="ml-1" style="color:red">Please Fill In The Themes Data</small>`;

$(".txtEmptyThemes").html(contentTh);

check = 0;

}

if (classification == "") {

contentCs += `<small class="ml-1" style="color:red">Please Fill In The Classification Data</small>`;

$(".txtEmptyClassification").html(contentCs);

check = 0;

}

if (ageRating =="") {

contentAg += `<small class="ml-1" style="color:red">Please Fill in The Age Rating Data</small>`;

$(".txtEmptyAgeRating").html(contentAg);

check = 0;

}

if (check == 1) {

savePage();

} else {

alertSavePage()

}

function alertSavePage() {

swal("Failed","Data cannot be empty, please check the error field(s) ","error");

}

function savePage() {

var idContent = $("#txtIdContent").val();

var getThemesId = $("#txtFunctionThemesId").val();//("#txtFunctionThemes").attr("data-idSaveThemes");

var getClasificationId = $("#txtFunctionClasificationId").val();

var getAgeRating = $("#txtFunctionAgeRatingId").val();

var itemsEl = $("[id^='item_']");

var items = [];

var tags = $("#txtTags").val();

var tagsArray = tags.split(',');

for (var i = 0; i < itemsEl.length;i++)

{

var item = itemsEl[i];

var id = $(item).attr("data-idItem");

var status = $(item).val();

if (status == "") {

alert('Choice Approve Or Reject Button Before Your Save This Data');

return false;

}

items.push({

id: id,

status: status

})

}

var isCpValue = "";

var checkedIsCP = $('input[id="txtIsCP"]:checked');

var idCheckedIsCP = checkedIsCP.val();

if (idCheckedIsCP == "true") {

isCpValue = "true"

} else {

isCpValue = "false"

}

var result = {

Id: idContent,

UserId: $("#txtUserId").val(),

Username: $("#txtUsername").val(),

Title: $("#txtTitle").val(),

CategoryId: getThemesId,

ClassificationId: getClasificationId,

AgeRatingId: getAgeRating,

IsCP: isCpValue,

Tags: tagsArray,

ContentItems: items

//LastCreatedDate: null,

//LastCreatedBy: null

}

console.log(result);

$.ajax({

async: true,

type: 'POST',

url: '/Content/UpdateContentDetail',

data: JSON.stringify(result),

dataType: 'JSON',

contentType: 'application/json;charset=utf-8',

success: function (respon) {

if (respon.Success) {

Success();

GetContentDetail();

}

error: function (response) { alert(resourcesError)}

});

}

function cancelPage()

{

$(".txtEmptyThemes").empty();

$(".txtEmptyClassification").empty();

$(".txtEmptyAgeRating").empty();

GetContentDetail()

swal("success",resourcesCancel,"success");

}

function Success() {

swal("Success", resourcesSuccess, "success");

}

function backPage() {

window.location = "/Home/Content";

}

function showHidden() {

var convertSH = 1;

var content = "";

arguments[0] == 0 ? convertSH = 0 : convertSH = 1;

if (convertSH == 1) {

content += `<button class="btn btn-primary mt-3" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onclick="showHidden(0)">

Show Detail

</button>`;

$("#txtShowHidden").html(content);

} else {

content += `<button class="btn btn-primary mt-3" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onclick="showHidden(1)">

Hidden Detail

</button>`;

$("#txtShowHidden").html(content);

}

/*function for key */

var input = document.getElementById("txtThemes");

input.addEventListener("keyup", function (event) {

if (event.keyCode === 13) {

event.preventDefault();

document.getElementById("txtThemesBtn").click();

}

});

var input = document.getElementById("txtClasification");

input.addEventListener("keyup", function (event) {

if (event.keyCode === 13) {

event.preventDefault();

document.getElementById("txtClasificationBtn").click();

}

});

var input = document.getElementById("txtAgeRating");

input.addEventListener("keyup", function (event) {

if (event.keyCode === 13) {

event.preventDefault();

document.getElementById("txtAgeRatingBtn").click();

}

});

function convertToMB(kb) {

@*var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];

if (bytes == 0) return '0 Byte';

var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));

return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];*@

return Math.round(kb / 1024) + ' MB';

}

</script>

}

Stm Page Detail 2

Tidak ada komentar

About me

Facebook

Most Popular

Advertising

Cari Blog Ini

Arsip Blog

About us

Laporkan Penyalahgunaan

Mengenai Saya

Facebook

Popular

Blog Archive