yiyun-fe
/
LOCKING-box


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #board {
      position: relative;
      width: 504px;
      height: 219px;
      padding: 9px 12px 15px;
      background: url(./bg.png) no-repeat;
      box-sizing: border-box;
    }

    .inner {
      position: relative;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    #close-icon {
      position: absolute;
      width: 24px;
      height: 24px;
      top: 24px;
      right: 32px;
      cursor: pointer;
      z-index: 1;
    }

    .close-icon:before,
    .close-icon:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 16px;
      height: 2px;
      background-color: #fff;
    }

    .close-icon:before {
      transform: rotate(45deg);
    }

    .close-icon:after {
      transform: rotate(-45deg);
    }

    h3 {
      flex: none;
      height: 52px;
      line-height: 52px;
      color: #fff;
      font-size: 20px;
      padding-left: 20px;
    }

    #syncMsg {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      flex: 1;
    }

    .line {
      display: flex;
      font-size: 14px;
      line-height: 22px;
      flex-direction: row;
      justify-content: space-between;
      padding: 0 20px;
    }

    .primary-btn {
      font-size: 16px;
      color: #7850FF;
      cursor: pointer;
    }

    .err-icon {
      position: relative;
      border-radius: 50%;
      display: inline-block;
      vertical-align: top;
      height: 24px;
      width: 24px;
      background-color: #FF3F17;
    }

    .succ-icon {
      position: relative;
      border-radius: 50%;
      display: inline-block;
      vertical-align: top;
      height: 24px;
      width: 24px;
      background: #51DCB6;

    }

    .succ-icon:before,
    .succ-icon:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 16px;
      height: 2px;
      background-color: #fff;
    }

    .succ-icon:before {
      width: 7px;
      transform: translate(-3px, 2px) rotate(41deg);
    }

    .succ-icon:after {
      width: 10px;
      transform: translateX(2px) rotate(-60deg);
    }

    .label {
      margin-left: 8px;
    }

    #conflictMsg {
      display: flex;
      flex-direction: row;
      /* justify-content: space-evenly; */
      flex: 1;
      padding: 0 20px;
      align-items: center;
    }

    #conflictMsg .right {
      flex: none;
      margin-left: 72px;
    }

    #conflictMsg .left {
      flex: 1;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.85);
    }

    .hide {
      display: none !important;
    }

    #syncMsg.success .err-icon {
      display: none;
    }

    #syncMsg.success .label:after {
      content: '成功!';
    }

    #syncMsg.success .primary-btn:after {
      content: '查看';
    }

    #syncMsg.error .succ-icon {
      display: none;
    }

    #syncMsg.error .label:after {
      content: '失败';
    }

    #syncMsg.error .primary-btn:after {
      content: '重新同步';
    }

    #syncMsg.incomming #syncIncoming {
      font-size: 20px;
      color: rgba(0, 0, 0, 0.85);
    }

    #syncMsg.incomming .primary-btn:after {
      content: '下载';
    }
  </style>
</head>

<body>
  <div id="board">
    <div id="close-icon" class="close-icon"></div>
    <div class="inner">
      <h3>消息通知</h3>
      <div id="syncMsg">
        <div class="line">
          <span id="syncMsgFileName">文件名称</span>
          <span id="syncMsgDate">21/08/20 16:34:21</span>
        </div>
        <div class="line">
          <div id="syncResult">
            <span class="err-icon close-icon"></span>
            <span class="succ-icon"></span>
            <span class="label">同步</span>
          </div>
          <div id="syncIncoming">

          </div>
          <span id="syncMsgBtn" class="primary-btn"></span>
        </div>
      </div>
      <div id="conflictMsg">
        <div class="left" id="conflictMsgText">
          该文件存在版本冲突，请先下载该文件最新版本，修改后再上传！
        </div>
        <div class="right">
          <span id="conflictMsgBtn" class="primary-btn">下载</span>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    let contextMsg;
    const noop = () => { };
    const domId = document.getElementById.bind(document);
    const closeBtn = domId('close-icon');

    const syncMsgView = domId('syncMsg');
    const syncMsgBtn = domId('syncMsgBtn');
    const syncMsgFileName = domId('syncMsgFileName');
    const syncMsgDate = domId('syncMsgDate');
    const syncResult = domId('syncResult');
    const syncIncoming = domId('syncIncoming');

    const conflictMsgView = domId('conflictMsg');
    const conflictMsgBtn = domId('conflictMsgBtn');
    const conflictMsgText = domId('conflictMsgText');

    syncMsgView.classList.add('hide');
    conflictMsgView.classList.add('hide');
    syncResult.classList.add('hide');
    syncIncoming.classList.add('hide');

    function closeWindow() {
      window.ipcRenderer.invoke('window:hide');
    }    
    closeBtn.addEventListener('click', closeWindow);

    syncMsgBtn.addEventListener('click', function () {
      if (contextMsg.taskSyncStatus === 'TASK_SYNC_STATUS_FINISH') { // 查看
        window.ipcRenderer.invoke('open-file-position', contextMsg);
        closeWindow();
        return;
      }
      if (contextMsg.taskSyncStatus === 'TASK_SYNC_STATUS_FAIL') { // 重新同步
        window.ipcRenderer.invoke('re-sync-file', contextMsg);
        closeWindow();
        return;
      }
      if (contextMsg.notifyType === 1) { // 下载
        window.ipcRenderer.invoke('download-file', contextMsg);
        closeWindow();
        return;
      }
    });

    conflictMsgBtn.addEventListener('click', function () { // 下载
      window.ipcRenderer.invoke('download-file', contextMsg);
      closeWindow();
    });

    window.addIpcRendererListener('on-notify', function (_, message) { // message: DATA.SocketFileMsg
      console.log('comming message: ', message);
      render(message);
    });

    function render(message) {
      contextMsg = message;
      resetDomStatus();
      let runningMethod = noop;
      if(message.notifyType === 1) {
        runningMethod = renderTaskIncoming;
      } else if(message.notifyType === 2 || message.notifyType === 3) {
        runningMethod = renderConflictMsg;
      } else if(message.taskSyncStatus === 'TASK_SYNC_STATUS_FINISH') {
        runningMethod = renderTaskSuccess;
      } else if(message.taskSyncStatus === 'TASK_SYNC_STATUS_FAIL') {
        runningMethod = renderTaskError;
      }
      runningMethod(message);
    }
    function useView(dom) { dom.classList.remove('hide'); };
    function fileFullName(message) {
      const extension = message.extension;
      return `${message.archName}${extension ? '.' + extension : ''}`;
    }
    function resetDomStatus() {
      syncMsgView.classList.add('hide');
      syncMsgView.classList.remove('success');
      syncMsgView.classList.remove('error');
      syncMsgView.classList.remove('incomming');
      syncResult.classList.add('hide');
      syncIncoming.classList.add('hide');
      conflictMsgView.classList.add('hide');
    }

    function renderTaskSuccess(message) {
      useView(syncMsgView);
      syncMsgView.classList.add('success');
      useView(syncResult);
      syncMsgFileName.innerText = fileFullName(message);
      syncMsgDate.innerText = message.taskCreateDateStr;
    }
    function renderTaskError(message) {
      useView(syncMsgView);
      syncMsgView.classList.add('error');
      syncResult.classList.remove('hide');
      syncMsgFileName.innerText = fileFullName(message);
      syncMsgDate.innerText = message.taskCreateDateStr;
    }
    function renderTaskIncoming(message) {
      useView(syncMsgView);
      syncMsgView.classList.add('incomming');
      useView(syncIncoming);
      syncMsgFileName.innerText = fileFullName(message);
      syncMsgDate.innerText = message.taskCreateDateStr;
      syncIncoming.innerText = message.notifyMessage;
    }
    function renderConflictMsg(message) {
      useView(conflictMsgView);
      conflictMsgText.innerText = `「${fileFullName(message)}」存在版本冲突，请先下载该文件最新版本，修改后再上传！`;
    }

  </script>
</body>

</html>