1 @using Co3.Espresso.Website.Services
2 @using Co3.MCH.Website.Frontend.Models.Frontend.MCH365
3 @using Co3.MCH.Website.Frontend.Models.Frontend.Users
4 @using Dynamicweb.SystemTools
5 6 @{
7 BoothContainer container = UserContext.Current.Booth;
8 string floorPlanSvg = container.FloorPlan;
9 }
10 11 <style>
12 :root {
13 --booth-scale: 1;
14 --booth-units-per-meter: 3;
15 --booth-grid-unit-size: 0px;
16 --booth-floorplan-left: 10px;
17 --booth-floorplan-top: 10px;
18 --booth-floorplan-width: 250px;
19 --booth-floorplan-height: 500px;
20 --booth-floorplan-svg: url('@floorPlanSvg');
21 }
22 </style>
23 24 <div class="e-loading-overlay is-loading js-booth-cart-preloader">
25 @RenderingService.Instance.PartialView( "_partials/loading-spinner.cshtml" )
26 </div>
27 <div id="js-mch365-booth-cart-container" class="row gy-3 gx-1 js-mch365-booth-cart-container">
28 <script id="js-e-handlebars-tmpl-no-booth-or-orderlines-partial" type="text/x-handlebars-template">
29 <div class="col-6 mx-auto text-center">
30 <h2>Du har ingen produkter til placering. Men sådan behøver det ikke at være.</h2>
31 <p class="lead">Du har ingen produkter til placering. Eller ingen stand tildelt.</p>
32 </div>
33 </script>
34 35 <div class="col-3">
36 <div class="js-mch365-booth-cart mch365-booth-cart">
37 <script id="js-e-handlebars-tmpl-booth-cart" type="text/x-handlebars-template">
38 {{#if notplaced}}
39 <h3 class="mb-2">Du mangler at placere</h3>
40 {{#each notplaced}}
41 <div class="mch365-booth-cart-item d-flex js-mch365-booth-cart-item mch365-booth-cart-item {{#if collectionCount}}multiple{{/if}} mch365-booth-cart-item-layer-{{{product.layer}}}" data-orderlineid="{{{id}}}">
42 <div class="d-flex justify-content-between w-100 align-items-center">
43 <img class="mch365-booth-cart-item-icon" src="{{{product.icon}}}" />
44 <p class="d-flex flex-grow-1 flex-shrink-1 my-0 h4 small">{{{product.name}}}</p>
45 {{#if collectionCount}}
46 <span class="d-flex flex-shrink-0 flex-grow-0 badge badge-primary ml-1 font-weight-bold small">x {{{collectionCount}}}</span>
47 {{/if}}
48 <a class="mch365-booth-cart-utility-btn flex-shrink-0 ml-1 mch365-booth-cart-droppable-item js-mch365-booth-cart-droppable-item" title="">
49 @ImageService.Instance.GetSvgMarkup( "/Files/Templates/Designs/mch365_admin/_assets/img/streamline/diagram-all-direction-expand.svg" )
50 </a>
51 </div>
52 </div>
53 {{/each}}
54 {{/if}}
55 56 <h3 class="mb-2">Placerede elementer</h3>
57 {{#if placed}}
58 {{#each placed as |main|}}
59 {{#compare main.collection.length '>' 1}}
60 <div class="js-mch365-booth-cart-item d-flex mch365-booth-cart-item multiple mch365-booth-cart-item-layer-{{{main.product.layer}}}" >
61 <div class="flex-column w-100">
62 <div class="d-flex justify-content-between w-100 align-items-center {{#compare main.expanded '===' false}}collapsed{{/compare}}" style="min-height: calc(50px - 1rem);" data-orderlineid="{{{main.id}}}" data-productid="{{{main.product.id}}}" data-toggle="collapse" data-target="#orderline-collection-{{{main.product.id}}}" aria-expanded="{{main.expanded}}" aria-controls="orderline-collection-{{{main.product.id}}}">
63 <img class="mch365-booth-cart-item-icon" src="{{{main.product.icon}}}" />
64 <p class="d-flex flex-grow-1 flex-shrink-1 my-0 h4 small">Gruppe af {{{main.product.name}}}</p>
65 <span class="d-flex flex-shrink-0 flex-grow-0 badge badge-primary ml-1 font-weight-bold small">x {{{main.collection.length}}}</span>
66 <a class="ml-1 mch365-booth-cart-utility-btn dropdown flex-shrink-0" title="Fold ud/ind">@ImageService.Instance.GetSvgMarkup( "/Files/Templates/Designs/mch365_admin/_assets/img/streamline/arrow-down-1.svg" )</a>
67 </div>
68 69 <div class="collapse {{#compare main.expanded '===' true}}show{{/compare}}" id="orderline-collection-{{{main.product.id}}}">
70 <div class="border-top" style="margin-top: .5rem;">
71 <div style="margin-top: .5rem;">
72 {{#each main.collection as |sub|}}
73 <div class="js-mch365-booth-cart-item d-flex mch365-booth-cart-item flex-wrap mch365-booth-cart-subitem mch365-booth-cart-item-layer-{{{sub.product.layer}}}" data-orderlineid="{{{sub.id}}}">
74 <div class="d-flex justify-content-between w-100 align-items-center ">
75 <a class="js-mch365-booth-remove-item-btn mch365-booth-remove-item-btn"></a>
76 <p class="d-flex flex-grow-1 flex-shrink-1 my-0 font-weight-bold font-family-headings small">{{{sub.product.name}}}</p>
77 <div class="mch365-booth-cart-show-coordinates-wrapper">
78 <span class="mch365-booth-cart-show-coordinates-placeholder">@ImageService.Instance.GetSvgMarkup( "/Files/Templates/Designs/mch365_admin/_assets/img/streamline/grid-artboard.svg" )</span>
79 <div class="mch365-booth-cart-show-coordinates position-relative d-flex">
80 <span class="d-inline-flex flex-shrink-0 flex-grow-0 badge badge-light small border">x:{{{sub.coords.x}}}; y:{{{sub.coords.y}}}</span>
81 82 <span class="coordinates-direction-specific rotate-{{sub.boothItem.rotation}}"></span>
83 </div>
84 </div>
85 <a class="ml-1 mch365-booth-cart-utility-btn flex-shrink-0 js-mch365-booth-item-add-comment {{#compare comment '!==' ''}}comment-added{{/compare}} collapsed" title="tilføj/ret kommentar" type="button" data-toggle="collapse" data-target="#OrderLineFieldValue_{{id}}_OrderlineComment" aria-expanded="false" aria-controls="OrderLineFieldValue_{{id}}_OrderlineComment">
86 {{#compare comment '!==' ''}}
87 @ImageService.Instance.GetSvgMarkup( "/Files/Templates/Designs/mch365_admin/_assets/img/streamline/comment-box.svg" )
88 {{else}}
89 @ImageService.Instance.GetSvgMarkup( "/Files/Templates/Designs/mch365_admin/_assets/img/streamline/add-comment-box.svg" )
90 {{/compare}}
91 </a>
92 </div>
93 94 <div class="mb-0 w-100 collapse" id="OrderLineFieldValue_{{id}}_OrderlineComment">
95 <textarea class="form-control js-mch365-booth-cart-item-comment-input my-1" id="OrderLineFieldValue_{{id}}_OrderlineComment" name="OrderLineFieldValue_{{id}}_OrderlineComment" rows="4">{{comment}}</textarea>
96 @*<form method="post" enctype="multipart/form-data" class="js-mch365-form" id="mch365-form-comment" data-feed-url="/system/data/mch?Action=contactadd&DisplayType=form" novalidate="novalidate">
97 <div>
98 <div class="form-group mt-1 mb-2">
99 <textarea class="form-control" id="OrderLineFieldValue_{{id}}_OrderlineComment" name="OrderLineFieldValue_{{id}}_OrderlineComment" rows="4"></textarea>
100 </div>
101 </div>
102 </form>*@
103 </div>
104 </div>
105 {{/each}}
106 </div>
107 </div>
108 </div>
109 </div>
110 </div>
111 {{else}}
112 <div class="js-mch365-booth-cart-item d-flex mch365-booth-cart-item flex-wrap mch365-booth-cart-item-layer-{{{main.product.layer}}}" data-orderlineid="{{{main.id}}}">
113 <a class="js-mch365-booth-remove-item-btn mch365-booth-remove-item-btn"></a>
114 <div class="d-flex justify-content-between w-100 align-items-center">
115 <img class="mch365-booth-cart-item-icon" src="{{{main.product.icon}}}" />
116 <p class="d-flex flex-grow-1 flex-shrink-1 my-0 h4 small">{{{main.product.name}}}</p>
117 <div class="mch365-booth-cart-show-coordinates-wrapper">
118 <span class="mch365-booth-cart-show-coordinates-placeholder">@ImageService.Instance.GetSvgMarkup( "/Files/Templates/Designs/mch365_admin/_assets/img/streamline/grid-artboard.svg" )</span>
119 <div class="mch365-booth-cart-show-coordinates position-relative d-flex">
120 <span class="d-inline-flex flex-shrink-0 flex-grow-0 badge badge-light small border">x:{{{main.coords.x}}}; y:{{{main.coords.y}}}</span>
121 <span class="coordinates-direction-specific rotate-{{main.boothItem.rotation}}"></span>
122 </div>
123 </div>
124 <a class="ml-1 mch365-booth-cart-utility-btn flex-shrink-0 js-mch365-booth-item-add-comment {{#compare comment '!==' ''}}comment-added{{/compare}} collapsed" title="tilføj/ret kommentar" type="button" data-toggle="collapse" data-target="#OrderLineFieldValue_{{id}}_OrderlineComment" aria-expanded="false" aria-controls="OrderLineFieldValue_{{id}}_OrderlineComment">
125 {{#compare comment '!==' ''}}
126 @ImageService.Instance.GetSvgMarkup( "/Files/Templates/Designs/mch365_admin/_assets/img/streamline/comment-box.svg" )
127 {{else}}
128 @ImageService.Instance.GetSvgMarkup( "/Files/Templates/Designs/mch365_admin/_assets/img/streamline/add-comment-box.svg" )
129 {{/compare}}
130 </a>
131 </div>
132 <div class="mb-0 w-100 collapse" id="OrderLineFieldValue_{{id}}_OrderlineComment">
133 @*<form method="post" enctype="multipart/form-data" class="js-mch365-form" id="mch365-form-comment" data-feed-url="/system/data/mch?Action=contactadd&DisplayType=form" novalidate="novalidate">
134 <div>
135 <div class="form-group my-1">*@
136 <textarea class="form-control js-mch365-booth-cart-item-comment-input my-1" id="OrderLineFieldValue_{{id}}_OrderlineComment" name="OrderLineFieldValue_{{id}}_OrderlineComment" rows="4">{{comment}}</textarea>
137 @*</div>
138 </div>
139 </form>*@
140 </div>
141 </div>
142 {{/compare}}
143 {{/each}}
144 {{else}}
145 <p>Du har endnu ingen placerede elementer. Træk i elementet i listen herover og før dem over på tegningen for at placere.</p>
146 {{/if}}
147 </script>
148 </div>
149 </div>
150 <div class="col-9 js-mch365-booth-container">
151 <div class="d-flex js-mch365-booth-cart-header">
152 <script id="js-e-handlebars-tmpl-booth-cart-header" type="text/x-handlebars-template">
153 <div class="flex-fill mb-1">
154 <ul class="list-unstyled d-flex">
155 <li class="mr-3"><label class="mr-1">Stand</label>{{{cart.booth.id}}}</li>
156 <li><label class="mr-1">Total m<sup>2</sup></label>{{{cart.booth.size}}}</li>
157 </ul>
158 </div>
159 <div class="text-right">
160 <a class="underline small" download href="{{{cart.booth.pdfFloorPlan}}}">Se hele halplanen</a>
161 <div class="d-block small text-muted">@Translate("MCH365 - Hall link info - text", "OBS: Din stand vender som på halplanen.")</div>
162 </div>
163 </script>
164 </div>
165166 <div class="align-items-center bg-light rounded d-flex justify-content-around position-relative" style="aspect-ratio: 4/3;">
167168 <div class="btn-group d-flex flex-column position-absolute mch365-booth-canvas-zoom-container">
169 <a class="btn btn-icon js-mch365-booth-canvas-zoom" data-direction="in">@ImageService.Instance.GetSvgMarkup( "/Files/Templates/Designs/mch365_admin/_assets/img/streamline/add.svg" )</a>
170 <span class="mch365-booth-canvas-zoom-container-icon">@ImageService.Instance.GetSvgMarkup( "/Files/Templates/Designs/mch365_admin/_assets/img/streamline/streamline-icon-search-1@48x48.svg" )</span>
171 <a class="btn btn-icon js-mch365-booth-canvas-zoom" data-direction="out">@ImageService.Instance.GetSvgMarkup( "/Files/Templates/Designs/mch365_admin/_assets/img/streamline/subtract.svg" )</a>
172 </div>
173174 <div id="js-mch365-booth-panzoom-canvas" class="js-mch365-booth-panzoom-canvas mch365-booth-panzoom-canvas">
175176 <div class="js-mch365-booth-guide-layer mch365-booth-guide-layer">
177 <div class="mch365-booth-legend-xy">
178 <span>x</span>
179 <span>y</span>
180 </div>
181 <div class="mch365-x">
182 @for ( int i = -30; i <= 30; i++ )
183 {
184 <span>@i</span>
185 }
186 </div>
187 <div class="mch365-y">
188 @for ( int i = -30; i <= 30; i++ )
189 {
190 <span>@i</span>
191 }
192 </div>
193 <div id="js-mch365-booth" class="mch365-booth js-mch365-booth">
194 <script id="js-e-handlebars-tmpl-booth-item-partial" type="text/x-handlebars-template">
195 <div class="js-mch365-booth-item mch365-booth-item booth-item-{{{product.number}}} booth-item-dimensions-{{{id}}} mch365-booth-item-layer-{{{product.layer}}} {{#if product.rotatable}}is-rotatable deg-{{{boothItem.rotation}}}{{/if}}" data-orderlineid="{{{id}}}" data-x-ratio="{{{product.ratio.x}}}" data-y-ratio="{{{product.ratio.y}}}" data-icon="{{{product.icon}}}" data-rotation="{{{boothItem.rotation}}}" data-x="{{{boothItem.x}}}" data-y="{{{boothItem.y}}}">
196 <div class="test-ae show-on-active">
197 <svg class="e-loading-spinner" viewBox="0 0 100 100">
198 <circle class="path circle1" cx="50" cy="50" r="50" fill="none"></circle>
199 <circle class="path circle2" cx="50" cy="50" r="50" fill="none"></circle>
200 <circle class="path circle3" cx="50" cy="50" r="50" fill="none"></circle>
201 </svg>
202 </div>
203 <div class="item-icon"></div>
204 {{#if product.rotatable}}<span class="icon-rotate js-mch365-rotate-item show-on-active"><span></span></span>{{/if}}
205 </div>
206 <style>
207 .booth-item-{{{product.number}}}{
208 --booth-item-icon: url('{{{product.icon}}}');
209 }
210 </style>
211 </script>
212 </div>
213 </div>
214 </div>
215 </div>
216217218 <div class="mt-2 d-block d-xl-flex">
219 <div class="flex-grow-1 flex-shrink-1 pr-0 pr-xl-2 js-mch365-booth-legends mch365-booth-legends">
220 <script id="js-e-handlebars-tmpl-booth-legends" type="text/x-handlebars-template">
221 <div class="row">
222 <div class="col-4 js-mch365-booth-level-legends mch365-booth-level-legends">
223 <div class="border-bottom mb-1">
224 <label for="BoothLevel1" class="checkbox mch365-custom-checkbox mb-0 p-0 d-flex justify-content-between">
225 <span class="h4 small">Grundplan</span>
226 <div class="mch365-single-switch">
227 <input name="BoothLevel1" id="BoothLevel1" type="checkbox" checked data-layer="1" class="form-control js-mch365-booth-toggle-layer">
228 <span class="mch365-single-switch-slider"></span>
229 </div>
230 </label>
231 </div>
232 {{#each layer1}}
233 <div class="d-flex justify-content-start mch365-booth-level-item mb-1">
234 <img class="mch365-booth-level-item-icon" src="{{{product.icon}}}" />
235 <p class="mb-0 font-family-headings small">{{{boothItem.iconText}}}</p>
236 </div>
237 {{/each}}
238 </div>
239 <div class="col-4 js-mch365-booth-level-legends mch365-booth-level-legends">
240 <div class="border-bottom mb-1">
241 <label for="BoothLevel2" class="checkbox mch365-custom-checkbox mb-0 p-0 d-flex justify-content-between">
242 <span class="h4 small">Interiør</span>
243 <div class="mch365-single-switch">
244 <input name="BoothLevel2" id="BoothLevel2" type="checkbox" checked data-layer="2" class="form-control js-mch365-booth-toggle-layer">
245 <span class="mch365-single-switch-slider"></span>
246 </div>
247 </label>
248 </div>
249 {{#each layer2}}
250 <div class="d-flex justify-content-start mch365-booth-level-item mb-1">
251 <img class="mch365-booth-level-item-icon" src="{{{product.icon}}}" />
252 <p class="mb-0 font-family-headings small">{{{boothItem.iconText}}}</p>
253 </div>
254 {{/each}}
255 </div>
256 <div class="col-4 js-mch365-booth-level-legends mch365-booth-level-legends">
257 <div class="border-bottom mb-1">
258 <label for="BoothLevel3" class="checkbox mch365-custom-checkbox mb-0 p-0 d-flex justify-content-between">
259 <span class="h4 small">Lys / strøm</span>
260 <div class="mch365-single-switch">
261 <input name="BoothLevel3" id="BoothLevel3" type="checkbox" checked data-layer="3" class="form-control js-mch365-booth-toggle-layer">
262 <span class="mch365-single-switch-slider"></span>
263 </div>
264 </label>
265 </div>
266 {{#each layer3}}
267 <div class="d-flex justify-content-start mch365-booth-level-item mb-1">
268 <img class="mch365-booth-level-item-icon" src="{{{product.icon}}}" />
269 <p class="mb-0 font-family-headings small">{{{boothItem.iconText}}}</p>
270 </div>
271 {{/each}}
272 </div>
273 </div>
274275 </script>
276 </div>
277278 <div class="flex-grow-0 flex-shrink-0 mt-2 mt-xl-0">
279 <a class="btn btn-block btn-primary js-mch365-btn-booth-update" href="#">Gem og luk</a>
280 </div>
281282 </div>
283 </div>
284 </div>
285 