Notes

@{
ViewBag.Title = "Admin : News";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@*<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">*@
@*<script src="https://cdn.jsdelivr.net/npm/[email protected]/croppie.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/croppie.css">*@
@*<script src="https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js"></script>*@

<style>



/*.modal.fade .modal-dialog {
transition: transform 0.1s ease !important;
margin-top: 0px !important;*/
/* transform: scale(0.2);*/
/*}

input[type=text], input[type=textarea] {
font-size: 10px;
}

.modal-header {
padding: 0.5rem 1rem;
}*/
.mdi {
font-size: 14px;
}

.beigeDiv {
border: 1px solid #ced4da;
border-radius: 2px;
background: #f5f5e6;
}



a {
cursor: pointer;
color: black;
transition: font-size 2s ease;
}

a:hover {
cursor: pointer;
color: #3e8177; /* color: #0a62fb;*/
text-decoration: none;
font-size: 14px;
font-size-adjust: 0.88;
/* line-height: 15pt;*/
}

.dataTables_paginate a {
/* border: 1px solid #dc3545;*/
padding: 4px;
margin: 2px;
}


.body {
background-color: white;
}


.btn-round {
border-radius: 6px;
}

#fileName {
position: relative;
overflow: hidden;
/*display: inline-block;*/
}

.filebtn {
/*border: 2px solid gray;*/
color: black;
background-color: white;
padding: 5px 14px;
border-radius: 8px;
font-size: 15px;
font-weight: bold;
}

.error {
color: red;
}

#AddNewsModal {
padding-left: 44px;
padding-right: 44px;
margin-top: 9px !important;
}

.btn-simple {
background-color: #efefef;
}

.imageHandeling {
height: 150px;
}

table.scroll {
/* width: 100%; */ /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
/*border: 2px solid black;*/
}

.table-responsive input {
/*border: none;*/
border-radius: 4px;
}

#tblAllNews th {
border: none;
/*border-bottom: none;*/
padding: 2px 11px;
}

table.scroll tbody,
table.scroll thead {
display: block;
}

thead tr th {
height: 30px;
line-height: 30px;
BORDER: NONE;
/* text-align: left; */
}

.btn-sm {
font-size: 0.6rem;
}

.btn-in-table {
border-radius: 2px;
border: 1px solid;
box-shadow: inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17)
}

table.scroll tbody {
height: 350px;
overflow-y: auto;
overflow-x: hidden;
}

.content-admin .card {
padding: 8px;
border: none;
}

.content-admin {
font-size: 9px;
}

.content-admin a {
font-size: 9px;
font-weight: 500;
}

small, .small {
font-size: 43%;
font-weight: 400;
}

.dataTables_filter {
text-align: right;
}

[type="search"] {
/* outline-offset: -2px;*/
-webkit-appearance: searchfield;
margin-left: 6px;
font-size: 0.7rem;
}

.desc-in-adminTb {
font-size: 0.6rem;
margin-bottom: 0.5rem;
line-height: 1.4;
}

.headline-in-adminTb {
font-size: 0.7rem;
margin-bottom: 0.5rem;
line-height: 1.5;
}
/*tbody {
border-top: 2px solid black;
}*/
tbody td, thead th {
/* width: 20%; */ /* Optional */
/*border-right: 1px solid black;*/
/* white-space: nowrap; */
}

tbody td:last-child, thead th:last-child {
border-right: none;
}
</style>
@*<link href="~/style/assets/css/main-7712231.css" rel="stylesheet" />*@
@*<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>*@
@*<script src="~/Areas/Admin/scripts/AddNews.js"></script>*@
<div class="container px-1">
<section class="content-admin">
<div class="block-header">
<div class="row pt-1">
<div class="col-lg-7 col-md-6 col-sm-12">
<ul class="breadcrumb float-md-left">
<li class="breadcrumb-item">
Welcome to Admin Panel
@*<small class="text-muted">Welcome to Admin Panel</small>*@
</li>
</ul>
</div>
<div class="col-lg-5 col-md-6 col-sm-12">
<ul class="breadcrumb float-md-right">
<li class="breadcrumb-item"><a href="/Admin/Admin"><i class="zmdi zmdi-home"></i> Admin</a></li>
<li class="breadcrumb-item">@*<a href="javascript:void(0);">*@News@*</a>*@</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="header py-1">
<div class="row">
<button type="button" data-clipboard-text="Just " id="fetchTrendingNews" title="Fetch News" onclick="AddNews.TryNewsApiFetch(7, 0)" style="border: 0px" class="btn-sm text-white btn-defaultP4 mx-1 btn-round px-4 m-2 py-2
float-left">
Fetch Trending News
</button>
<button type="button" data-clipboard-text="Just " id="fetchPunjabNews" title="Fetch News" onclick="AddNews.TryNewsApiFetch(1, 0)" style="border: 0px" class="btn-sm text-white btn-defaultP5 mx-1 btn-round px-4 m-2 py-2 float-left">
Fetch Punjab News
</button>
<button type="button" data-clipboard-text="Just " id="fetchIndiaNews" title="Fetch News" onclick="AddNews.TryNewsApiFetch(3, 0)" style="border: 0px" class="btn-sm text-white btn-defaultP6 mx-1 btn-round px-4 m-2 py-2 float-left">
Fetch India's News
</button>
<button type="button" id="fetchWorldNews" title="Fetch News" onclick="AddNews.TryNewsApiFetch(2, 0)" style="border: 0px" class="btn-sm text-white btn-defaultP mx-1 btn-round px-4 m-2 py-2 float-left">
Fetch World's News
</button>
<button type="button" disabled id="fetchNews" title="Fetch News" style="border: 0px" class="btn-sm text-white btn-defaultP1 disabled mx-1 btn-round px-4 m-2 py-2 float-left">
coming soon
</button>
<button type="button" disabled id="fetchNews" title="Fetch News" style="border: 0px" class="btn-sm text-white btn-defaultP3 disabled mx-1 btn-round px-4 m-2 py-2 float-left">
coming soon
</button>
</div>

<h2>
<button type="button" data-clipboard-text="Just " id="btnAddNews" title="Fetch News" onclick='AddNews.OpenAddNews(0)' style="border: 0px" class="btn-sm text-white btn-defaultG btn-round px-4 @*m-2*@ py-2
float-right">
Add News
</button>
</h2>
</div>

@*<button type="button" id="btAddNotes" title="Add Note" class="btn btn-primary btn-round">Add News</button>*@
<div class="body py-2 tbl-body">
<div class="table">
<table id="tblAllNews" class="table table-bordered table-striped table-hover js-basic-example dataTable">
<thead>
<tr>
<th id="NewsTH">Id</th>
<th>HeadLine</th>
<th>Description</th>
<th>Region</th>
<th>Rating</th>
<th>Image</th>
<th>Published</th>
<th>Creator</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>

<div id="uploadimageModal" class="modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Upload & Crop Image</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<br />
<br />
<br />
<button class="btn btn-success crop_image">Crop & Upload Image</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!-- News Modal Size -->
<div class="modal fade" id="AddNewsModal" data-backdrop="static" tabindex="-1" role="dialog" style="margin-top: 60px; ">
<div class="modal-dialog modal-lg" role="document" style=" max-width:1000px">
<div class="modal-content">
<div class="modal-header">
<h4 class="title">Add/Edit News</h4>
<button type="button" style="z-index:1" onclick="AddNews.ResetForm();" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<form id="frmNews" @*enctype="multipart/form-data"*@>
<div class="row clearfix">
<div class="col-sm-12">
<div class="row clearfix">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<label class="cot-bolt">Headline</label>
<div class="form-group">
<textarea autocomplete="off" class="form-control" cols="10" id="NewshortDesc" maxlength="150" name="NewshortDesc" placeholder="Headline" rows="3" type="text" style="overflow:auto;"></textarea>
</div>
</div>
<div class="col-sm-6">
<label class="cot-bolt">
Headline/ਹੈੱਡਲਾਈਨ
</label>
<div class="form-group">
<textarea autocomplete="off" class="form-control" cols="10" id="NewshortDescP" maxlength="150" name="NewshortDesc" placeholder="ਹੈੱਡਲਾਈਨ" rows="3" type="text" style="overflow:auto;"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-10 beigeDiv mb-1 mx-3 py-1">
<label class="cot-bolt">Priority : <span id="ex6CurrentSliderValLabel"> <span id="ex6SliderVal"></span></span></label>
<div class="form-group">
<span>Low&nbsp;&nbsp;&nbsp; </span>
<input id="NewsPrioirity" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="5" data-slider-step="1" data-slider-tooltip="hide" data-slider-value="5" />
<span>&nbsp;&nbsp; High</span>
</div>
</div>

<div class="col-md-10 beigeDiv mt-1 mx-3 py-1">
<label class="cot-bolt">Region </label> <br />
<label class="radio-inline"><input type="radio" class="m-2 ml-3" value="1" name="Region" checked>Punjab</label>
<label class="radio-inline"><input type="radio" class="m-2 ml-3" value="2" name="Region">World</label>
<label class="radio-inline"><input type="radio" class="m-2 ml-3" value="3" name="Region">India</label>
<label class="radio-inline"><input type="radio" class="m-2 ml-3" value="4" name="Region">America</label>
<label class="radio-inline"><input type="radio" class="m-2 ml-3" value="5" name="Region">Images</label>
<label class="radio-inline"><input type="radio" class="m-2 ml-3" value="6" name="Region">Videos</label>
</div>
</div>
</div>

<div class="col-md-4 m-3">
<div class="imageHandeling">
<div class="body p-0 imageHandelingDiv">
<img src="/assets/images/default_Img_4.png" id="imgUploaded" hieght="150" width="200" alt="image" />
</div>
</div>
</div>

</div>
<div class="row">

<div class="col-sm-6 mb-3">

<div class="form-group d-none">
<input type="file" name="txtUploadFile" id="txtUploadFile">
<i class="zmdi zmdi-upload"></i>
</div>
<a title='edit Image' href='javascript:void(0)' data-file-path="" onclick="AddNews.DownloadTempDoc(this);" class="fileinput-button filebtn py-2" tooltip="Edit Image" id="btnEditImage">
<i class="fa fa-picture-o pr-2"></i>
<span id="fileName"></span>
</a>
<a title='Delete Image' href='javascript:void(0)' data-file-path="" onclick="AddNews.DeleteNews(this);" class="fileinput-button filebtn py-2" tooltip="Delete Image" id="btnDeleteImage">
<i class="mdi mdi-delete" aria-hidden="true"></i>
</a>

<span class="filebtn" type="button" id="btnUpload">
<a title='Upload Image' href='javascript:void(0)' class="uploadIcn">
<i class="zmdi zmdi-upload py-1 pr-2" style="font-size: 15px;"></i>
<i class="mdi mdi-upload pr-2"></i>
Upload
</a>
<a title='Update' href='javascript:void(0)'>
<i class="zmdi zmdi-border-color editIcn" style="font-size: 15px;"></i>
</a>
</span>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="cot-bolt">Description </label>
<div class="form-group">
<textarea autocomplete="off" class="form-control" cols="20" id="NewsDesc" @*maxlength="200"*@ name="NewsDesc" placeholder="News" rows="10" type="text" style="overflow:auto;"></textarea>
</div>
</div>

<div class="col-sm-6">
<label class="cot-bolt">
Description/ਵੇਰਵਾ
</label>
<div class="form-group">
<textarea autocomplete="off" class="form-control" cols="20" id="NewsDescP" @*maxlength="200"*@ name="NewsDesc" placeholder="ਵੇਰਵਾ" rows="10" type="text" style="overflow:auto;"></textarea>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</form>
</div>
<div class="modal-footer w-100" style="display:inline-block;text-align:right">
<button type="button" id="btnSaveNews" class="btn btn-danger btn-round">Save News</button>
<button type="button" id="btnClearNews" class="btn btn-default btn-round btn-simple">Cancel</button>
</div>
</div>
</div>
</div>
<!--End -->

<div class="modal fade" id="SearchNewsModal" data-backdrop="static" tabindex="-1" role="dialog" style="margin-top: 60px; ">
<div class="modal-dialog modal-lg" role="document" style=" max-width:1000px">
<div class="modal-content">
<div class="modal-header">
<h4 class="title">Search with keywords</h4>
<button type="button" style="z-index:1" onclick="AddNews.ResetForm();" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<div class="row clearfix">
<div class="col-sm-12">
<label class="cot-bolt">Keyword</label>

<form id="frmSearchNews">
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<input type="text" id="SearchKeyWord" name="SearchKeyWord" maxlength="150" class="form-control" placeholder="Multiple words can be Separated by space">
</div>
</div>
<div class="col-sm-6">
<button type="button" id="btnSearch" class="btn btn-pink btn-round">Search</button>
</div>
</div>
</form>

<div class="col-sm-12">
<div class="body py-2 tbl-body">
<div class="table">
<table id="tblSearchedNews" class="table table-bordered table-striped table-hover js-basic-example dataTable">
<thead>
<tr>
<th id="NewsTH">Select</th>
<th>Id</th>
<th>HeadLine</th>
<th>Description</th>
<th>Published</th>
<th>Creator</th>
<th>Image</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>

</div>
</div>
</div>
</div>
<div class="modal-footer w-100" style="display:inline-block;text-align:right">
<button type="button" id="btnSaveNews" class="btn btn-danger btn-round">Save</button>
<button type="button" id="btnClearNews" class="btn btn-default btn-round btn-simple">Cancel</button>
</div>
</div>
</div>
</div>
@*<script>
$(document).ready(function () {*@

@*//$image_crop = $('#image_demo').croppie({
// enableExif: true,
// viewport: {
// width: 350,
// height: 350,
// type: 'square' //circle
// },
// boundary: {
// width: 400,
// height: 400
// },
// enforceBoundary: false,

//});

//$('#upload_image').on('change', function () {
// var reader = new FileReader();
// reader.onload = function (event) {
// $image_crop.croppie('bind', {
// url: event.target.result
// }).then(function () {
// console.log('jQuery bind complete');
// });
// }
// reader.readAsDataURL(this.files[0]);
// $('#uploadimageModal').modal('show');
//});

//$('.crop_image').click(function (event) {
// $image_crop.croppie('result', {
// type: 'canvas',
// size: 'viewport'
// }).then(function (img) {
// debugger
// var block = img.split(";");
// var contentType = block[0].split(":")[1];// In this case "image/gif"
// // get the real base64 content of the file
// var realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...."

// // Convert it to a blob to upload
// var blob = b64toBlob(realData, contentType);

// var data = new FormData();
// //for (var x = 0; x < files.length; x++) {
// data.append("image", blob);
// $.ajax({
// //url: "upload.php",
// url: "/Admin/SaveNewsUploadedFile?CanReplaceFile=" + false + "&ImageName=" + $('#NewshortDesc').val().trim() + ".jpg",
// type: "POST",
// processData: false,
// contentType: false,
// data: data,
// success: function (data1) {
// $('#uploadimageModal').modal('hide');
// $('#uploaded_image').html(data1);
// }
// });
// })
//});

//// End upload preview image
//function b64toBlob(b64Data, contentType, sliceSize) {
// contentType = contentType || '';
// sliceSize = sliceSize || 512;

// var byteCharacters = atob(b64Data);
// var byteArrays = [];

// for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
// var slice = byteCharacters.slice(offset, offset + sliceSize);

// var byteNumbers = new Array(slice.length);
// for (var i = 0; i < slice.length; i++) {
// byteNumbers[i] = slice.charCodeAt(i);
// }

// var byteArray = new Uint8Array(byteNumbers);

// byteArrays.push(byteArray);
// }

// var blob = new Blob(byteArrays, { type: contentType });
// return blob;
//}*@

@*});
</script>*@
<script src="~/assets/js/Admin/AddNews.js"></script>