Backend Vlog Functionality
#main.py import config from flask import Flask from controllers.index import Index from controllers.login import Login from controllers.dashboard.dashboard import Dashboard app = Flask(__name__) app.secret_key = config.vdict['secret_key'] Index.register(app, route_base='/') Login.register(app, route_base='/login') Dashboard.register(app, route_base='/dashboard') if __name__ == '__main__': app.run(debug=True)
//static/scripts/dashboard.js
class Lib{
load_items(url){
$('#load-more img').attr('src', '/static/images/loading.gif');
$.get(url, function(data, status){
if(status == "success"){
listing_items(data);
}else{
alert('Fail to connect to server.');
}
});
}
getVideoForm(event){
event.preventDefault();
var json = {};
var vidType = $("input:radio[name=vid-type]:checked").val();
var videoId = $("input:text[name=video-id]").val();
if($('#playlist').is(":checked")){
var playlist = $("input:text[name=vid-title]").val();
}
json.vidType = vidType;
json.videoId = videoId;
json.playlist = playlist;
const viewFragment = myEditor.data.processor.toView( ''+JSON.stringify(json)+'' );
const modelFragment = myEditor.data.toModel( viewFragment );
myEditor.model.insertContent( modelFragment, myEditor.model.document.selection );
}
enable(){
if($('#playlist').is(":checked")){
$("input:text[name=vid-title]").attr('disabled', false);
}else{
$("input:text[name=vid-title]").attr('disabled', true);
}
}
}//End class
const lib = new Lib();
<!--templates/dashboard/dashboard.html-->
<!DOCTYPE html>
<html>
<head>
{% block head %}
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="This blog engine is built for e-learning">
<meta name="robots" content="index, follow">
<meta name='keywords' content='e-learning, learning, school, math, programming'>
<title>{{data['blog_title']}}</title>
<script src="/static/scripts/jQuery.js"></script>
<script src="/static/scripts/ckeditor/ckeditor.js"></script>
<script src='/static/scripts/base.js'></script>
<script src='/static/scripts/dashboard.js'></script>
<link href="/static/styles/base.css" rel="stylesheet" >
<link href="/static/styles/dashboard.css" rel="stylesheet">
<link href="/static/fonts/setup.css" rel='stylesheet'>
<link href="/static/images/site_logo.png" rel="shortcut icon">
{% endblock %}
</head>
<body>
<div id="header">
{% block header %}
<header id="inner" class="inner region">
<div id="title">
<a href="/"><img src="/static/images/site_logo.png" /></a>
<a >{{data['blog_title']}}</a>
</div>
<div id="blog-search">
<form class="search" action="/search/backend/" method="post">
<input type="text" placeholder="Search.." name="fquery" required>
<button type="submit">ស្វែងរក</button>
</form>
</div>
<div id="logout"><a href="/login/logout/">ចេញក្រៅ</a></div>
</header>
{% endblock %}
</div>
<div id="main" class="main region">
{% block main %}
<div id="sidebar">
{% block sidebar %}
<div><a href="/dashboard/"><img src="/static/images/posting.png" /></a><a href="/dashboard/">ចុះផ្សាយមេរៀន</a></div>
<div><a href="/category/"><img src="/static/images/categorizing.png" /></a><a href="/dashboard/category/">បង្កើតប្រភេទមេរៀន</a></div>
<div><a href="/paging"><img src="/static/images/paging.png" /></a><a href="/paging">បង្កើតទំព័រមាតិកា</a></div>
<div><a href="/uploading"><img src="/static/images/multimedia.png" /></a><a href="/uploading">ចំលងឯកសារ</a></div>
<div><a href="/addinguser"><img src="/static/images/user.png" /></a><a href="/addinguser">បន្ថែមសមាជិក</a></div>
<div><a href="/setting"><img src="/static/images/setting.png" /></a><a href="/setting">កំណត់ទំរង់លក្ខណៈ</a></div>
{% endblock %}
</div>
<div id="content">
{% block content %}
<form id='post' action='/dashboard/' method="POST" >
{% if 'post' in data %}
<input id='post-title' value="{{ data['post'][1] }}" name="fpost-title" type="text" placeholder="ប្រភេទមេរៀន" required />
<textarea name="fcontent" id="editor" >{{ data['post'][3] }}</textarea>
{% else: %}
<input id='post-title' value="" name="fpost-title" type="text" placeholder="ប្រភេទមេរៀន" required />
<textarea name="fcontent" id="editor" ></textarea>
{% endif %}
<div id="bottombar">
<input id="submit" class="bottom-widget" type="submit" value="ចុះផ្សាយ">
<select id='category' name="fcategory">
{% if 'categories' in data %}
{% for category in data['categories'] %}
<option>{{ category[1] }}</option>
{% endfor %}
{% endif %}
</select>
<input id="post-date" value="{{ data['datetime'][0] }}" class="post-time" type="text" name="fpost-date" required />
<input id="post-time" value="{{ data['datetime'][1] }}" class="post-time" type="text" name="fpost-time" required />
<input disabled type='text' value="{{ session['logged-in'] }}" id="post-author" class="post-time" name="fpost-author" required />
</div>
</form>
<div id="message">{{ data['message'] }}</div>
<script src="/static/scripts/ckeditor/config.js"></script>
<form id="video" onsubmit="return lib.getVideoForm(event);">
<section class="left-part">
<input type="radio" name="vid-type" value="youtube" checked> <span>YouTube</span>
<input type="radio" name="vid-type" value="fbvid"> <span>Facebook</span>
<input type="radio" name="vid-type" value="googledrive"> <span>Goolge Drive</span>
<input type="radio" name="vid-type" value="dailymotion"> <span>Dailymotion</span>
<input type="radio" name="vid-type" value="vimeo"> <span>Vimeo</span>
<input type="radio" name="vid-type" value="okvid"> <span>OK</span>
</section>
<section class="right-part">
<span>Video ID: </span><input type="text" name="video-id" required>
<span>Playlist: <input type="checkbox" id="playlist" name="fplaylist" onclick="lib.enable()"></span>
<input disabled type="text" name="vid-title" >
<span></span><input type="submit" value="បន្ថែមវីដេអូ" />
</section>
</form>
{% endblock %}
</div>
{% endblock %}
</div>
{% block item_listing %}
<ul id="item-listing" class="item-listing region">
{% for v in range(data['posts']|length) %}
<li class="post">
<a class="thumbnail" href="/post/{{ data['posts'][v][0] }}"><img src="{{data['thumbs'][v]}}" /></a>
<div class='title'>
<a href="/post/{{ data['posts'][v][0] }}">{{ data['posts'][v][1] }}</a>
<a href="/category/{{ data['posts'][v][2] }}" class="category">{{ data['posts'][v][2] }}</a>
<span>{{ data['posts'][v][4].strftime('%d/%m/%Y') }}</span>
</div>
<div class="crud">
<a class="user">{{ data['posts'][v][6] }}</a>
<a href='/dashboard/post/delete/{{ data["posts"][v][0] }}'><img src="/static/images/delete.png" /></a>
<a href='/dashboard/post/edit/{{ data["posts"][v][0] }}'><img src="/static/images/edit.png" /></a>
</div>
</li>
{% endfor %}
</ul>
<div id="load-more" class="load-more region">
<img onclick="lib.load_items('/dashboard/post/load/')" src="/static/images/load-more.png" />
<script>
function listing_items(data){
var html = '';
for(var v=0; v<data['categories'].length; v++){
html += '<li class="category">';
html += `<a class="thumbnail" href="/category/${ data['categories'][v][1] }"><img src="${data['thumbs'][v]}" /></a>`;
html += `<div class='title'>`;
html += `<a href="/category/${ data['categories'][v][1] }">${ data['categories'][v][1] }</a>`;
html += `<span>${ data['categories'][v][3] }</span>`;
html += `</div>`;
html += `<div class="crud">`;
html += `<a class="user">${ data['categories'][v][5] }</a>`;
html += `<a href='/dashboard/category/delete/${ data["categories"][v][1] }'><img src="/static/images/delete.png" /></a>`;
html += `<a href='/dashboard/category/edit/${ data["categories"][v][1] }'><img src="/static/images/edit.png" /></a>`;
html += `</div>`;
html += `</li>`;
}
$('#item-listing').append(html);
$('#load-more img').attr('src', '/static/images/load-more.png')
}
</script>
</div>
<script>
$(document).ready(function(){
var width = $('.post .thumbnail').css('width');
var height = parseInt(width)*9/16;
$('.post .thumbail').css('height', height);
});
</script>
{% endblock %}
<div id="footer" class="footer region">
{% block footer %}
© Copyright 2020 by <a href="https://www.khmerweb.app/">Khmer Web</a>.
<script>var base = new Base();</script>
{% endblock %}
</div>
</body>
</html>
GitHub: "https://github.com/Sokhavuth/E-Learning
Heroku: https://khmerweb-elearning.herokuapp.com/
Comments
Post a Comment