lesson 改版

app/course/course.php

@@ -9,109 +9,7 @@ include "../pcdl/html_head.php";
     require_once("../pcdl/head_bar.php");
 ?>
 
-<style>
-    #main_video_win iframe{
-        width:100%;
-        height:100%;
-    }
-
-    #course_frame{
-        display:flex;
-    }
-    #course_content{
-
-        margin:0;
-        padding:0;
-    }
-    #lesson_list{
-
-    }
-    #course_info_head_1{
-        display:flex;
-    }
-    #course_info_head_face{
-        width: 200px;
-        height: 200px;
-        padding: 12px;
-    }
-    #course_info_head_face img{
-        width: 100%;
-        border-radius: 12px;
-    }
-    .section_inner{
-        max-width: 960px;
-        margin: 0 auto;
-    }
-    #course_info_head_title{
-        padding: 12px;
-    }
-    #course_title{
-        font-size: 22px;
-    font-weight: 700;
-    }
-
-    #course_subtitle {
-        font-size: 13px;
-        font-weight: 600;
-        padding: 10px 0;
-    }
-    #lesson_list_shell{
-        
-    background-color: var(--drop-bg-color);
-
-    }
-    .course_info_block{
-        border-top: 1px solid var(--box-bg-color2);
-        padding: 10px 5px;
-    }
-    .course_info_block:first{
-        border-top: none;
-    }
-    .course_info_block h2{
-        font-size: 16px;
-    }
-    #lesson_list {
-        display: flex;
-        flex-wrap: wrap;
-    }
-    #lesson_list .lesson_card{
-        width:50%;
-        padding: 15px;
-    }
-    .datatime {
-    
-    display: inline;
-    
-    padding: 1px 4px;
-    }
-    .not_started{
-        background-color: orangered;
-        color: var(--bg-color);
-    }
-    .in_progress,.already_over{
-        color: var(--btn-hover-bg-color);
-    }
-    .lesson_card .title {
-        padding: 5px;
-        font-size: 17px;
-        font-weight: 600;
-    }
-    #course_info_head_2{
-        padding:10px;
-    }
-</style>
-    
-
-<?php
-//
-
-require_once "../path.php";
-require_once "../public/_pdo.php";
-require_once '../ucenter/function.php';
-require_once '../public/function.php';
-
-?>
-
+<link type="text/css" rel="stylesheet" href="./style.css" />
 
 <div id='course_content' >
     <div id='course_info_shell'><div id='course_info' class="section_inner"></div></div>

app/course/course_get.php

@@ -5,11 +5,10 @@ require_once "../path.php";
 require_once "../public/_pdo.php";
 require_once "../ucenter/function.php";
 
-global $PDO;
+$userinfo = new UserInfo();
 PDO_Connect("sqlite:"._FILE_DB_COURSE_);
 $query = "select * from course where id = '{$_GET["id"]}'   limit 0,1";
 $fCourse = PDO_FetchRow($query);
-$userinfo = new UserInfo();
 
 if ($fCourse) {
     # code...

app/course/lesson.js

@@ -1,101 +1,264 @@
 var renderer = new marked.Renderer();
 renderer.code = function (code, language) {
-  if (language == "mermaid") return '<pre class="mermaid">' + code + "</pre>";
-  else return "<pre><code>" + code + "</code></pre>";
+	if (language == "mermaid") return '<pre class="mermaid">' + code + "</pre>";
+	else return "<pre><code>" + code + "</code></pre>";
 };
 
 function lesson_show(id) {
-  $.get(
-    "../course/lesson_get.php",
-    {
-      id: id,
-    },
-    function (data, status) {
-      let arrLesson = JSON.parse(data);
-      let html = "";
-      for (const lesson of arrLesson) {
-        html +=
-          '<div class="card" style="display:flex;margin:1em;padding:10px;">';
-
-        html += '<div style="flex:7;">';
-        html += '<div class="pd-10">';
-        html +=
-          '<div class="title" style="padding-bottom:5px;font-size:200%;font-weight:600;">' +
-          lesson["title"] +
-          "</div>";
-        html += '<div style="">';
-        let summary = "";
-        try {
-          summary = marked(lesson["summary"], { renderer: renderer });
-        } catch { }
-        html +=
-          '<div class="summary"  style="padding-bottom:5px;">' +
-          summary +
-          "</div>";
-        let live = "";
-        try {
-          live = marked(lesson["live"], { renderer: renderer });
-        } catch { }
-        html +=
-          '<div class="summary"  style="padding-bottom:5px;">' +
-          live +
-          "</div>";
-        let replay = "";
-        try {
-          replay = marked(lesson["replay"], { renderer: renderer });
-        } catch { }
-        html +=
-          '<div class="summary"  style="padding-bottom:5px;">' +
-          replay +
-          "</div>";
-        let attachment = "";
-        try {
-          attachment = marked(lesson["attachment"], { renderer: renderer });
-        } catch { }
-        html +=
-          '<div class="summary"  style="padding-bottom:5px;">' +
-          attachment +
-          "</div>";
-        html += "</div>";
-        html += "</div>";
-        html += "</div>";
-
-        html += '<div style="flex:3;max-width:15em;">';
-        let d = new Date();
-        d.setTime(lesson["date"]);
-        let strData = d.toLocaleDateString();
-        let strTime = d.toLocaleTimeString();
-        html += "<div >" + gLocal.gui.date + "：" + strData + "</div>";
-        html += "<div >" + gLocal.gui.time + "：" + strTime + "</div>";
-        let dt = lesson["duration"] / 60;
-        let sdt = "";
-        if (dt > 59) {
-          sdt += Math.floor(dt / 60) + gLocal.gui.h;
-        }
-        let m = dt % 60;
-        if (m > 0) {
-          sdt += (dt % 60) + gLocal.gui.mins;
-        }
-        html += "<div >" + gLocal.gui.duration + "：" + sdt + "</div>";
-        let now = new Date();
-
-        let lesson_time = "";
-        if (now < lesson["date"]) {
-          lesson_time = gLocal.gui.not_started;
-        } else if (now > lesson["date"] && now < lesson["date"] + dt * 1000) {
-          lesson_time = gLocal.gui.in_progress;
-        } else {
-          lesson_time = gLocal.gui.already_over;
-        }
-        html +=
-          '<div ><span class="lesson_status">' + lesson_time + "</span></div>";
-
-        html += "</div>";
-
-        html += "</div>";
-      }
-      $("#lesson_list").html(html);
-      mermaid.initialize();
-    }
-  );
+	$.get(
+		"../course/lesson_get.php",
+		{
+			id: id,
+		},
+		function (data, status) {
+			let arrLesson = JSON.parse(data);
+			let html = "";
+			for (const lesson of arrLesson) {
+				html += '<div class="card" style="display:flex;margin:1em;padding:10px;">';
+
+				html += '<div style="flex:7;">';
+				html += '<div class="pd-10">';
+				html +=
+					'<div class="title" style="padding-bottom:5px;font-size:200%;font-weight:600;">' +
+					lesson["title"] +
+					"</div>";
+				html += '<div style="">';
+				let summary = "";
+				try {
+					summary = marked(lesson["summary"], { renderer: renderer });
+				} catch {}
+				html += '<div class="summary"  style="padding-bottom:5px;">' + summary + "</div>";
+				let live = "";
+				try {
+					live = marked(lesson["live"], { renderer: renderer });
+				} catch {}
+				html += '<div class="summary"  style="padding-bottom:5px;">' + live + "</div>";
+				let replay = "";
+				try {
+					replay = marked(lesson["replay"], { renderer: renderer });
+				} catch {}
+				html += '<div class="summary"  style="padding-bottom:5px;">' + replay + "</div>";
+				let attachment = "";
+				try {
+					attachment = marked(lesson["attachment"], { renderer: renderer });
+				} catch {}
+				html += '<div class="summary"  style="padding-bottom:5px;">' + attachment + "</div>";
+				html += "</div>";
+				html += "</div>";
+				html += "</div>";
+
+				html += '<div style="flex:3;max-width:15em;">';
+				let d = new Date();
+				d.setTime(lesson["date"]);
+				let strData = d.toLocaleDateString();
+				let strTime = d.toLocaleTimeString();
+				html += "<div >" + gLocal.gui.date + "：" + strData + "</div>";
+				html += "<div >" + gLocal.gui.time + "：" + strTime + "</div>";
+				let dt = lesson["duration"] / 60;
+				let sdt = "";
+				if (dt > 59) {
+					sdt += Math.floor(dt / 60) + gLocal.gui.h;
+				}
+				let m = dt % 60;
+				if (m > 0) {
+					sdt += (dt % 60) + gLocal.gui.mins;
+				}
+				html += "<div >" + gLocal.gui.duration + "：" + sdt + "</div>";
+				let now = new Date();
+
+				let lesson_time = "";
+				if (now < lesson["date"]) {
+					lesson_time = gLocal.gui.not_started;
+				} else if (now > lesson["date"] && now < lesson["date"] + dt * 1000) {
+					lesson_time = gLocal.gui.in_progress;
+				} else {
+					lesson_time = gLocal.gui.already_over;
+				}
+				html += '<div ><span class="lesson_status">' + lesson_time + "</span></div>";
+
+				html += "</div>";
+
+				html += "</div>";
+			}
+			$("#lesson_list").html(html);
+			mermaid.initialize();
+		}
+	);
+}
+
+function lesson_load(lesson_id) {
+	$.get(
+		"../course/lesson_get.php",
+		{
+			id: lesson_id,
+		},
+		function (data, status) {
+			let html = "";
+			let lesson_info = JSON.parse(data);
+			if (lesson_info) {
+				//head
+				html += "<div id='course_info_head' class='course_info_block'>";
+
+				html += "<div id='course_info_head_title'>";
+				html += "<div id='course_title'>" + lesson_info.title + "</div>";
+				html += "<div id='course_subtitle'>" + lesson_info.subtitle + "</div>";
+				html += "</div>";
+				html += "</div>";
+				//end of head
+
+				let d = new Date();
+				d.setTime(lesson_info.date);
+				let strData = d.toLocaleDateString();
+				let strTime = d.toLocaleTimeString();
+				let dt = lesson_info["duration"] / 60;
+				let strDuration = "";
+				if (dt > 59) {
+					strDuration += Math.floor(dt / 60) + "小时";
+				}
+				let m = dt % 60;
+				if (m > 0) {
+					strDuration += (dt % 60) + "分钟";
+				}
+
+				html += "<div id='course_info_head_2' class='course_info_block'>";
+				html += "<div class='info_item'>" + "<span>上课时间：<span>" + strData + " " + strTime + "</div>";
+				html +=
+					"<div class='info_item'>" + "<span>" + gLocal.gui.duration + "：<span>" + strDuration + "</div>";
+				html += "<div class='info_item'>" + "<span>" + gLocal.gui.speaker + "：<span>";
+				html +=
+					"<a href='../uhome/course.php?userid=" +
+					lesson_info.teacher +
+					"'>" +
+					lesson_info.teacher_info.nickname +
+					"</a>";
+				html += "</span>";
+				//html += "<span>地区:缅甸</span>";
+				html += "</div>";
+				html += "</div>";
+				// end of course_info_head_2
+
+				//live
+				if (lesson_info.live && lesson_info.live.length > 0) {
+					html += "<div id='course_info_live' class='course_info_block'>";
+					html += "<h2>" + gLocal.gui.notice_live + "</h2>";
+					try {
+						html += marked(lesson_info.live);
+					} catch (e) {
+						html += e.message;
+					}
+					html += "</div>";
+				}
+				//end of live
+
+				//replay
+				if (lesson_info.replay && lesson_info.replay.length > 0) {
+					html += "<div id='course_info_replay' class='course_info_block'>";
+					html += "<h2>" + gLocal.gui.record_replay + "</h2>";
+					try {
+						html += marked(lesson_info.replay);
+					} catch (e) {
+						html += e.message;
+					}
+					html += "</div>";
+				}
+				//end of replay
+
+				//attachment
+				if (lesson_info.attachment && lesson_info.attachment.length > 0) {
+					html += "<div id='course_info_attachment' class='course_info_block'>";
+					html += "<h2>" + gLocal.gui.attachment + "</h2>";
+					try {
+						html += marked(lesson_info.attachment);
+					} catch (e) {
+						html += e.message;
+					}
+					html += "</div>";
+				}
+				//end of attachment
+
+				//content
+				if (lesson_info.content && lesson_info.content.length > 0) {
+					html += "<div id='course_info_content' class='course_info_block'>";
+					html += "<h2>" + gLocal.gui.detaile + "</h2>";
+					try {
+						html += marked(lesson_info.content);
+					} catch (e) {
+						html += e.message;
+					}
+					html += "</div>";
+				}
+				//end of attachment
+				$("#lesson_info").html(html);
+
+				render_lesson_list(lesson_info.course_id, lesson_info.id);
+			}
+		}
+	);
+}
+
+function render_lesson_list(id, currLesson) {
+	$.get(
+		"../course/lesson_list.php",
+		{
+			id: id,
+		},
+		function (data, status) {
+			let arrLesson = JSON.parse(data);
+			let html = "";
+			for (const lesson of arrLesson) {
+				let currlessonStyle = "";
+				if (lesson.id == currLesson) {
+					currlessonStyle = " curr_lesson";
+				} else {
+					currlessonStyle = " not_curr_lesson";
+				}
+				//计算课程是否已经开始
+				let now = new Date();
+				let class_lesson_time = "";
+				let dt = lesson["duration"] / 60;
+				if (now < lesson["date"]) {
+					class_lesson_time = "not_started";
+				} else if (now > lesson["date"] && now < lesson["date"] + dt * 1000) {
+					class_lesson_time = "in_progress";
+				} else {
+					class_lesson_time = "already_over";
+				}
+
+				html += '<div class="lesson_card ' + currlessonStyle + '" >';
+				let d = new Date();
+				d.setTime(lesson["date"]);
+				let strData = d.toLocaleDateString();
+				let strTime = d.toLocaleTimeString();
+				html += '<div class="pd-10">';
+				html += "<div class='datatime " + class_lesson_time + "'>" + strData + " " + strTime + "</div>";
+				html +=
+					'<div class="title" ><a href="../course/lesson.php?id=' +
+					lesson["id"] +
+					'">' +
+					lesson["title"] +
+					"</a></div>";
+
+				html += "</div>";
+
+				/*
+				let dt = lesson["duration"] / 60;
+				let sdt = "";
+				if (dt > 59) {
+					sdt += Math.floor(dt / 60) + "小时";
+				}
+				let m = dt % 60;
+				if (m > 0) {
+					sdt += (dt % 60) + "分钟";
+				}
+				html += "<div >" + gLocal.gui.duration + "：" + sdt + "</div>";
+				
+
+				html += '<div ><span class="lesson_status">' + lesson_time + "</span></div>";
+*/
+
+				html += "</div>";
+			}
+			$("#lesson_list").html(html);
+		}
+	);
 }

app/course/lesson.php

@@ -8,16 +8,8 @@ include "../pcdl/html_head.php";
 <script src="../course/lesson.js"></script>
 <?php
     require_once("../pcdl/head_bar.php");
-?>
 
-<style>
-    #main_video_win iframe{
-        width:100%;
-        height:100%;
-    }
-</style>
-<?php
-//
+/*
 
 require_once "../path.php";
 require_once "../public/_pdo.php";
@@ -67,14 +59,19 @@ echo "<div  class='index_inner'>";
 echo "<div id='lesson_list'>";
 
 echo "</div>";
-
+*/
 ?>
-</div>
-<script>
 
-$("#main_video_win").height($("#main_video_win").width()*9/16);
-lesson_show("<?php echo $_GET["id"]; ?>");
+<link type="text/css" rel="stylesheet" href="./style.css" />
+
+<div id='course_content' >
+    <div id='course_info_shell'><div id='course_info' class="section_inner"></div></div>
+    <div id='lesson_info_shell'><div id='lesson_info' class="section_inner"></div></div>
+    <div id='lesson_list_shell'><div id='lesson_list' class="section_inner lesson"></div></div>
+</div>
 
+<script>
+lesson_load("<?php echo $_GET["id"]; ?>");
 </script>
 <?php
 include "../pcdl/html_foot.php";

app/course/lesson_get.php

@@ -3,11 +3,23 @@
 
 require_once "../path.php";
 require_once "../public/_pdo.php";
+require_once "../ucenter/function.php";
+
+$userinfo = new UserInfo();
 
-global $PDO;
 PDO_Connect("sqlite:"._FILE_DB_COURSE_);
 $query = "select * from lesson where id = '{$_GET["id"]}'   limit 0,1";
-$fAllLesson = PDO_FetchAll($query);
-echo json_encode($fAllLesson, JSON_UNESCAPED_UNICODE);
+$fLesson = PDO_FetchRow($query);
+
+if ($fLesson) {
+    # code...
+    $user = $userinfo->getName($fLesson["teacher"]);
+	$fLesson["teacher_info"] = $user;
+	echo json_encode($fLesson, JSON_UNESCAPED_UNICODE);
+}
+else{
+	echo json_encode(array(), JSON_UNESCAPED_UNICODE);
+}
+
 
 ?>

app/course/style.css

@@ -0,0 +1,93 @@
+#course_frame {
+	display: flex;
+}
+#course_content {
+	margin: 0;
+	padding: 0;
+}
+#lesson_list {
+}
+#course_info_head_1 {
+	display: flex;
+}
+#course_info_head_face {
+	width: 200px;
+	height: 200px;
+	padding: 12px;
+}
+#course_info_head_face img {
+	width: 100%;
+	border-radius: 12px;
+}
+.section_inner {
+	max-width: 960px;
+	margin: 0 auto;
+}
+#course_info_head_title {
+	padding: 12px;
+}
+#course_title {
+	font-size: 22px;
+	font-weight: 700;
+}
+
+#course_subtitle {
+	font-size: 13px;
+	font-weight: 600;
+	padding: 10px 0;
+}
+#lesson_list_shell {
+	background-color: var(--drop-bg-color);
+}
+.course_info_block {
+	border-top: 1px solid var(--box-bg-color2);
+	padding: 10px 5px;
+}
+.course_info_block:first {
+	border-top: none;
+}
+.course_info_block h2 {
+	font-size: 16px;
+}
+#lesson_list {
+	display: flex;
+	flex-wrap: wrap;
+}
+#lesson_list .lesson_card {
+	width: 50%;
+	padding: 15px;
+}
+.datatime {
+	display: inline;
+
+	padding: 1px 4px;
+}
+.not_started {
+	background-color: orangered;
+	color: var(--bg-color);
+}
+.in_progress,
+.already_over {
+	color: var(--btn-hover-bg-color);
+}
+.lesson_card .title {
+	padding: 5px;
+	font-size: 17px;
+	font-weight: 600;
+}
+.curr_lesson {
+	border-left: 2px solid var(--tool-bt-bg-color1);
+}
+.curr_lesson a {
+	color: var(--main-color);
+}
+.not_curr_lesson {
+	border-left: 2px solid var(--border-line-color);
+	color: gray;
+}
+.not_curr_lesson a {
+	color: gray;
+}
+#course_info_head_2 {
+	padding: 10px;
+}