bremen_short_url/BackEnd/projects-management.aspx

565 lines
40 KiB
Plaintext

<%@ Page Title="" Language="C#" MasterPageFile="~/BackEnd/MasterPage.master" AutoEventWireup="true" CodeFile="projects-management.aspx.cs" Inherits="BackEnd_projects_management" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script src="assets/javascript/projects/projects-management.js?v=49"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<!-- .page -->
<div class="page has-sidebar has-sidebar-fluid has-sidebar-expand-lg">
<!-- .page-inner -->
<div class="page-inner p-0">
<!-- .page-section -->
<div class="page-section">
<div class="container-fluid py-3">
<!-- title and toolbar -->
<div class="d-md-flex align-items-md-start">
<h1 class="page-title mr-sm-auto">專案列表 </h1>
<!-- .btn-toolbar -->
<div id="dt-buttons" class="btn-toolbar"><input type="hidden" id="selected_project_uid"></div>
<!-- /.btn-toolbar -->
</div>
<!-- /title and toolbar -->
<!-- .page-section -->
<div class="page-section">
<!-- .card -->
<section class="card card-fluid">
<!-- .card-body -->
<div class="card-body">
<!-- .table -->
<table id="myTable" class="table">
<!-- thead -->
<thead>
<tr>
<th style="min-width: 90px;">&nbsp; </th>
<th>專案名稱 </th>
<th>建立時間</th>
</tr>
</thead>
<!-- /thead -->
</table>
<!-- /.table -->
</div>
</section>
</div>
<button class="btn btn-danger btn-floated d-lg-none" type="button" data-toggle="sidebar"><i class="fa fa-th-list"></i></button>
</div>
</div><!-- /.page-section -->
</div><!-- /.page-inner -->
<!-- .page-sidebar -->
<div class="page-sidebar">
<!-- .sidebar-header -->
<header class="sidebar-header d-xl-none">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active">
<a href="#" onclick="Looper.toggleSidebar()"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>Back</a>
</li>
</ol>
</nav>
</header><!-- /.sidebar-header -->
<!-- .sidebar-section -->
<div class="sidebar-section">
<div id="alert-info" class="alert alert-info"> 請點選專案列表的專案項目取得短網址列表與相關功能. </div>
<!-- .page-section -->
<div class="page-section" id="urlDiv">
<div class="container-fluid py-3">
<!-- title and toolbar -->
<div class="d-md-flex align-items-md-start">
<h5 id="urlTitle" class="mr-sm-auto">短網址列表 </h5>
<!-- .btn-toolbar -->
<div id="url-buttons" class="btn-toolbar"></div>
<!-- /.btn-toolbar -->
</div>
<!-- /title and toolbar -->
<!-- .page-section -->
<div class="page-section">
<!-- .card -->
<section class="card card-fluid">
<!-- .card-body -->
<div class="card-body">
<!-- .form-group -->
<div class="form-group">
<!-- .input-group -->
<div class="input-group input-group-alt">
<!-- .input-group-prepend -->
<div class="input-group-prepend">
<select id="filterBy" class="custom-select">
<option value='' selected>搜尋 </option>
<option value="1">說明 </option>
<option value="2">短網址 </option>
<option value="3">原網址 </option>
</select>
</div>
<!-- /.input-group-prepend -->
<!-- .input-group -->
<div class="input-group has-clearable">
<button id="clear-search" type="button" class="close" aria-label="Close">
<span aria-hidden="true">
<i class="fa fa-times-circle"></i>
</span>
</button>
<div class="input-group-prepend">
<span class="input-group-text">
<span class="oi oi-magnifying-glass"></span>
</span>
</div>
<input id="table-search" type="text" class="form-control" placeholder="搜尋短網址">
</div>
<!-- /.input-group -->
</div>
<!-- /.input-group -->
</div>
<!-- /.form-group -->
<!-- .table -->
<table id="myUrlTable" class="table">
<!-- thead -->
<thead>
<tr>
<th style="min-width: 125px;">&nbsp; </th>
<th style="max-width: 350px; min-width: 125px;">說明 </th>
<th style="min-width: 250px;">短網址 </th>
<th style="min-width: 205px;">原網址 </th>
</tr>
</thead>
<!-- /thead -->
</table>
<!-- /.table -->
</div>
</section>
</div>
</div>
</div>
<!-- /.page-section -->
</div><!-- /.sidebar-section -->
</div><!-- /.page-sidebar -->
</div>
<!-- /.page -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="vertical-alignment-helper">
<div class="modal-dialog modal-lg vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">專案資料</h4>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="form-label-group">
<input type="text" class="form-control" id="project_name" autofocus="" placeholder="專案名稱"/>
<label for="project_name">專案名稱</label>
</div>
<input type="hidden" id="method" />
<input type="hidden" id="project_uid" />
</div>
<div class="form-group">
<label for="project_descript">
說明
<span class="badge badge-secondary">
<em>選填</em>
</span>
</label>
<textarea class="form-control" id="project_descript" rows="3" maxlength="500" placeholder="專案說明"></textarea>
</div>
<div class="card">
<div class="card-body">
<div class="form-group d-flex justify-content-between align-items-center" id="project_limited_div">
<span>專案有日期期限限制</span>
<!-- .switcher-control -->
<label class="switcher-control switcher-control-lg">
<input type="checkbox" class="switcher-input" id="project_limited">
<span class="switcher-indicator"></span><span class="switcher-label-on">是</span> <span class="switcher-label-off">否</span></label>
<!-- /.switcher-control -->
</div>
<div class="form-group" id="project_end_div">
<label for="project_enddate">專案截止日期</label>
<input id="project_enddate" type="text" data-date-format="Y/m/d" class="form-control flatpickr-input active" data-toggle="flatpickr" placeholder="專案截止日期" readonly="readonly">
</div>
<div class="invalid-feedback" style="display: block;" id="end_desc_div">
<i class="fa fa-exclamation-circle fa-fw"></i><span id="end_desc">專案截止後,將不進行轉址動作,直接導向所設定專案結束網址.</span>
</div>
<div class="form-label-group" id="project_endToRedirect_div">
<input type="text" class="form-control" id="project_endToRedirect" maxlength="256" value="" placeholder="專案結束導向網址" />
<label for="project_endToRedirect">專案結束導向網址</label>
</div>
</div>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-md-12">
<section class="card card-fluid">
<header class="card-header border-bottom-0">專案成員 </header>
<div id="nestable02" class="dd">
<ol class="dd-list">
<li class="dd-item" data-id="000" data-mark="000">
<div class="dd-handle">
<div class="col-10">
<section class="card" style="margin-bottom: 0px;">
<!-- .card-body -->
<div class="card-body">
<!-- form .needs-validation -->
<!-- .form-row -->
<div class="form-row">
<!-- form grid -->
<div class="col-md-12">
<label>
姓名
</label>
<select class="custom-select" name="user_uid" data-name="user_uid">
</select>
</div>
<!-- /form grid -->
</div>
<!-- /.form-row -->
<!-- /form .needs-validation -->
</div>
<!-- /.card-body -->
</section>
</div>
<div class="col-2 align-items-center">
<button type="button" class="btn btn-sm btn-secondary" name="user-del" data-name="user-del" onclick="item_del(this);">
<i class="far fa-trash-alt"></i>
</button>
</div>
</div>
</li>
</ol>
</div>
<footer class="card-footer bg-light" id="addMemberDiv">
<a href="javascript: void(0);" class="card-footer-item justify-content-start" id="addMember">
<span>
<i class="fa fa-plus-circle mr-1"></i>新增成員</span>
</a>
</footer>
</section>
</div>
</div>
<hr class="mb-4">
<div class="form-group">
<div class="form-label-group">
<input type="text" class="form-control" id="project_apiId" placeholder="API ID" readonly="readonly"/>
<label class="control-label" for="project_apiId">API ID</label>
</div>
</div>
<div class="form-group">
<div class="form-label-group">
<input type="text" class="form-control" id="project_apiKey" placeholder="API Key" readonly="readonly"/>
<label class="control-label" for="project_apiKey">API Key</label>
</div>
</div>
<div class="form-group">
<label for="project_descript">
允許存取API的Domain Name
<span class="badge badge-secondary">
<em>選填</em>
</span>
</label>
<textarea data-limit-rows="true" class="form-control" id="projectApiDomain_name" rows="3" placeholder="Domain Name List"></textarea>
</div>
<div class="form-group">
<label for="project_descript">
允許存取API的IP
<span class="badge badge-secondary">
<em>選填</em>
</span>
</label>
<textarea data-limit-rows="true" class="form-control" id="projectApiDomain_ip" rows="3" placeholder="IP List"></textarea>
</div>
<div class="form-group">
<div>給開發者的存取短網址API文件&nbsp;&nbsp;</div>
<a href="短網址系統API使用文件.docx" target="_blank">點我下載</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" id="saveBtn">儲存資料</button>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal -->
<!-- Modal -->
<div class="modal fade" id="myUrlModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="vertical-alignment-helper">
<div class="modal-dialog modal-lg vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myUrlModalLabel">短網址資料</h4>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="form-label-group">
<input type="text" class="form-control" id="url_descript" maxlength="95" autofocus="" placeholder="短網址說明"/>
<label for="url_descript">短網址說明</label>
</div>
<input type="hidden" id="url_method" />
<input type="hidden" id="url_uid" />
</div>
<div class="form-group">
<label for="pi3">短網址設置</label>
<!-- .input-group -->
<div class="input-group input-group-alt">
<div class="input-group-prepend">
<span class="input-group-text" id="url_header">https://</span>
</div>
<input type="text" class="form-control" id="url_code" placeholder="大小寫有區別" maxlength="13" onkeyup="value=value.replace(/[\W]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
</div>
<!-- /.input-group -->
</div>
<div class="form-group">
<label for="qr_canvas">QRCode (新增的短網址需按下儲存後才會生效喔~)</label>
<div id="qr_canvas"></div>
<br/>
<button id="qr_download" class="btn btn-sm btn-secondary">下載 QRCode</button>
</div>
<div class="form-group">
<label for="project_descript">
要被縮短的網址
</label>
<textarea class="form-control" id="url_directToUrl" rows="3" maxlength="500" placeholder="原網址"></textarea>
</div>
<div class="card">
<div class="card-body">
<div class="form-group d-flex justify-content-between align-items-center" id="fbTag_div">
<span>自訂FB的連結預覽</span>
<!-- .switcher-control -->
<label class="switcher-control switcher-control-lg">
<input type="checkbox" class="switcher-input" id="url_fbTag">
<span class="switcher-indicator"></span><span class="switcher-label-on">是</span> <span class="switcher-label-off">否</span></label>
<!-- /.switcher-control -->
</div>
<div id="fbTagData_div">
<div class="form-group">
<label for="url_fbTitle">FB的預覽標題</label>
<input id="url_fbTitle" type="text" class="form-control" maxlength="45" placeholder="FB的預覽標題" />
</div>
<div class="form-group">
<label for="url_fbDescript">
FB的預覽說明
</label>
<textarea class="form-control" id="url_fbDescript" rows="3" placeholder="FB的預覽說明" maxlength="280"></textarea>
</div>
<div class="form-group">
<div class="row">
<div class="col-6">
<input type="file" id="url_fbImage_image" name="slim[]" required accept="image/jpeg, image/png" data-rule="url_fbImage_image" class="embed-responsive-item" style="visibility: hidden;" />
<div style="visibility: hidden;" id="url_fbImage_oldimage" runat="server" img_src="" data-name="url_fbImage_oldimage" />
</div>
<div class="col-6">
<label>
<small>最佳解析度 720x405, &lt; 2 MB.</small>
</label>
</div>
</div>
</div>
<div class="d-flex justify-content-between align-items-center">
<span>是否在圖片上顯示播放圖示</span>
<!-- .switcher-control -->
<label class="switcher-control switcher-control-lg">
<input type="checkbox" class="switcher-input" id="url_playBtn">
<span class="switcher-indicator"></span><span class="switcher-label-on">是</span> <span class="switcher-label-off">否</span></label>
<!-- /.switcher-control -->
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="form-group d-flex justify-content-between align-items-center" id="gif_div">
<span>開啟FB Gif連結導向</span>
<!-- .switcher-control -->
<label class="switcher-control switcher-control-lg">
<input type="checkbox" class="switcher-input" id="url_gifTag">
<span class="switcher-indicator"></span><span class="switcher-label-on">是</span> <span class="switcher-label-off">否</span></label>
<!-- /.switcher-control -->
</div>
<div id="gifData_div">
<div class="form-label-group">
<input id="url_gifLink" type="text" class="form-control" maxlength="300" placeholder="Gif檔連結" />
<label for="url_gifLink">Gif檔連結</label>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="form-group d-flex justify-content-between align-items-center" id="fbPixel_div">
<span>開啟FB Pixel碼埋入</span>
<!-- .switcher-control -->
<label class="switcher-control switcher-control-lg">
<input type="checkbox" class="switcher-input" id="url_fbPixel">
<span class="switcher-indicator"></span><span class="switcher-label-on">是</span> <span class="switcher-label-off">否</span></label>
<!-- /.switcher-control -->
</div>
<div id="fbPixelData_div">
<div class="form-label-group">
<input id="url_fbPixelCode" type="text" class="form-control" maxlength="20" placeholder="FB 像素編號" />
<label for="url_fbPixelCode">FB 像素編號</label>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="form-group d-flex justify-content-between align-items-center" id="googleAds_div">
<span>開啟Google Adwords追蹤碼埋入</span>
<!-- .switcher-control -->
<label class="switcher-control switcher-control-lg">
<input type="checkbox" class="switcher-input" id="url_googleAds">
<span class="switcher-indicator"></span><span class="switcher-label-on">是</span> <span class="switcher-label-off">否</span></label>
<!-- /.switcher-control -->
</div>
<div id="googleAdsData_div">
<div class="form-label-group">
<input id="url_googleAwConversionId" type="text" class="form-control" maxlength="20" placeholder="Google Adwords代碼" />
<label for="url_googleAwConversionId">Google Adwords代碼</label>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="form-group d-flex justify-content-between align-items-center" id="uploadBtn_div">
<span>上傳PDF或圖片並將檔案網址帶入</span>
<!-- .switcher-control -->
<label class="switcher-control switcher-control-lg">
<input type="checkbox" class="switcher-input" id="url_upload">
<span class="switcher-indicator"></span><span class="switcher-label-on">是</span> <span class="switcher-label-off">否</span></label>
<!-- /.switcher-control -->
</div>
<div id="uploadBtnData_div">
<div class="btn btn-secondary fileinput-button">
<i class="fa fa-plus fa-fw"></i> <span>上傳PDF或JPG...</span> <!-- The file input field used as target for the file upload widget -->
<input id="fileupload-btn" type="file" name="files[]" multiple="" accept="image/jpeg, image/jpg, image/png, application/pdf" onchange="readURL(this);">
</div>
<div id="uploadList" class="list-group list-group-flush list-group-divider">
<div class="list-group-item">
<input type="hidden" id="uploadFileBase64"/>
<input type="hidden" id="uploadFileLinkName"/>
<input type="hidden" id="uploadFileClientName">
<input type="hidden" id="uploadFileType" />
<input type="hidden" id="uploadFileUrl" />
<div class="list-group-item-figure">
<div class="tile tile-img">
<span id="filespan" class="fa fa-file-pdf"></span>
</div>
</div>
<div class="list-group-item-body">
<div class="media align-items-center">
<div id="filebody" class="media-body">IMG_2985.jpg</div>
<div class="media-actions">
<button class="btn btn-sm btn-secondary" style="display: none;">Upload</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="mb-4">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" id="saveUrlBtn">儲存資料</button>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal -->
<!-- Modal -->
<div class="modal fade" id="myDataModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="vertical-alignment-helper">
<div class="modal-dialog modal-lg vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myDataModalLabel">統計資料</h4>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="form-group">
<div class="input-daterange input-group" id="range_date">
<input type="text" class="form-control form-control-sm" name="start" id="startDate" />
<span class="input-group-addon align-bottom">to</span>
<input type="text" class="form-control form-control-sm" name="end" id="endDate" />
</div>
</div>
</div>
<div class="form-group">
<div class="form-label-group">
<label for="range_type">統計單位</label>
<select class="custom-select" id="range_type" required="">
<option value="day">天</option>
<option value="month">月</option>
<option value="hour">時</option>
<option value="total">加總</option>
</select>
</div>
</div>
<div class="form-group text-right">
<button type="button" class="btn btn-warning" id="countExcelBtn">匯出</button>
<button type="button" class="btn btn-warning" id="countBtn">列出結果</button>
<input type="hidden" id="count_uid" />
</div>
<div class="row">
<div class="col-lg-12">
<!-- .list-group -->
<div id="total_list" class="list-group list-group-divider mb-3">
<div class="list-group-header"> 統計結果 </div>
<a href="#" class="list-group-item list-group-item-action" data-mark="000" style="display: none;">
<div class="list-group-item-body d-flex justify-content-between align-items-center">
<span class="list-group-item-text" data-name="total_date">Communication</span> <span class="badge badge-danger badge-pill" data-name="total_num">14</span>
</div>
</a>
</div>
<!-- /.list-group -->
</div>
</div>
<hr class="mb-4">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal -->
</asp:Content>