@mobileaction/ui-modules
Version:
Mobile Action common modules for Vue projects
2 lines (1 loc) • 6.86 kB
JavaScript
import{openBlock as e,createElementBlock as t,renderSlot as n,toDisplayString as i,Fragment as o,renderList as s,createCommentVNode as a,createElementVNode as r,resolveComponent as l,withDirectives as c,createTextVNode as d,createVNode as m,withCtx as h,vShow as u,pushScopeId as p,popScopeId as f}from"vue";import{Modal as v}from"ant-design-vue";const w={day:86400,hour:3600,min:60,sec:1},g={name:"ma-countdown",props:{secs:{type:Number,required:!0},showSeconds:{type:Boolean,default:!1}},data:()=>({nowMs:Date.now()}),computed:{endTimeMs(){return(new Date).getTime()+1e3*this.secs},remainingSecs(){const e=(this.endTimeMs-this.nowMs)/1e3|0;return e<=0?0:e},remainingTimeVals(){let e=this.remainingSecs;const t=[{unit:"day",val:0},{unit:"hour",val:0},{unit:"min",val:0},{unit:"sec",val:0}];return e<=0?t:(t.forEach((t=>{t.val=e/w[t.unit]|0,e-=t.val*w[t.unit],t.timeValue=this.paddedTimeValue(t),t.timeUnit=this.suffixedTimeUnit(t)})),t[0].val>0?t.slice(0,3):t.slice(1,4))}},methods:{paddedTimeValue:e=>e.val>9?e.val:"0"+e.val,suffixedTimeUnit:e=>e.val>1?e.unit+"s":e.unit},mounted(){setInterval((()=>{this.nowMs=Date.now()}),500)},watch:{remainingSecs(e,t){t!==e&&(this.$emit("update:remainingSecs",e),e<=0&&this.$emit("time-up"))}}},y={class:"ma-countdown"},b={key:0,class:"ma-countdown-seconds"},k={key:1,class:"ma-countdown-inner"},V={key:0,class:"time-sep"},U={class:"time"},x={class:"time-value"},F={class:"time-unit"};function C(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}C("\n@font-face {\n font-family: 'Roboto Mono';\n font-style: normal;\n font-weight: 700;\n src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDwjmqxf7-pAVU_.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n.ma-countdown[data-v-0219af88] {\n font-family: 'Roboto Mono', monospace;\n text-align: center;\n width: 100%;\n}\n.ma-countdown-inner[data-v-0219af88] {\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: space-evenly;\n -ms-flex-pack: space-evenly;\n justify-content: space-evenly;\n}\n.time-value[data-v-0219af88], .time-sep[data-v-0219af88], .ma-countdown-seconds[data-v-0219af88] {\n font-size: 1em; /* using em for inheritable sizes */\n}\n.time-unit[data-v-0219af88] {\n font-size: 0.4em; /* using em for inheritable sizes */\n overflow: visible;\n}\n"),g.render=function(l,c,d,m,h,u){return e(),t("div",y,[n(l.$slots,"default"),l.showSeconds?(e(),t("span",b,i(l.remainingSecs)+"s",1)):(e(),t("div",k,[(e(!0),t(o,null,s(l.remainingTimeVals,((n,s)=>(e(),t(o,{key:"sep"+s},[s?(e(),t("div",V," : ")):a("v-if",!0),r("div",U,[r("div",x,i(n.timeValue),1),r("div",F,i(n.timeUnit),1)])],64)))),128))]))])},g.__scopeId="data-v-0219af88",g.__file="src/ui-modules/components/MaCountdown.vue";const S={name:"ma-version-checker",emits:["time-up"],components:{MaCountdown:g,Modal:v},props:{breakingLevel:{type:Number,default:2},checkInterval:{type:Number,default:60},cached:{type:Boolean,default:!1},checker:{type:Function,default:()=>new Promise((e=>setTimeout((()=>e({version:"0.0.0"})))))},showPopup:{type:Boolean,default:!0},showCountdown:{type:Boolean,default:!0}},data:()=>({remainingSecs:0,checkFuncId:null,modalVisible:!1}),methods:{showForcedVersionPopup(){this.modalVisible=!0},async showOptionalVersionPopup(){v.confirm({class:"ma-info-box ma-version-checker optional ma-message-box hide-icon",title:"New Version is Available!",content:"New version of Mobile Action Dashboard is available. Please refresh to get changes!",okText:"Refresh Now",onOk:()=>this.refreshPage(),cancelText:"I will refresh later"})},refreshPage(){window.location.reload(!0)},startVersionChecker(){null===this.checkFuncId&&(this.checkFuncId=setInterval(this.checkNewAppVersion,1e3*this.checkInterval),this.checkNewAppVersion())},stopVersionChecker(){null===this.checkFuncId&&(clearInterval(this.checkFuncId),this.checkFuncId=null)},async checkNewAppVersion(){const e=this.checker();e&&e.then&&e.catch?e.then((e=>{if(this.$log.debug("Received version data:",e),!e||!e.version)return void this.$log.warn("Failed to get version with data: ",e);const{version:t}=e,n=this.$maSessionStorage.appVersion;if(this.$maSessionStorage.appVersion=t,"0.0.0"===n)return;const i=n.split("."),o=t.split(".");for(let e=0;e<3;++e)if(i[e]!==o[e]){this.showNewVersion(e<this.breakingLevel);break}})).catch(((...e)=>{const{errors:t}=e.length&&e[0]||{};t&&-1===(t||[]).indexOf("FETCH_ERROR")&&this.$log.error("Failed to get ma app version: "+JSON.stringify(e)),this.$log.error("Failed to get version:",...e)})):this.$log.error("Invalid checker function provided, it must return a promise: "+typeof e)},async showNewVersion(e=!1){this.stopVersionChecker(),!this.showPopup||this.newlyCreated()?this.refreshPage():e?this.showForcedVersionPopup():this.showOptionalVersionPopup()},newlyCreated(){return Date.now()-this.$maSessionStorage.appVersionInitTime<1e4},onTimeUp(){this.$emit("time-up"),this.refreshPage()}},beforeUnmount(){this.stopVersionChecker()},mounted(){this.$maSessionStorage.appVersionInitTime||(this.$maSessionStorage.appVersionInitTime=Date.now()),this.startVersionChecker()}},T={class:"ma-version-checker"},I={style:{display:"flex","align-items":"center"}},M=(e=>(p("data-v-3b8493c2"),e=e(),f(),e))((()=>r("div",{style:{width:"400px"}}," Page will refresh to upgrade in: ",-1))),N={style:{display:"flex","justify-content":"flex-end","margin-top":"20px"}};C("\n[data-v-3b8493c2] .ma-countdown {\n text-align: left;\n}\n"),S.render=function(o,s,a,p,f,v){const w=l("ma-countdown"),g=l("a-button"),y=l("a-modal");return c((e(),t("div",T,[n(o.$slots,"default",{},(()=>[d(i(o.remainingSecs)+"s",1)])),m(y,{visible:o.modalVisible,"onUpdate:visible":s[0]||(s[0]=e=>o.modalVisible=e),title:"An important update is released",footer:!1,closable:!1,"mask-closable":!1},{default:h((()=>[r("div",I,[M,m(w,{secs:60,"show-seconds":!0,onTimeUp:o.onTimeUp},null,8,["onTimeUp"])]),r("div",N,[m(g,{type:"primary",onClick:o.refreshPage},{default:h((()=>[d(" Refresh Now ")])),_:1},8,["onClick"])])])),_:1},8,["visible"])],512)),[[u,o.remainingSecs>0&&o.showCountdown]])},S.__scopeId="data-v-3b8493c2",S.__file="src/ui-modules/components/MaVersionChecker.vue";export{g as MaCountdown,S as MaVersionChecker};