Remove bootstrap-vue-next to fix the dropdowns

This was broken in the upgrade to Vue 3, whoops.
chaosdorf · Aug 15, 2024 · f9d4863 · f9d4863
1 parent 03e2e4d
commit f9d4863
Show file tree

Hide file tree

Showing 19 changed files with 41 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
   "private": true,
   "dependencies": {
     "bootstrap": "^5",
-    "bootstrap-vue-next": "^0.24",
+    "@popperjs/core": "^2",
     "raven-js": "^3.27.0",
     "vue": "^3",
     "vue-sse": "^2.5.2"

diff --git a/src/static/bootstrap-vue.css b/src/static/bootstrap-vue.css
diff --git a/src/static/bootstrap-vue.js b/src/static/bootstrap-vue.js
diff --git a/src/static/bootstrap-vue.js.map b/src/static/bootstrap-vue.js.map
diff --git a/src/static/bootstrap.js b/src/static/bootstrap.js
@@ -0,0 +1 @@
+../../node_modules/bootstrap/dist/js/bootstrap.js
diff --git a/src/static/bootstrap.js.map b/src/static/bootstrap.js.map
diff --git a/src/static/bootstrap.min.js b/src/static/bootstrap.min.js
@@ -0,0 +1 @@
+../../node_modules/bootstrap/dist/js/bootstrap.min.js
diff --git a/src/static/bootstrap.min.js.map b/src/static/bootstrap.min.js.map
diff --git a/src/static/host_check.js b/src/static/host_check.js
@@ -174,6 +174,5 @@ var checkApp = Vue.createApp({
 });
 
 window.onload = function() {
-    checkApp.use(window["bootstrap-vue-next"].createBootstrap());
     checkApp.mount("#check-status");
 }
diff --git a/src/static/main.js b/src/static/main.js
@@ -5,3 +5,8 @@ function mediaQueryUpdated(mq) {
 }
 mediaQuery.addListener(mediaQueryUpdated);
 mediaQueryUpdated(mediaQuery);
+
+[...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
+    .forEach(el => new bootstrap.Tooltip(el));
+[...document.querySelectorAll('[data-bs-toggle="popover"]')]
+    .forEach(el => new bootstrap.Popover(el));
diff --git a/src/static/popper.js b/src/static/popper.js
@@ -0,0 +1 @@
+../../node_modules/@popperjs/core/dist/umd/popper.js
diff --git a/src/static/popper.js.map b/src/static/popper.js.map
diff --git a/src/static/popper.min.js b/src/static/popper.min.js
@@ -0,0 +1 @@
+../../node_modules/@popperjs/core/dist/umd/popper.min.js
diff --git a/src/static/popper.min.js.map b/src/static/popper.min.js.map
diff --git a/src/static/talks.js b/src/static/talks.js
@@ -251,6 +251,5 @@ var talksApp = Vue.createApp({
 
 window.onload = function() {
     talksApp.use(VueSSE);
-    talksApp.use(window["bootstrap-vue-next"].createBootstrap());
     talksApp.mount("#talks");
 }
diff --git a/src/templates/base.html.j2 b/src/templates/base.html.j2
@@ -4,7 +4,6 @@
         <title>{% block title %}{% endblock %} - Freitagsfoo</title>
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
-        <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-vue.css') }}">
         <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     </head>
     <body>
@@ -53,7 +52,8 @@
                 <span class="text-muted">freitagsfoo-web <a href="https://github.com/chaosdorf/freitagsfoo-web/tree/{{ REVISION }}" rel="noopener noreferrer" target="_blank">{{ REVISION }}</a></span>
             </div>
         </footer>
-        <script type="text/javascript" src="{{ url_for('static', filename='bootstrap-vue.js') }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='popper.min.js') }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='bootstrap.min.js') }}"></script>
         <script type="text/javascript" src="{{ url_for('static', filename='vue-sse.min.js') }}"></script>
         <script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
     </body>

diff --git a/src/templates/host_action.html.j2 b/src/templates/host_action.html.j2
@@ -66,12 +66,12 @@
 
     <div v-if="state['info-beamer'].is_background" class="btn-group btn-group-lg w-100 pb-1" role="group">
         <button type="button" class="btn btn-primary btn-block" v-on:click="doBegin" v-bind:disabled="running.has('beginTalks')">Begin Talks</button>
-        <a tabindex="0" role="button" class="btn btn-info" data-bs-toggle="popover" title="What does this button do?" data-bs-content="<ul><li>tells the Info-Beamer Pi to fade to the title screen</li></ul>">?</a>
+        <a tabindex="0" role="button" class="btn btn-info" data-bs-toggle="popover" data-bs-title="What does this button do?" data-bs-html="true" data-bs-content="<ul><li>tells the Info-Beamer Pi to fade to the title screen</li></ul>">?</a>
     </div>
 
     <div v-if="!state['info-beamer'].is_background" class="btn-group btn-group-lg w-100 pb-1" role="group">
         <button type="button" class="btn btn-primary btn-block" v-on:click="doEnd" v-bind:disabled="running.has('endTalks')">End Talks</button>
-        <a tabindex="0" role="button" class="btn btn-info" data-bs-toggle="popover" title="What does this button do?" data-content="<ul><li>tells the Info-Beamer Pi to fade to the background</li></ul>">?</a>
+        <a tabindex="0" role="button" class="btn btn-info" data-bs-toggle="popover" data-bs-title="What does this button do?" data-bs-html="true" data-bs-content="<ul><li>tells the Info-Beamer Pi to fade to the background</li></ul>">?</a>
     </div>
 
     <div class="wizard-buttons my-4">

diff --git a/src/templates/macros_talks.html.j2 b/src/templates/macros_talks.html.j2
@@ -46,19 +46,26 @@
                     <button type="button" class="btn btn-primary btn-block" v-on:click="doAnnounceTalk(index)" v-bind:disabled="running.has('announceTalk')" v-bind:class="{active: index == state['info-beamer'].announced_talk}">Announce</button>
                 </td>
                 <td v-if="is_host">
-                    <div>
-                        <b-dropdown text="Switch to" class="m-md-2" variant="success" v-if="state.talks.current.index == null">
-                            <b-dropdown-item-button v-for="(input, input_index) in state.extron.available_inputs" v-bind:active="input.active" v-bind:key="index + input" v-on:click="doBeginTalk(index, input_index + 1)" v-bind:disabled="running.has('beginTalk')">
-                                {{ input.name }}
-                            </b-dropdown-item-button>
-                            <b-dropdown-item-button v-bind:key="index + 'no_input'" v-on:click="doBeginTalk(index, null)" v-bind:disabled="running.has('beginTalk')">
-                                (no input)
-                            </b-dropdown-item-button>
-                        </b-dropdown>
-                        <button type="button" class="btn btn-danger btn-block" v-on:click="doEndTalk(index)" v-bind:disabled="running.has('endTalk')" v-if="index == state.talks.current.index">
-                            End ({{ Math.trunc(talkRunningForMinutes) }} minutes)
+                    <div class="dropdown" v-if="state.talks.current.index == null">
+                        <button class="btn btn-primary dropdown-toggle m-md-2" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Switch to
                         </button>
+                        <ul class="dropdown-menu">
+                            <li v-for="(input, input_index) in state.extron.available_inputs" v-bind:key="index + input">
+                                <a class="dropdown-item" v-bind:active="input.active" v-on:click="doBeginTalk(index, input_index + 1)" v-bind:disabled="running.has('beginTalk')">
+                                    {{ input.name }}
+                                </a>
+                            </li>
+                            <li v-bind:key="index + 'no_input'">
+                                <a class="dropdown-item" v-on:click="doBeginTalk(index, null)" v-bind:disabled="running.has('beginTalk')">
+                                    (no input)
+                                </a>
+                            </li>
+                        </ul>
                     </div>
+                    <button type="button" class="btn btn-danger btn-block" v-on:click="doEndTalk(index)" v-bind:disabled="running.has('endTalk')" v-if="index == state.talks.current.index">
+                        End ({{ Math.trunc(talkRunningForMinutes) }} minutes)
+                    </button>
                 </td>
             </tr>
             <tr v-if="state.talks.length == 0">

diff --git a/yarn.lock b/yarn.lock
@@ -33,6 +33,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
   integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
+"@popperjs/core@^2":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@vue/[email protected]":
   version "3.4.37"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.37.tgz#55db3900e09424c65c39111a05a3c6e698f371e3"
@@ -113,11 +118,6 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.37.tgz#4f4c08a2e73da512a77b47165cf59ffbc1b5ade8"
   integrity sha512-nIh8P2fc3DflG8+5Uw8PT/1i17ccFn0xxN/5oE9RfV5SVnd7G0XEFRwakrnNFE/jlS95fpGXDVG5zDETS26nmg==
 
-bootstrap-vue-next@^0.24:
-  version "0.24.6"
-  resolved "https://registry.yarnpkg.com/bootstrap-vue-next/-/bootstrap-vue-next-0.24.6.tgz#b6c8fef326806244e0608753ff16ad4381133a76"
-  integrity sha512-G38cI/pUHnGxKE9brEuIedc5dp112rZcK+3zeBkZbNh7UNyVHegj9uz9xabO1WQLw9gxq61FhSTtYqRCOfPGfg==
-
 bootstrap@^5:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.3.tgz#de35e1a765c897ac940021900fcbb831602bac38"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../../node_modules/bootstrap/dist/js/bootstrap.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../../node_modules/@popperjs/core/dist/umd/popper.js