feat(ZMS-1633): merge into main

zmsadmin/js/block/calldisplay/config/index.js

@@ -48,6 +48,7 @@ class CallDisplayConfigView extends Component {
             webtemplate: 'defaultplatz',
             hmac: '',
             enableQrCode: false,
+            twoDisplays: false,
             showQrCode: false
         }
 
@@ -73,9 +74,9 @@ class CallDisplayConfigView extends Component {
         return document.location.origin;
     }
 
-    buildCalldisplayUrl() {
+    buildCalldisplayUrl(displayNumber = 1) {
         const baseUrl  = this.props.config.calldisplay.baseUrl
-        let parameters = this.buildParameters(false);
+        let parameters = this.buildParameters(false, 'calldisplay', displayNumber);
 
         return `${this.buildHost()}${baseUrl}?${parameters.join('&')}`
     }
@@ -87,7 +88,7 @@ class CallDisplayConfigView extends Component {
         return `${this.buildHost()}${baseUrl}?${parameters.join('&')}`
     }
 
-    buildParameters(hashParameters, target = 'calldisplay') {
+    buildParameters(hashParameters, target = 'calldisplay', displayNumber = 1) {
         const collections = this.getSelectedItemsCollection(this.state)
         let queryParts = []
 
@@ -115,6 +116,10 @@ class CallDisplayConfigView extends Component {
             queryParts.push(`qrcode=1`)
         }
 
+        if (! hashParameters && this.state.twoDisplays) {
+            queryParts.push(`display=` + displayNumber)
+        }
+
         if (hashParameters) {
             queryParts.push(`hmac=${this.state.hmac}`)
         }
@@ -229,6 +234,22 @@ class CallDisplayConfigView extends Component {
         )
     }
 
+    renderTwoDisplays() {
+        const onChange = () => {
+            this.setState({
+                twoDisplays: !this.state.twoDisplays
+            });
+        }
+        return (
+            <fieldset>
+                <legend className="label">2 Aufrufanzeige</legend>
+                <div key="twoDisplays" className="form-check ticketprinter-config__item">
+                    {this.renderCheckbox(this.state.twoDisplays, onChange, "2 Aufrufanzeige erstellen")}
+                </div>
+            </fieldset>
+        )
+    }
+
     renderScopes(scopes) {
         if (scopes.length > 0) {
             return (
@@ -267,6 +288,7 @@ class CallDisplayConfigView extends Component {
 
     render() {
         const calldisplayUrl = this.buildCalldisplayUrl()
+        const calldisplayUrl2 = this.buildCalldisplayUrl(2)
         const webcalldisplayUrl = this.buildWebcalldisplayUrl()
 
         const onQueueStatusChange = (_, value) => {
@@ -291,6 +313,7 @@ class CallDisplayConfigView extends Component {
             <form className="form--base form-group calldisplay-config">
                 {this.state.departments.map(this.renderDepartment.bind(this))}
                 {this.renderQrCodeEnabled()}
+                {this.renderTwoDisplays()}
                 <FormGroup>
                     <Label 
                         attributes={{ "htmlFor": "visibleCalls" }} 
@@ -328,7 +351,10 @@ class CallDisplayConfigView extends Component {
                     </Controls>
                 </FormGroup>
                 <FormGroup>
-                    <Label attributes={{ "htmlFor": "calldisplayUrl" }} value="URL"></Label>
+                    { this.state.twoDisplays ?
+                    <Label attributes={{ "htmlFor": "calldisplayUrl" }} value="URL Anzeige 1"></Label>
+                        :
+                    <Label attributes={{ "htmlFor": "calldisplayUrl" }} value="URL"></Label> }
                     <Controls>
                         <Inputs.Text
                             value={calldisplayUrl}
@@ -339,6 +365,23 @@ class CallDisplayConfigView extends Component {
                     <a href={calldisplayUrl} target="_blank" rel="noopener noreferrer" className="button button-submit"><i className="fas fa-external-link-alt"></i> Aktuelle Konfiguration in einem neuen Fenster öffnen</a>
                 </div>
 
+
+                { this.state.twoDisplays ?
+                <div className="firstDisplay">
+                    <FormGroup>
+                        <Label attributes={{ "htmlFor": "calldisplayUrl2" }} value="URL Anzeige 2"></Label>
+                        <Controls>
+                            <Inputs.Text
+                                value={calldisplayUrl2}
+                                attributes={{ readOnly: true, id: "calldisplayUrl2" }} />
+                        </Controls>
+                    </FormGroup>
+                    <div className="form-actions">
+                        <a href={calldisplayUrl2} target="_blank" rel="noopener noreferrer" className="button button-submit"><i className="fas fa-external-link-alt"></i> Aktuelle Konfiguration in einem neuen Fenster öffnen</a>
+                    </div>
+                </div>
+                    : null }
+
                 <FormGroup>
                     <Label attributes={{ "htmlFor": "webcalldisplayLayout" }} value="Layout mobile Aufrufanzeige"></Label>
                     <Controls>

zmscalldisplay/scss/block/aufrufanzeige.scss

@@ -1,23 +1,3 @@
-/* ----------------------------------------------
-    qr code
----------------------------------------------- */
-.qrCode--Headline {
-    text-align: center;
-    background: #fff;
-    font-family: Arial,sans-serif;
-    font-size: 32px;
-    font-weight: 700;
-    line-height: 45px;
-    margin-bottom: 3px;
-    margin-top: 0px;
-}
-.qrContainer {
-    background: #fff;
-}
-
-/* ----------------------------------------------
-    aufrufanzeige
----------------------------------------------- */
 .aufrufanzeige
 {
     background:transparent;
@@ -56,8 +36,8 @@
 
 .waitingColumn {
     position: absolute;
-    left: 50px; 
-    top: 450px; 
+    left: 40px; 
+    top: 420px; 
 }
 .aufrufanzeige .wartende_aktuell
 {
@@ -108,11 +88,14 @@
 .aufrufanzeige .uhr
 {
     position: absolute;
-    left:55px;
-    top:105px;
+    left:60px;
+    top:114px;
     width:275px;
-    height:275px;
   }
+.aufrufanzeige .uhr #clock_medium,
+.aufrufanzeige .uhr #clock_big {
+    display:none;
+}
 
 .aufrufanzeige .aufrufanzeige_Datum
 {
@@ -122,14 +105,14 @@
     position:absolute;
     text-align:center;
     font-size:24px;
-    left:50px;
-    top:390px;
+    left:40px;
+    top:370px;
     width:275px;
 }
 
 
 /* ----------------------------------------------
-    Text & Logo|QrCode
+    Text & Logo
 ---------------------------------------------- */
 .aufrufanzeige .aufrufanzeige_text
 {
@@ -142,11 +125,38 @@
     text-align:center;
     left: 1087px;
     top:89px;
-    width: 265px;
+    width: 234px;
+}
+
+.aufrufanzeige .infotext-content {
+    margin-left: 30px;
 }
 
-.aufrufanzeige_text .qrContainer
+.aufrufanzeige .infotext
 {
+    top: 77px;
+    position: absolute;
+    padding: 10px 40px;
+    font-size:2em;
+    font-weight:normal;
+    line-height:26px;
     width: 100%;
-    text-align: center;
+    background: #F2F6FA;
+}
+
+#display_number {
+    position: fixed;
+    bottom: 20px;
+    right: 54px;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+#infoicon {
+    background: url(img/info-icon.svg) top left no-repeat;
+    width: 21px;
+    height: 21px;
+    font-size: 36px;
+    position: absolute;
+    background-size: cover;
 }

zmscalldisplay/scss/block/footer.scss

@@ -0,0 +1,37 @@
+.footer {
+	position:absolute;
+	left:0px;
+	top:630px;
+	width:800px;
+}
+
+#animate-container {
+ background-color: $blue;
+ color: #ffffff;
+ font-size: 70px;
+ font-weight: 700;
+ white-space: nowrap;
+ overflow: hidden;
+ padding: 10px 0;
+ width: 200%;
+
+ animation-name: text-indent-animate;
+ animation-duration: 60s;
+ animation-timing-function: linear;
+ animation-direction: reverse;
+ animation-iteration-count: infinite;
+}
+
+#animate-container:hover {
+ animation-play-state: paused;
+}
+
+@keyframes text-indent-animate {
+ 0% {
+   text-indent: -200%;
+ }
+
+ 100% {
+  text-indent: 100%;
+ }
+}